* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

button, a, input, select, textarea, [role="button"] {
  touch-action: manipulation;
}

body {
  background: #0d1117;
  color: #e6edf3;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
}

.hidden { display: none !important; }

/* ============================================================
   Custom tooltip
   ============================================================ */

.custom-tooltip {
  position: fixed; z-index: 99999;
  padding: 5px 11px;
  background: #0d1117;
  color: #e6edf3;
  font-size: .71rem; font-weight: 700;
  letter-spacing: .02em;
  border-radius: 7px;
  border: 1px solid rgba(43,170,158,.35);
  box-shadow: 0 6px 20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .1s ease, transform .1s ease;
}
.custom-tooltip.tt-in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Splash screen
   ============================================================ */

#splashScreen {
  position: fixed;
  inset: 0;
  background: #05090d;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity .45s ease;
}
#splashScreen.splash-out {
  opacity: 0;
  pointer-events: none;
}
.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.splash-icon {
  width: 110px;
  height: 110px;
  animation: splash-rise .7s cubic-bezier(.34,1.56,.64,1) both;
  filter: drop-shadow(0 0 24px rgba(43,170,158,.45));
}
.splash-title {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 7px;
  color: #e6edf3;
  animation: splash-rise .7s .12s cubic-bezier(.34,1.56,.64,1) both;
}
.splash-dots {
  display: flex;
  gap: 9px;
  animation: splash-rise .5s .28s ease both;
}
.splash-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2baa9e;
  animation: splash-dot 1.3s ease-in-out infinite;
}
.splash-dots span:nth-child(2) { animation-delay: .18s; }
.splash-dots span:nth-child(3) { animation-delay: .36s; }

@keyframes splash-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes splash-dot {
  0%, 80%, 100% { transform: scale(.65); opacity: .35; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* ============================================================
   Écran de connexion
   ============================================================ */

#loginScreen {
  position: fixed; inset: 0;
  background: rgba(5,8,14,0.96);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}

.login-box {
  text-align: center;
  background: #161b22;
  padding: 28px 44px;
  border-radius: 18px;
  border: 1px solid #30363d;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  width: 360px;
}

/* ── Vue création/rejoindre ─────────────────────────────────── */
#joinView {
  width: 420px;
  max-width: calc(100vw - 24px);
  padding: 0;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(34,152,136,.18) 0%, rgba(34,152,136,.05) 40%, transparent 65%), #0d1117;
  border-color: rgba(43,170,158,.28);
}

.login-box-wide {
  width: 920px;
  max-width: calc(100vw - 32px);
}

/* ── Track controls (recherche + tri) ───────────────────────── */
.track-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.track-search-input {
  flex: 1;
  min-width: 140px;
  padding: 8px 12px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #e6edf3;
  font-size: .85rem;
  outline: none;
  transition: border-color .15s;
}
.track-search-input:focus { border-color: #2baa9e; }
.track-search-input::placeholder { color: #484f58; }
.track-sort-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .15s;
}
.track-sort-wrap:focus-within { border-color: #2baa9e; }
.track-sort-icon {
  padding: 0 5px 0 9px;
  color: #8b949e;
  font-size: .85rem;
  pointer-events: none;
  line-height: 1;
}
.track-sort-select {
  background: transparent;
  border: none;
  color: #c9d1d9;
  font-size: .8rem;
  font-weight: 600;
  padding: 7px 22px 7px 4px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%238b949e' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
}

.track-sort-btn {
  padding: 6px 12px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 20px;
  color: #8b949e;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.track-sort-btn:hover { border-color: #484f58; color: #e6edf3; }
.track-sort-btn.active { background: #2baa9e; border-color: #2baa9e; color: #fff; }

.track-surface-btns {
  flex: 0 0 100%;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin-top: 2px;
}
.track-surface-btns::-webkit-scrollbar { display: none; }

.comp-surface-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  margin-bottom: 8px;
}
.comp-surface-label {
  font-size: .78rem;
  color: #8b949e;
  white-space: nowrap;
}
.comp-surface-check {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  color: #c9d1d9;
  cursor: pointer;
  user-select: none;
}
.comp-surface-check input { accent-color: #2baa9e; cursor: pointer; }

.track-grid-empty {
  grid-column: 1 / -1;
  color: #484f58;
  font-size: .84rem;
  padding: 16px 0;
  text-align: center;
}
.track-grid-section-label {
  grid-column: 1 / -1;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #484f58;
  padding: 8px 0 2px;
  border-top: 1px solid #21262d;
  margin-top: 4px;
}

/* ── Track grid ──────────────────────────────────────────────── */
.track-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-height: min(380px, calc(100vh - 360px));
  overflow-y: auto;
  scrollbar-gutter: stable;
  margin-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: #30363d transparent;
}
.track-grid::-webkit-scrollbar { width: 8px; }
.track-grid::-webkit-scrollbar-track { background: transparent; }
.track-grid::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }

.track-card-skeleton {
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(90deg, #161b22 25%, #1c2128 50%, #161b22 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  aspect-ratio: 280 / 155;
  border: 2px solid #21262d;
}
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.track-card {
  background: linear-gradient(160deg, #121b24 0%, #0d1117 60%);
  border: 1.5px solid #1c2731;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .18s, transform .1s, box-shadow .18s;
  text-align: left;
  user-select: none;
  position: relative;
}
/* Accent stripe gauche */
.track-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; width: 2px; height: 100%;
  background: linear-gradient(to bottom, #2baa9e 0%, transparent 70%);
  opacity: 0; transition: opacity .2s;
}
.track-card:hover {
  border-color: #2a3a4a;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.track-card:hover::before { opacity: .65; }
.track-card.selected {
  border-color: rgba(43,170,158,.5);
  box-shadow: 0 0 0 1px rgba(43,170,158,.2), 0 4px 20px rgba(43,170,158,.15);
}
.track-card.selected::before { opacity: 1; }

.track-card-canvas {
  width: 100%;
  height: auto;
  display: block;
}

.track-card-info {
  padding: 7px 10px 10px;
  border-top: 1px solid rgba(255,255,255,.04);
  background: rgba(0,0,0,.2);
}
.track-card.selected .track-card-info { border-top-color: rgba(43,170,158,.12); }

.track-card-name {
  font-size: .8rem;
  font-weight: 700;
  color: #e6edf3;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-card.selected .track-card-name { color: #2baa9e; }

.card-lb-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .65rem;
  line-height: 1.5;
}
.card-lb-rank { width: 16px; flex-shrink: 0; font-size: .65rem; }
.card-lb-name {
  flex: 1; color: #8b949e;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-lb-time {
  font-family: 'Consolas', monospace;
  color: #8b949e; white-space: nowrap; font-size: .65rem;
}
.card-lb-row.card-lb-me .card-lb-name,
.card-lb-row.card-lb-me .card-lb-time { color: #2baa9e; }
.card-lb-sep {
  color: #484f58; font-size: .58rem; letter-spacing: 2px;
  padding: 0 0 0 20px; line-height: 1.4;
}
.card-lb-empty { font-size: .67rem; color: #484f58; }
.card-lb-cup-badge {
  display: inline-block; font-size: .6rem; font-weight: 700; letter-spacing: .03em;
  color: #f0a500; background: rgba(240,165,0,.1); border: 1px solid rgba(240,165,0,.25);
  border-radius: 4px; padding: 1px 5px; margin-bottom: 4px;
}
.card-lb-loading {
  font-size: .67rem;
  color: #484f58;
  animation: lb-pulse 1.2s ease-in-out infinite;
}
@keyframes lb-pulse {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

@media (max-width: 860px) {
  .track-grid { grid-template-columns: repeat(2, 1fr); max-height: min(340px, calc(100vh - 360px)); }
}
@media (max-width: 560px) {
  .track-sort-btn { padding: 5px 10px; font-size: .7rem; min-height: 32px; }
  .track-sort-select { font-size: .78rem; padding: 6px 22px 6px 3px; }
  .track-search-input { font-size: 1rem; }
  .track-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: min(280px, calc(100vh - 310px)); }
  .track-card-name { font-size: .72rem; }
  .login-box-wide { padding: 16px 14px; }
}

.subtitle { color: #8b949e; font-size: 0.88rem; margin-bottom: 12px; text-align: center; }

.create-layout {
  display: grid;
  grid-template-columns: 1.2fr .95fr;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 14px;
}

.track-preview-panel {
  background:
    radial-gradient(circle at top left, rgba(43,170,158,.15), transparent 42%),
    linear-gradient(160deg, #11161d, #0b1016);
  border: 1px solid #2d3540;
  border-radius: 18px;
  padding: 14px;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

#trackPreviewCanvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid #2b313b;
  background: #091017;
}

.preview-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

.preview-caption strong {
  color: #f6f7fb;
  font-size: 1rem;
}

.preview-caption span {
  color: #8b949e;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.create-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.track-picker {
  text-align: left;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 16px;
}

.track-picker label {
  display: block;
  font-size: .78rem;
  color: #8b949e;
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.track-picker select {
  width: 100%;
  padding: 10px 12px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #e6edf3;
  font-size: .95rem;
  outline: none;
}

.track-summary {
  margin-top: 8px;
  min-height: 52px;
  color: #8b949e;
  font-size: .84rem;
  line-height: 1.45;
}

.track-summary strong { color: #2baa9e; font-weight: 700; }

/* ── Rangée Créer + Modes Fun (côte à côte desktop) ─────────── */
.create-btns-row {
  display: flex; gap: 8px; align-items: stretch;
  margin-bottom: 10px;
}

/* ── Bouton Créer une partie — tile style ────────────────────── */
#createRoomBtn {
  flex: 2; display: flex; align-items: center; gap: 0;
  background: linear-gradient(to right, #1a8f85 0%, #3cb5ac 100%);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 11px; cursor: pointer; overflow: hidden;
  position: relative; text-align: left; font-family: inherit;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.25);
  transition: filter .15s ease, transform .1s ease;
}
#createRoomBtn::before {
  content: ''; position: absolute; inset: 0; border-radius: 11px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 45%),
    repeating-linear-gradient(
      -62deg,
      transparent 0px, transparent 14px,
      rgba(255,255,255,.045) 14px, rgba(255,255,255,.045) 15px
    );
  pointer-events: none; z-index: 1;
}
#createRoomBtn:hover  { filter: brightness(1.08); }
#createRoomBtn:active { transform: scale(.98); filter: brightness(.9); }
.crb-icon {
  width: 60px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 0; position: relative; z-index: 1;
}
.crb-svg-img { width: 40px; height: 40px; object-fit: contain; display: block; }
.crb-text {
  flex: 1; padding: 14px 8px 14px 0;
  display: flex; flex-direction: column; gap: 2px;
  position: relative; z-index: 1;
}
.crb-text strong {
  display: block; font-size: .85rem; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap;
}
.crb-text span {
  display: block; font-size: .68rem; color: rgba(255,255,255,.65); line-height: 1.3;
}
.crb-chevron {
  color: rgba(255,255,255,.45); margin-right: 14px;
  font-size: 1rem; flex-shrink: 0; position: relative; z-index: 1;
}

/* ── Track select modal (change track in lobby) ─────────────── */
#changeTrackModal .modal-box {
  background:
    linear-gradient(155deg, rgba(34,152,136,.15) 0%, rgba(34,152,136,.04) 40%, transparent 65%),
    #161b22;
  border-color: rgba(43,170,158,.32);
  animation: wlc-in .25s ease both;
}
.track-select-box {
  width: min(880px, calc(100vw - 32px));
  padding: 28px 32px 24px;
  height: min(700px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.track-select-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e6edf3;
  margin: 0 0 14px;
  text-align: center;
  letter-spacing: .3px;
}
.track-select-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 14px;
  flex-shrink: 0;
}
/* ── Grille "changer de circuit" en lobby ── */
/* Le WRAPPER gère le scroll/max-height (via JS).
   La GRILLE prend sa hauteur naturelle — aucune compression possible. */
#changeTrackGridWrap {
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #30363d transparent;
  /* max-height injecté par JS (_fitChangeTrackGrid) */
}
#changeTrackGrid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 0;
  max-height: none !important;   /* le grid ne doit JAMAIS être contraint en hauteur */
  overflow: visible !important;
}
@media (max-width: 640px) {
  #changeTrackGrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .track-select-box { padding: 18px 16px 16px; }
}

.change-track-btn {
  width: 100%;
  margin-top: 8px;
  padding: 9px 10px;
  background: linear-gradient(to right, rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  color: #c9d1d9; font-size: .79rem; font-family: inherit; font-weight: 700;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.1);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.change-track-btn:hover {
  color: #fff; border-color: rgba(255,255,255,.22);
  background: linear-gradient(to right, rgba(255,255,255,.09) 0%, rgba(255,255,255,.04) 100%);
  box-shadow: inset 3px 0 0 rgba(255,255,255,.18);
}

.ghost-toggle-btn {
  width: 100%; margin-top: 8px; padding: 8px;
  background: transparent; border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
  color: #6e7681; font-size: .78rem; font-family: inherit; font-weight: 600;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.ghost-toggle-btn:hover {
  color: #c9d1d9; border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.04);
}
.ghost-toggle-btn.ghost-off { color: #484f58; border-color: rgba(255,255,255,.05); opacity: .5; }

.vote-track-btn {
  width: 100%; margin-top: 6px; padding: 9px 10px;
  background: linear-gradient(to right, rgba(43,170,158,.14) 0%, rgba(43,170,158,.06) 100%);
  color: #2baa9e;
  border: 1.5px solid rgba(43,170,158,.32);
  border-radius: 10px;
  font-size: .79rem; font-family: inherit; font-weight: 700;
  box-shadow: inset 3px 0 0 rgba(43,170,158,.32);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.vote-track-btn:hover {
  border-color: rgba(43,170,158,.6);
  background: linear-gradient(to right, rgba(43,170,158,.22) 0%, rgba(43,170,158,.1) 100%);
  color: #3bc5b6;
  box-shadow: inset 3px 0 0 rgba(43,170,158,.5);
}

.cancel-vote-btn {
  width: 100%; margin-top: 4px; padding: 7px 10px;
  background: transparent;
  color: rgba(248,81,73,.7);
  border: 1px solid rgba(248,81,73,.22);
  border-radius: 10px;
  font-size: .77rem; font-family: inherit; font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.cancel-vote-btn:hover {
  background: rgba(248,81,73,.08);
  border-color: rgba(248,81,73,.5);
  color: #f85149;
}

/* ── Vote modal ──────────────────────────────────────────── */
#trackVoteModal .modal-box {
  background:
    linear-gradient(155deg, rgba(34,152,136,.15) 0%, rgba(34,152,136,.04) 40%, transparent 65%),
    #161b22;
  border-color: rgba(43,170,158,.32);
  animation: wlc-in .25s ease both;
}
.vote-modal-box {
  width: 500px; max-width: calc(100vw - 32px); padding: 26px 24px 22px;
}
.vote-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(43,170,158,.15);
}
#trackVoteModal .vote-title {
  font-size: 1rem; font-weight: 700;
  color: #e6edf3;
  letter-spacing: .3px;
}
.vote-timer {
  font-size: 1.5rem; font-weight: 900; color: #e6edf3;
  font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right;
  transition: color .3s;
}
.vote-timer.urgent { color: #e74c3c; }
.vote-options {
  display: flex; gap: 12px; align-items: stretch; margin-bottom: 14px;
}
.vote-card {
  flex: 1;
  background: linear-gradient(160deg, #121b24 0%, #0d1117 60%);
  border: 1.5px solid #1c2731;
  border-radius: 12px;
  padding: 0;
  display: flex; flex-direction: column; align-items: stretch;
  overflow: hidden;
  transition: border-color .18s, transform .1s, box-shadow .18s;
  cursor: pointer;
  position: relative;
}
.vote-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; width: 2px; height: 100%;
  background: linear-gradient(to bottom, #2baa9e 0%, transparent 70%);
  opacity: 0; transition: opacity .2s;
}
.vote-card:hover { border-color: #2a3a4a; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.vote-card:hover::before { opacity: .65; }
.vote-card.voted-yes  { border-color: rgba(43,170,158,.5); box-shadow: 0 0 0 1px rgba(43,170,158,.2), 0 4px 20px rgba(43,170,158,.15); }
.vote-card.voted-yes::before { opacity: 1; }
.vote-card.voted-other { opacity: .5; transform: none !important; }
.vote-canvas {
  display: block; width: 100%; height: 110px;
  margin: 0; border: none;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.vote-card-name {
  font-size: .82rem; font-weight: 700; color: #e6edf3;
  text-align: center; line-height: 1.3;
  padding: 8px 10px 6px;
}
.vote-btn {
  margin: 0 10px 8px;
  background: linear-gradient(to right, #1a8f85 0%, #3cb5ac 100%);
  color: #fff; border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 8px; padding: 6px 14px;
  font-size: .77rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer; font-family: inherit;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.22);
  transition: filter .15s, opacity .15s;
}
.vote-btn:hover:not(:disabled) { filter: brightness(1.12); }
.vote-btn:disabled { opacity: .3; cursor: default; filter: none; }
.vote-bar-wrap {
  width: calc(100% - 20px); margin: 0 10px 6px;
  height: 3px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden;
}
.vote-bar {
  height: 100%; background: #2baa9e; border-radius: 3px;
  transition: width .35s ease; width: 0%;
}
.vote-count { font-size: .73rem; color: #8b949e; font-weight: 600; text-align: center; padding-bottom: 10px; }
.vote-vs {
  font-size: .75rem; font-weight: 900;
  color: rgba(255,255,255,.18);
  flex-shrink: 0; letter-spacing: .1em;
}
.vote-hint {
  text-align: center; font-size: .8rem; color: #8b949e; margin: 0;
}
.cancel-vote-modal-btn {
  display: block; width: 100%; margin-top: 12px; padding: 9px 14px;
  background: transparent;
  color: rgba(248,81,73,.65);
  border: 1px solid rgba(248,81,73,.22);
  border-radius: 10px;
  font-size: .8rem; font-family: inherit; font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.cancel-vote-modal-btn:hover {
  background: rgba(248,81,73,.08);
  border-color: rgba(248,81,73,.5);
  color: #f85149;
}

/* Séparateur */
.or-sep {
  position: relative; text-align: center; margin: 8px 0;
  color: #484f58; font-size: .78rem;
}
.or-sep::before, .or-sep::after {
  content: ''; position: absolute; top: 50%;
  width: 38%; height: 1px; background: #21262d;
}
.or-sep::before { left: 0; }
.or-sep::after  { right: 0; }

/* Ligne code + bouton rejoindre */
.code-row {
  display: flex; gap: 0;
  background: #0d1117; border: 2px solid #30363d;
  border-radius: 11px; overflow: hidden;
  transition: border-color .2s;
}
.code-row:focus-within { border-color: #2baa9e; }
.code-row input {
  flex: 1; padding: 12px 14px;
  background: transparent; border: none;
  color: #e6edf3; font-size: .98rem; outline: none;
  text-transform: uppercase; letter-spacing: 3px;
  font-family: 'Consolas', monospace;
}
.code-row input::placeholder {
  letter-spacing: .04em; text-transform: none;
  font-family: inherit; color: #484f58;
}
.code-row button {
  padding: 0 20px;
  background: #2baa9e; border: none;
  border-left: 1.5px solid rgba(255,255,255,.15);
  color: #fff; font-size: 1.15rem;
  cursor: pointer; display: flex; align-items: center;
  transition: background .15s;
}
.code-row button:hover { background: #229990; }

.room-code-err { color: #e74c3c; font-size: .82rem; margin: 6px 0 0 4px; }

/* Room badge */
.room-badge {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  background: rgba(43,170,158,.06);
  border: 1.5px solid rgba(43,170,158,.22);
  border-radius: 10px; padding: 9px 16px; margin-bottom: 16px;
  font-size: .9rem;
}
.room-label { color: #8b949e; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.room-badge strong { font-size: 1.25rem; letter-spacing: 4px; color: #2baa9e; font-weight: 900; }

/* Champ pseudo */
#nameInput {
  display: block; width: 100%; padding: 11px 14px;
  background: #0d1117; border: 1.5px solid #30363d;
  border-radius: 11px; color: #e6edf3; font-size: .9rem;
  margin-bottom: 14px; outline: none; transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box; font-family: inherit;
}
#nameInput:focus {
  border-color: #2baa9e;
  box-shadow: 0 0 0 3px rgba(43,170,158,.12);
}
#nameInput[readonly] {
  color: #8b949e; cursor: default;
  border-color: #21262d; background: #0d1117;
}
#nameInput[readonly]:focus { border-color: #21262d; box-shadow: none; }

#roomPasswordJoin { margin-bottom: 12px; }

/* Bouton rejoindre / Lancer */
#joinBtn {
  width: 100%; padding: 0;
  background: linear-gradient(to right, #1a8f85 0%, #3cb5ac 100%);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 11px; cursor: pointer; overflow: hidden;
  position: relative;
  display: flex; align-items: center; gap: 0;
  color: #fff; font-family: inherit;
  text-align: left;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.25);
  transition: filter .15s, transform .1s;
  margin-bottom: 2px;
}
.jb-icon {
  width: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 0; z-index: 1;
}
.jb-svg { width: 32px; height: 32px; object-fit: contain; }
.jb-label {
  flex: 1; z-index: 1;
  font-size: .92rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .07em;
}
.jb-chevron {
  color: rgba(255,255,255,.45); margin-right: 14px;
  font-size: .95rem; z-index: 1;
}
#joinBtn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.13) 0%, transparent 50%),
    repeating-linear-gradient(
      -62deg,
      transparent 0px, transparent 14px,
      rgba(255,255,255,.045) 14px, rgba(255,255,255,.045) 15px
    );
}
#joinBtn:hover  { filter: brightness(1.08); }
#joinBtn:active { transform: scale(.98); filter: brightness(.95); }
#joinBtn:disabled {
  background: #21262d !important; border-color: #30363d !important;
  color: #484f58 !important; box-shadow: none !important;
  filter: none; cursor: default;
}

.spectator-join-btn {
  width: 100%; padding: 9px;
  background: transparent; color: #8b949e;
  font-size: .85rem; font-weight: 600;
  border: 1px solid #30363d; border-radius: 50px; cursor: pointer;
  margin-top: 8px; transition: color .15s, border-color .15s;
}
.spectator-join-btn:hover { color: #e6edf3; border-color: #8b949e; }
.spectator-join-btn:disabled { opacity: .5; cursor: default; }

/* ── Spectator overlay ───────────────────────────────────────── */
.spectator-overlay {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(13,17,23,0.82); border: 1px solid #30363d;
  border-radius: 10px; padding: 6px 14px; pointer-events: none; z-index: 20;
}
.spectator-overlay-icon { font-size: 1.1rem; }
.spectator-overlay-text { font-size: .78rem; font-weight: 700; color: #e6edf3; }
.spectator-overlay-hint { font-size: .65rem; color: #8b949e; }

.player-entry.spectator-following { background: rgba(43,170,158,0.12); border-left: 2px solid #2baa9e; cursor: pointer; }
.player-entry[data-spid] { cursor: pointer; }

/* ── TA : modal fin de manche ────────────────────────────────── */
.ta-round-end-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center; z-index: 160;
}
.ta-round-end-overlay.hidden { display: none; }
.ta-round-end-box {
  background: #161b22; border: 1px solid #30363d; border-radius: 14px;
  padding: 22px 28px; min-width: 260px; max-width: 360px;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.7);
}
.ta-round-end-title { font-size: 1rem; font-weight: 800; color: #2baa9e; }
.ta-round-end-list { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.ta-round-end-entry {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem; color: #c9d1d9; padding: 4px 0;
  border-bottom: 1px solid #21262d;
}
.ta-round-end-entry.me { color: #2baa9e; font-weight: 700; }
.ta-round-end-pos { min-width: 22px; font-size: .8rem; color: #8b949e; }
.ta-round-end-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ta-round-end-name { flex: 1; }
.ta-round-end-time { font-variant-numeric: tabular-nums; font-size: .8rem; color: #8b949e; }
.ta-round-end-entry.me .ta-round-end-time { color: #2baa9e; }
.ta-round-end-next { font-size: .72rem; color: #484f58; font-style: italic; }

/* ── TA spectateur : leaderboard complet ─────────────────────── */
.spectator-overlay.ta-spectator-mode {
  pointer-events: all; top: 50%; transform: translate(-50%, -50%);
  padding: 14px 18px; min-width: 260px;
}
.ta-spectator-board { width: 100%; margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.ta-spectator-board.hidden { display: none; }
.ta-spectator-entry {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: #c9d1d9; padding: 5px 6px;
  border-radius: 6px; background: rgba(255,255,255,.04);
}
.ta-spectator-entry:hover { background: rgba(43,170,158,.1); }
.ta-spectator-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ta-spectator-name { flex: 1; font-weight: 600; }
.ta-spectator-time { font-variant-numeric: tabular-nums; font-size: .75rem; color: #8b949e; margin-right: 6px; }
.ta-spectator-btn {
  font-size: .68rem; padding: 3px 8px; border-radius: 4px;
  background: #21262d; border: 1px solid #30363d; color: #8b949e;
  cursor: pointer; white-space: nowrap;
}
.ta-spectator-btn:hover { background: #2baa9e; color: #fff; border-color: #2baa9e; }
.ta-spectator-btn.active { background: #2baa9e; color: #fff; border-color: #2baa9e; }
.player-entry[data-spid]:hover { background: rgba(255,255,255,0.04); }

.friend-spectate-btn { background: none; border: 1px solid #30363d; border-radius: 6px; color: #8b949e; cursor: pointer; font-size: .85rem; padding: 3px 7px; transition: color .15s, border-color .15s; }
.friend-spectate-btn:hover { color: #e6edf3; border-color: #8b949e; }

.hint { color: #484f58; font-size: .78rem; margin-top: 14px; }

.secondary-action {
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  background: transparent;
  border: 1px solid #3b434d;
  border-radius: 6px;
  color: #c9d1d9;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.secondary-action:hover {
  background: rgba(255,255,255,.04);
  border-color: #8b949e;
  color: #fff;
  box-shadow: 0 0 10px rgba(139,148,158,.15);
}

.back-home-btn {
  border-color: #2baa9e;
  color: #2baa9e;
}
.back-home-btn:hover {
  background: rgba(43,170,158,0.12);
  border-color: #2baa9e;
  color: #2baa9e;
}

/* ── Retour accueil dans joinView — version épurée ── */
#backHomeBtnJoin {
  width: 100%; margin-top: 0;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  color: rgba(255,255,255,.38);
  font-size: .8rem; font-weight: 600; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer;
  transition: background .15s, border-color .2s, color .2s;
}
#backHomeBtnJoin i { font-size: .85rem; }
#backHomeBtnJoin:hover {
  background: rgba(43,170,158,.07);
  border-color: rgba(43,170,158,.3);
  color: rgba(43,170,158,.9);
}

/* Bouton icône */
.icon-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1rem; padding: 2px 6px; border-radius: 5px;
  transition: background .15s; color: #8b949e;
}
.icon-btn:hover { background: #21262d; color: #e6edf3; }

/* ============================================================
   Layout jeu
   ============================================================ */

#gameContainer { display: flex; gap: 14px; align-items: flex-start; }

#gameCanvas {
  display: block; border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5); outline: none;
}

#splitDeltaBadge {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  font-family: 'Consolas', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 7px;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.4s;
  white-space: nowrap;
}

#lapPosBadge {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  font-family: 'Consolas', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 7px;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 0.4s;
  white-space: nowrap;
  letter-spacing: .03em;
}

/* ============================================================
   Sidebar
   ============================================================ */

#sidebar {
  width: 186px;
  background: linear-gradient(155deg, rgba(34,152,136,.13) 0%, rgba(34,152,136,.04) 40%, transparent 65%), #0d1117;
  border: 1px solid rgba(43,170,158,.22);
  border-radius: 12px;
  padding: 14px; flex-shrink: 0;
}

.room-header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.room-id-display { flex: 1; }
.room-label { font-size: .72rem; color: #484f58; display: block; }
#sidebarRoomCode {
  font-size: .95rem; font-weight: 700; letter-spacing: 2px; color: #2baa9e;
}

#raceStatus {
  font-size: .78rem; color: #8b949e; margin-bottom: 10px; min-height: 15px;
}

.track-chip {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 9px 10px;
  margin-bottom: 12px;
}

.track-chip strong {
  display: block;
  color: #e6edf3;
  font-size: .88rem;
  margin-top: 2px;
}

.sidebar-back-btn {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: .82rem;
  padding: 9px 10px;
}

/* ── Retour accueil dans sidebar — version épurée ── */
#backHomeBtnSidebar {
  width: 100%; margin-top: 8px; margin-bottom: 12px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  color: rgba(255,255,255,.32);
  font-size: .78rem; font-weight: 600; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer;
  transition: background .15s, border-color .2s, color .2s;
}
#backHomeBtnSidebar i { font-size: .82rem; }
#backHomeBtnSidebar:hover {
  background: rgba(43,170,158,.06);
  border-color: rgba(43,170,158,.28);
  color: rgba(43,170,158,.8);
}

/* Contrôles hôte */
#hostControls { margin-bottom: 12px; }


.race-btns { display: flex; flex-direction: column; gap: 6px; }

#raceBtn {
  width: 100%; padding: 11px 8px;
  background: linear-gradient(to right, #1a8f85 0%, #3cb5ac 100%);
  color: #fff;
  font-weight: 900; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .07em;
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 11px; cursor: pointer;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.25);
  transition: filter .15s, transform .1s;
  font-family: inherit;
}
#raceBtn:hover:not(:disabled) { filter: brightness(1.1); }
#raceBtn:active:not(:disabled) { transform: scale(.97); }
#raceBtn:disabled { opacity: .45; cursor: default; filter: none; }
#raceBtn.btn-reset {
  background: linear-gradient(to right, #1a8f85 0%, #3cb5ac 100%);
  box-shadow: inset 3px 0 0 rgba(255,255,255,.25);
}

#pauseBtn {
  width: 100%; padding: 8px;
  background: transparent;
  color: #d97706;
  font-weight: 700; font-size: .79rem;
  text-transform: uppercase; letter-spacing: .06em;
  border: 1.5px solid rgba(217,119,6,.35);
  border-radius: 10px; cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: inherit;
}
#pauseBtn:hover { background: rgba(217,119,6,.08); border-color: rgba(217,119,6,.6); }
#pauseBtn.btn-resume { color: #2baa9e; border-color: rgba(43,170,158,.35); }
#pauseBtn.btn-resume:hover { background: rgba(43,170,158,.08); border-color: #2baa9e; }

#restartBtn {
  width: 100%; padding: 8px;
  background: transparent;
  color: #a78bfa;
  font-weight: 700; font-size: .79rem;
  text-transform: uppercase; letter-spacing: .06em;
  border: 1.5px solid rgba(167,139,250,.28);
  border-radius: 10px; cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: inherit;
}
#restartBtn:hover { background: rgba(167,139,250,.07); border-color: rgba(167,139,250,.55); }
#restartBtn:active { transform: scale(.97); }

/* Titre pilotes */
#sidebar h2 {
  font-size: .92rem; color: #2baa9e;
  margin: 12px 0 8px; padding-bottom: 8px;
  border-top: 1px solid rgba(255,255,255,.07); padding-top: 12px;
  letter-spacing: .3px;
}

/* Liste joueurs */
.player-entry {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 5px; border-radius: 6px;
  font-size: .82rem; margin-bottom: 3px;
}
.player-entry.me { background: rgba(43,170,158,0.12); }

.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.pname {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.player-entry.me .pname { color: #2baa9e; font-weight: 600; }

.pinfo { font-size: .73rem; color: #8b949e; white-space: nowrap; margin-left: auto; }

.bot-entry { opacity: .88; }
.bot-tag { font-size: .72rem; vertical-align: middle; opacity: .8; }

/* Contrôles clavier */
#controls {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07);
}
#controls h3 {
  font-size: .78rem; color: #8b949e; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: .7px;
}
.key-row {
  font-size: .75rem; color: #6e7681; margin-bottom: 5px;
  display: flex; align-items: center; gap: 4px;
}
kbd {
  display: inline-block; padding: 1px 5px;
  background: #21262d; border: 1px solid #30363d;
  border-bottom-width: 2px; border-radius: 4px;
  font-size: .7rem; font-family: monospace; color: #c9d1d9;
}

/* ============================================================
   HUD
   ============================================================ */

#hud {
  position: fixed; bottom: 24px;
  left: calc(50% - 413px);
  pointer-events: none;
}

/* Bandeau HUD mobile — caché sur desktop */
.mobile-race-hud  { display: none; }
.mobile-emote-bar { display: none; }
#mobileSpecTaBoard { display: none; }

/* Leaderboard TA spectateur mobile */
.mob-ta-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 0 4px;
  font-size: .68rem; font-weight: 700; color: #8b949e;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 3px;
}
.mob-ta-countdown { font-variant-numeric: tabular-nums; font-size: .8rem; font-weight: 700; color: #2baa9e; }
.mob-ta-countdown.urgent { color: #f78166; }
.mob-ta-row {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 4px; font-size: .78rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  border-radius: 5px; transition: background .1s;
}
.mob-ta-row:last-child { border-bottom: none; }
.mob-ta-row.following { background: rgba(43,170,158,0.12); }
.mob-ta-rank { width: 20px; text-align: center; font-size: .7rem; color: #8b949e; flex-shrink: 0; }
.mob-ta-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mob-ta-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-ta-time { font-variant-numeric: tabular-nums; font-size: .72rem; color: #8b949e; flex-shrink: 0; }
.mob-ta-icon { font-size: .72rem; flex-shrink: 0; opacity: .75; }
.mob-ta-sep  { font-size: .6rem; color: #444; text-align: center; padding: 1px 0; }
#speedometer {
  background: rgba(13,17,23,.85); border: 1px solid #30363d;
  border-radius: 10px; padding: 8px 18px;
  font-size: 1.6rem; font-weight: 700; color: #2baa9e;
  backdrop-filter: blur(4px); min-width: 90px; text-align: center;
}
.unit { font-size: .7rem; color: #8b949e; font-weight: 400; margin-left: 3px; }

/* ============================================================
   Toast
   ============================================================ */

.toast {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%);
  background: rgba(22,27,34,.95); border: 1px solid #30363d;
  border-radius: 10px; padding: 10px 20px;
  font-size: .9rem; color: #2baa9e;
  z-index: 300; pointer-events: none;
  transition: opacity .4s;
}
.toast-out { opacity: 0; }

/* ── Winner banner ───────────────────────────────────────── */
.winner-banner {
  position: fixed; top: 14px; left: 50%;
  transform: translateX(-50%) translateY(0);
  display: flex; align-items: center; gap: 8px;
  background: rgba(18,14,0,0.82);
  border: 1px solid rgba(255,215,0,0.55);
  box-shadow: 0 0 16px rgba(255,215,0,0.25), 0 3px 12px rgba(0,0,0,0.6);
  border-radius: 50px; padding: 8px 20px;
  z-index: 9998; pointer-events: none;
  backdrop-filter: blur(6px);
  animation: wbIn .3s cubic-bezier(.34,1.56,.64,1) both;
  transition: opacity .4s, transform .4s;
}
.winner-banner.wb-out { opacity: 0; transform: translateX(-50%) translateY(-8px); }
.wb-medal { font-size: 1.1rem; line-height: 1; }
.wb-text  { font-size: .88rem; color: #f0e8c8; white-space: nowrap; }
.wb-text strong { color: #ffd700; }
@keyframes wbIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Join notification ────────────────────────────────────── */
.join-notif {
  position: fixed; top: 18px; left: 50%;
  transform: translateX(-50%) translateY(-56px);
  background: rgba(13,17,23,0.93);
  border: 1px solid rgba(43,170,158,0.38);
  border-radius: 24px; padding: 7px 18px 7px 10px;
  display: flex; align-items: center; gap: 9px;
  font-size: .88rem; color: #c9d1d9;
  z-index: 700; pointer-events: none;
  opacity: 0; white-space: nowrap;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 28px rgba(0,0,0,0.45);
  transition: transform .38s cubic-bezier(0.34,1.46,0.64,1), opacity .3s;
}
.join-notif-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.join-notif-hide {
  opacity: 0;
  transform: translateX(-50%) translateY(-14px);
  transition: transform .35s ease-in, opacity .3s ease-in;
}
.join-notif-dot {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 5px currentColor;
}
.join-notif-name { color: #e6edf3; }

/* ── Achievement notification dot ─────────────────────────── */
.ach-notif-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 3px; border-radius: 9px;
  background: #f0a500; color: #1a0800;
  font-size: 10px; font-weight: 800; line-height: 1;
  vertical-align: middle;
}
.ach-notif-dot.hidden { display: none; }
#openProfileFromBar, #openSocialBtn { position: relative; overflow: visible; }
#achBadgeNav   { position: absolute; top: -6px; right: -6px; pointer-events: none; }
#socialNavBadge { position: absolute; top: -6px; right: -6px; pointer-events: none; }

.social-online-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #1d3a2e; color: #5cd68c;
  font-size: 10px; font-weight: 700; line-height: 1;
  vertical-align: middle; margin-left: 3px;
}
.social-online-badge.hidden { display: none; }
#achBadgeMobile        { position: absolute; top: 4px; right: 6px; pointer-events: none; font-size: 9px; min-width: 15px; height: 15px; }
#socialMobileNavBadge  { position: absolute; top: 4px; right: 6px; pointer-events: none; font-size: 9px; min-width: 15px; height: 15px; }
#editorNavBadge        { position: absolute; top: 4px; right: 6px; pointer-events: none; font-size: 9px; min-width: 15px; height: 15px; }
#achBadgeTab   { margin-left: 5px; }
.profile-tab   { position: relative; }

/* ── Achievement claimable toast (clickable) ──────────────── */
.ach-toast {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%);
  background: rgba(24,14,2,.97); border: 1px solid #f0a500;
  border-radius: 10px; padding: 10px 20px;
  font-size: .88rem; color: #f0b429;
  z-index: 300; cursor: pointer;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: opacity .4s;
  box-shadow: 0 0 18px rgba(240,165,0,.22);
}
.ach-toast:hover { border-color: #ffd700; }
.ach-toast-cta { color: #2baa9e; font-weight: 700; }
.ach-toast-out { opacity: 0; pointer-events: none; }

/* ============================================================
   Home header (logo + titre + user bar)
   ============================================================ */

.home-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}

.home-brand {
  display: flex; flex-direction: row; align-items: center;
  gap: 14px; flex: 1;
}

/* Header brand – style splash modal */
.join-brand {
  display: flex; flex-direction: row; align-items: center;
  gap: 16px;
  padding: 22px 28px 20px;
  background: linear-gradient(155deg, rgba(34,152,136,.26) 0%, rgba(34,152,136,.08) 45%, transparent 72%);
  border-bottom: 1px solid rgba(43,170,158,.18);
  position: relative; overflow: hidden;
}
.join-brand::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.07) 0%, transparent 55%),
    repeating-linear-gradient(
      -62deg,
      transparent 0px, transparent 14px,
      rgba(255,255,255,.025) 14px, rgba(255,255,255,.025) 15px
    );
}
.join-brand .home-brand-title { align-items: flex-start; position: relative; z-index: 1; }
.join-logo-svg {
  display: block; width: 72px; height: 72px; border-radius: 16px;
  position: relative; z-index: 1; flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}

/* Corps formulaire */
.join-body {
  padding: 20px 24px 24px;
  display: flex; flex-direction: column; gap: 10px;
}

.home-logo-svg {
  display: block; width: 46px; height: 46px; flex-shrink: 0; border-radius: 10px;
}

.home-brand-title {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1; margin: 0; gap: 0;
}
.hbt-mini {
  font-family: 'Orbitron', 'Arial Black', sans-serif;
  font-size: 1.75rem; font-weight: 900;
  color: #eef2f7; letter-spacing: -0.02em;
}
.hbt-racer {
  font-family: 'Orbitron', 'Arial Black', sans-serif;
  font-size: 1.75rem; font-weight: 900;
  color: #2baa9e; letter-spacing: -0.02em;
  text-shadow: 0 0 10px rgba(43,170,158,0.95),
               0 0 26px rgba(43,170,158,0.60),
               0 0 55px rgba(43,170,158,0.28);
}
.hbt-online {
  font-family: Arial, sans-serif;
  font-size: 0.68rem; font-weight: 400;
  color: #3d5c68; letter-spacing: 0.22em;
  margin-top: 3px;
}

/* Desktop: user-bar stays top-right inside the header */
.user-bar {
  display: flex; align-items: center; justify-content: flex-end;
  min-height: 28px; flex-shrink: 0;
}

/* Bottom nav + admin bar — hidden on desktop */
.mobile-bottom-nav { display: none; }
.mobile-admin-bar  { display: none; }
/* Overlay drawer — caché par défaut */
.med-overlay { display: none; }

#userBarLoggedIn {
  display: flex; align-items: center; gap: 8px; font-size: .82rem;
}

#userBarName { color: #e6edf3; font-weight: 600; }

/* Bouton déconnexion — visible mais discret, rouge au survol */
.logout-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid #30363d; border-radius: 8px;
  color: #6e7681; font-size: .78rem; padding: 5px 12px;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.logout-btn:hover {
  color: #f85149;
  border-color: rgba(248,81,73,.4);
  background: rgba(248,81,73,.07);
}

.home-footer-links {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 14px; padding: 10px 0 6px;
  border-top: 1px solid #21262d;
}

/* Rangée flex horizontale */
.footer-row {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
}

/* Rangée outils + langue — toujours visible */
.footer-tools-row { gap: 8px; }

/* Séparateur vertical entre groupes */
.footer-divider {
  width: 1px; height: 18px;
  background: #30363d;
  flex-shrink: 0;
  margin: 0 2px;
}

/* Éditeur + Paddock côte à côte */
.footer-editor-group {
  display: flex; gap: 4px; align-items: center;
}

/* Style pour Éditeur, Classement et Communauté (comme le bouton Événement) */
.btn-notif-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #e74c3c; color: #fff; font-size: .65rem; font-weight: 800;
  border-radius: 8px; vertical-align: middle; margin-left: 4px;
  line-height: 1;
}
#openBetaBtn:has(.btn-notif-badge:not(.hidden)),
#mobileBetaBtn:has(.btn-notif-badge:not(.hidden)) {
  color: #f59e0b !important;
  border-color: #f59e0b !important;
}

.feature-btn {
  color: #8b949e !important; /* Couleur du texte par défaut de l'événement */
  border-color: #30363d !important; /* Couleur de la bordure par défaut de l'événement */
  background: transparent !important; /* S'assurer qu'il est transparent */
  font-weight: 600 !important; /* Poids de police de l'événement */
  animation: none !important; /* Pas d'animation par défaut */
}
.feature-btn:hover { /* Reprendre le hover de l'événement */
  color: #8b949e !important;
  border-color: #484f58 !important;
  background: #161b22 !important;
}

/* Welcome Splash */
@keyframes wlc-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wlc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,152,136,0); }
  50%       { box-shadow: 0 0 0 5px rgba(34,152,136,.20); }
}

.welcome-splash-box {
  text-align: left; width: 440px; padding: 48px 40px;
  position: relative; overflow: hidden;
}
#welcomeSplash .modal-box {
  background:
    linear-gradient(155deg, rgba(34,152,136,.18) 0%, rgba(34,152,136,.04) 40%, transparent 65%),
    #161b22;
  border-color: rgba(34,152,136,.35);
}

.welcome-logo  { width: 64px; height: 64px; margin: 0 0 16px; display: block; animation: wlc-in .3s ease .00s both; }
.welcome-title {
  font-family: 'Orbitron', sans-serif;
  color: #e6edf3; font-size: 1.45rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 8px;
  border-left: 3px solid #42bab2; padding-left: 12px;
  animation: wlc-in .3s ease .07s both;
}
.welcome-sub   { color: #8b949e; margin-bottom: 24px; font-size: .9rem; animation: wlc-in .3s ease .13s both; }
.welcome-options { display: flex; flex-direction: column; gap: 8px; }

.welcome-option-btn:nth-child(1) { animation: wlc-in .3s ease .18s both; }
.welcome-option-btn:nth-child(2) { animation: wlc-in .3s ease .25s both, wlc-pulse 2.8s ease-in-out 1.6s infinite; }
.welcome-option-btn:nth-child(3) { animation: wlc-in .3s ease .32s both; }
.welcome-option-btn:nth-child(4) { animation: wlc-in .3s ease .39s both; }


/* ── Flat tiles, icône intégrée ──────────────────────────────── */
.welcome-option-btn {
  display: flex; align-items: center;
  width: 100%; cursor: pointer; text-align: left;
  border: none; border-radius: 8px; font-family: inherit;
  overflow: hidden; padding: 0; position: relative;
  height: 64px;
  box-shadow: inset 4px 0 0 rgba(255,255,255,.28);
  transition: filter .15s ease, transform .1s ease;
}
/* Reflet haut + speed lines diagonales */
.welcome-option-btn::before {
  content: ''; position: absolute; inset: 0; border-radius: 8px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 45%),
    repeating-linear-gradient(
      -62deg,
      transparent 0px, transparent 14px,
      rgba(255,255,255,.045) 14px, rgba(255,255,255,.045) 15px
    );
  pointer-events: none; z-index: 1;
}
.welcome-option-btn:hover  { filter: brightness(1.1); }
.welcome-option-btn:active { filter: brightness(.88); transform: scale(.99); }

.welcome-opt-icon {
  width: 64px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 0; position: relative; z-index: 2;
}
.welcome-opt-icon svg { display: block; }
.welcome-opt-icon i { font-size: 1.6rem; color: #fff; line-height: 1; }
.welcome-opt-icon img { width: 42px; height: 42px; display: block; object-fit: contain; }

/* Right text area */
.welcome-opt-text {
  flex: 1; padding: 14px 16px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 3px;
  position: relative; z-index: 2;
  overflow: hidden; min-width: 0;
}
.welcome-opt-text strong {
  font-size: .87rem; font-weight: 800; color: #fff;
  text-transform: uppercase; letter-spacing: .05em;
}
.welcome-opt-text span {
  font-size: .74rem; color: rgba(255,255,255,.72); line-height: 1.4;
}

/* ── Bouton héros (Créer mon compte) ────────────────────────── */
.welcome-option-primary {
  height: 86px;
  border-radius: 10px;
}
.welcome-option-primary .welcome-opt-icon {
  width: 76px;
}
.welcome-option-primary .welcome-opt-icon i {
  font-size: 2.1rem;
}
.welcome-option-primary .welcome-opt-icon img {
  width: 52px; height: 52px;
}
.welcome-option-primary .welcome-opt-text {
  padding: 18px 20px; gap: 6px;
}
.welcome-option-primary .welcome-opt-text strong {
  font-size: 1rem; letter-spacing: .07em;
}
.welcome-option-primary .welcome-opt-text span {
  font-size: .8rem;
}

/* ── Color variants — pastel gradient + stroke blanc ────────── */
.welcome-option-discover {
  background: linear-gradient(to right, #b88a18 0%, #dfc84a 100%);
  border: 1.5px solid rgba(255,255,255,0.20);
  box-shadow: inset 3px 0 0 rgba(255,255,255,.28);
}
.welcome-option-primary {
  background: linear-gradient(to right, #1e9088 0%, #42bab2 100%);
  border: 1.5px solid rgba(255,255,255,0.22);
  box-shadow: inset 3px 0 0 rgba(255,255,255,.28);
}
.welcome-option-login {
  background: linear-gradient(to right, #3e5060 0%, #6a8298 100%);
  border: 1.5px solid rgba(255,255,255,0.18);
  box-shadow: inset 3px 0 0 rgba(255,255,255,.22);
}
.welcome-option-code {
  background: linear-gradient(to right, #6840a0 0%, #9668c8 100%);
  border: 1.5px solid rgba(255,255,255,0.20);
  box-shadow: inset 3px 0 0 rgba(255,255,255,.25);
  opacity: 1;
}

/* ── Onboarding ──────────────────────────────────────────────── */
#onboardingOverlay { z-index: 700; }

#onboardingOverlay .modal-box {
  background:
    linear-gradient(155deg, rgba(34,152,136,.18) 0%, rgba(34,152,136,.04) 40%, transparent 65%),
    #161b22;
  border-color: rgba(43,170,158,.32);
  animation: wlc-in .25s ease both;
  position: relative;
  overflow: hidden;
  /* pas de filigrane */
}

.onboarding-box {
  width: 400px;
  max-width: calc(100vw - 32px);
  padding: 30px 32px;
  position: relative; z-index: 1;
}

.ob-title {
  font-size: 1.15rem; font-weight: 800;
  color: #e6edf3;
  margin: 0 0 18px;
  padding-left: 13px;
  border-left: 3px solid #2baa9e;
  line-height: 1.3;
}
.ob-text {
  color: #8b949e;
  margin-bottom: 10px;
  line-height: 1.65;
  font-size: .88rem;
}
.ob-text:last-of-type { margin-bottom: 0; }
.ob-text strong { color: #c9d1d9; font-weight: 700; }

/* Marge généreuse avant les boutons CTA */
.ob-actions {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 28px;
}

/* ── Boutons CTA tuto — tile style (comme "Créer une partie") ── */
.ob-actions .auth-submit,
#obStartBtn,
#obFinalBtn {
  display: flex !important; align-items: center; justify-content: center;
  width: 100%; height: 50px; padding: 0 20px;
  background: linear-gradient(to right, #1a8f85 0%, #3cb5ac 100%);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 11px; cursor: pointer; overflow: hidden;
  position: relative; font-family: inherit;
  font-size: .95rem; font-weight: 800; color: #fff;
  text-shadow: none; box-shadow: none; letter-spacing: .02em;
  transition: filter .15s, transform .1s;
  margin-bottom: 0;
}
.ob-actions .auth-submit::before,
#obStartBtn::before,
#obFinalBtn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.13) 0%, transparent 45%),
    repeating-linear-gradient(-62deg, transparent 0px, transparent 14px,
      rgba(255,255,255,.04) 14px, rgba(255,255,255,.04) 15px);
}
.ob-actions .auth-submit:hover, #obStartBtn:hover, #obFinalBtn:hover {
  filter: brightness(1.08);
  background: linear-gradient(to right, #1a8f85 0%, #3cb5ac 100%) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.ob-actions .auth-submit:active, #obStartBtn:active, #obFinalBtn:active { transform: scale(.98); filter: brightness(.9); }

/* Marge avant les boutons standalone (steps 2 & 3) */
#obStartBtn { width: 100%; margin-top: 28px; }
#obFinalBtn { width: 100%; margin-top: 24px; }
#obSkipBtn  { width: 100%; margin-top: 6px; }

/* Bouton secondaire (passer / retour) — ghost discret */
.ob-actions .auth-guest,
#obSkipBtn {
  width: 100%; padding: 10px; border-radius: 9px;
  background: transparent; border: 1px solid rgba(255,255,255,.1);
  color: #484f58; font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: color .12s, border-color .12s;
}
.ob-actions .auth-guest:hover, #obSkipBtn:hover {
  color: #8b949e; border-color: rgba(255,255,255,.2);
}

/* Step 3 — showcase canvas + hint */
#obShowcaseCanvas {
  border-radius: 10px; background: #0d1117;
  display: block; margin: 18px auto 0;
  width: 100%; max-width: 320px;
  border: 1px solid #21262d;
}
.ob-hint { font-size: .76rem; color: #484f58; margin-top: 10px; }

/* ── Onboarding step 1b — name + color picker ──────────── */
.ob-name-row {
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ob-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #e6edf3;
  font-size: .95rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.ob-name-input:focus { border-color: rgba(43,170,158,.5); }
.ob-name-input.invalid { border-color: rgba(248,113,113,.5); }
.ob-name-err {
  font-size: .72rem;
  color: #f87171;
  margin-left: 2px;
}
.ob-car-preview {
  display: block;
  margin: 0 auto 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
}
.ob-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 22px;
}
.ob-color-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: transform .12s, border-color .12s, box-shadow .12s;
  box-sizing: border-box;
  flex-shrink: 0;
}
.ob-color-dot:hover { transform: scale(1.1); }
.ob-color-dot.selected {
  border-color: #fff;
  transform: scale(1.18);
  box-shadow: 0 0 10px rgba(255,255,255,.35);
}

.footer-link-btn {
  background: none; border: 1px solid #30363d; border-radius: 11px;
  color: #6e7681; font-size: .88rem; padding: 10px 22px;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.footer-link-btn:hover { color: #c9d1d9; border-color: #484f58; background: #161b22; }
.footer-svg-icon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; object-fit: contain; }
.nav-bar-svg-icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; object-fit: contain; }
.footer-link-btn-active {
  color: #ffd700 !important; border-color: rgba(255,215,0,0.4) !important;
  background: rgba(255,215,0,0.07) !important;
  animation: pulse-daily 2s ease-in-out infinite;
}

/* Bouton récompense desktop masqué (accessible via la boutique) */
#openDailyBtn { display: none !important; }

#openEventBtn.footer-link-btn-active {
  color: #2baa9e !important;
  border-color: rgba(43,170,158,.45) !important;
  background: rgba(43,170,158,.10) !important;
  animation: pulse-event 2s ease-in-out infinite !important;
}
#openEventBtn.footer-link-btn-active .footer-svg-icon {
  filter: drop-shadow(0 0 5px rgba(43,170,158,.75));
}

/* Boutique desktop : glow or quand récompense dispo */
#openShopFromBar.footer-link-btn-active .footer-svg-icon {
  filter: drop-shadow(0 0 5px rgba(255,215,0,.65));
}

@keyframes pulse-event {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43,170,158,0); }
  50%       { box-shadow: 0 0 0 4px rgba(43,170,158,0.15); }
}
@keyframes pulse-daily {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
  50%       { box-shadow: 0 0 0 4px rgba(255,215,0,0.15); }
}

.auth-link-btn {
  background: none; border: 1px solid #30363d; border-radius: 20px;
  color: #8b949e; font-size: .78rem; padding: 4px 12px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.auth-link-btn:hover { color: #e6edf3; border-color: #484f58; background: #161b22; }

/* ── Language toggle ─────────────────────────────────────── */
.lang-switch {
  display: inline-flex; align-items: center;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.lang-btn {
  background: transparent; border: none; border-radius: 5px;
  color: #6e7681; font-size: .72rem; font-weight: 700;
  padding: 3px 9px; cursor: pointer; letter-spacing: .05em;
  transition: color .15s, background .15s;
}
.lang-btn:hover:not(.lang-btn-active) { color: #c9d1d9; background: rgba(255,255,255,.05); }
.lang-btn-active {
  background: #2baa9e;
  color: #fff;
}
@media (pointer: coarse) {
  .lang-btn { padding: 6px 12px; font-size: .78rem; min-height: 34px; border-radius: 7px; }
}

/* ============================================================
   Modals
   ============================================================ */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
  backdrop-filter: blur(3px);
}

/* Daily modal s'affiche par-dessus la boutique / profil (DOM order issue) */
#dailyModal { z-index: 600; }

.modal-box {
  background: #161b22; border: 1px solid #30363d;
  border-radius: 18px; padding: 32px 36px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}

.lb-modal-box { width: 520px; max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column; padding: 24px; }

#leaderboardModal .modal-box {
  background:
    linear-gradient(155deg, rgba(34,152,136,.15) 0%, rgba(34,152,136,.04) 40%, transparent 65%),
    #161b22;
  border-color: rgba(43,170,158,.32);
  animation: wlc-in .25s ease both;
  position: relative;
  overflow: hidden;
}
/* Watermark décoratif — icône classement en fond */
#leaderboardModal .modal-box::after {
  content: '';
  position: absolute;
  right: -16px; bottom: -16px;
  width: 180px; height: 180px;
  background: url('/images/classement.svg') no-repeat center / contain;
  filter: brightness(0) invert(1);
  opacity: .035;
  pointer-events: none;
  z-index: 0;
}
.modal-title-svg {
  width: 22px; height: 22px;
  display: inline-block; vertical-align: middle;
  filter: brightness(0) invert(1);
  opacity: .85;
  margin-right: 4px;
}

.lb-scroll-area { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding-right: 2px; position: relative; z-index: 1; }
.global-lb-list { display: flex; flex-direction: column; gap: 0; }

/* Lignes classement — style éditorial, pas des cartes */
.glb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  position: relative;
  cursor: pointer;
  transition: background .12s;
}
.glb-row::before {                    /* trait coloré gauche */
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 2px;
  background: rgba(255,255,255,.07);
}
.glb-row.gold::before   { background: rgba(228,196,41,.7); }
.glb-row.silver::before { background: rgba(160,170,180,.5); }
.glb-row.bronze::before { background: rgba(176,115,64,.5); }
.glb-row-me::before     { background: rgba(43,170,158,.8) !important; }
.glb-row.gold   { background: rgba(228,196,41,.025); }
.glb-row-me     { background: rgba(43,170,158,.03); }
.glb-row:last-child { border-bottom: none; }
.glb-row:hover  { background: rgba(255,255,255,.025); }

.glb-rank {
  width: 22px; font-weight: 800; font-size: .78rem;
  color: rgba(255,255,255,.2); text-align: center; flex-shrink: 0;
}
.glb-rank.gold   { color: #d4aa1a; font-size: .98rem; }
.glb-rank.silver { color: #8a96a0; font-size: .9rem; }
.glb-rank.bronze { color: #8a5e30; font-size: .85rem; }

.glb-name {
  flex: 1; display: flex; align-items: center; gap: 8px;
  font-weight: 600; color: #c9d1d9; font-size: .87rem;
}
.glb-name .dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}

.glb-stats {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
.glb-points {
  font-size: .85rem; font-weight: 700; color: #e6edf3;
  font-variant-numeric: tabular-nums;
}
.glb-tracks {
  font-size: .64rem; color: #3d4550; letter-spacing: .2px;
}

/* ── Barre "ma position" classement ─────────────────────────── */
.lb-my-rank-bar {
  flex-shrink: 0;
  margin-top: 10px;
  padding: 9px 14px;
  background: linear-gradient(to right, rgba(43,170,158,.12) 0%, rgba(43,170,158,.04) 60%, transparent 100%);
  border: 1px solid rgba(43,170,158,.28);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
}
.lbmr-label {
  font-size: .6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: #2baa9e; flex-shrink: 0;
}
.lbmr-rank {
  font-weight: 900; font-size: .95rem; color: #e6edf3;
  min-width: 48px; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.lbmr-name {
  flex: 1; font-weight: 600; color: #c9d1d9;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lbmr-pts {
  font-weight: 700; color: #2baa9e; font-size: .8rem; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.lbmr-scroll-btn {
  background: rgba(43,170,158,.14);
  border: 1px solid rgba(43,170,158,.3);
  border-radius: 7px;
  color: #2baa9e; font-size: .73rem; font-weight: 700;
  padding: 5px 11px; cursor: pointer; flex-shrink: 0;
  transition: background .12s, color .12s;
}
.lbmr-scroll-btn:hover { background: rgba(43,170,158,.28); color: #4ecdc5; }

/* ── Onglets modals — composant réutilisable (classement, profil, boutique…) ── */
.modal-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.modal-tab {
  padding: 7px 16px 9px;
  font-size: .79rem; font-weight: 600;
  border: none; background: transparent;
  color: #6e7681; cursor: pointer; font-family: inherit;
  position: relative;
  transition: color .15s;
  white-space: nowrap;
  letter-spacing: .01em;
}
.modal-tab::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: #2baa9e;
  border-radius: 1px 1px 0 0;
  transform: scaleX(0);
  transition: transform .18s ease;
}
.modal-tab.active { color: #e6edf3; }
.modal-tab.active::after { transform: scaleX(1); }
.modal-tab:not(.active):hover { color: #c9d1d9; }

/* Palmarès des saisons */
.season-palmares { display: flex; flex-direction: column; gap: 10px; }
.palmares-season { background: #0d1117; border: 1px solid #21262d; border-radius: 10px; padding: 12px 14px; }
.palmares-season-label { font-size: .78rem; color: #8b949e; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }
.palmares-winners { display: flex; flex-direction: column; gap: 6px; }
.palmares-winner { display: flex; align-items: center; gap: 8px; background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 7px 12px; }
.palmares-medal { font-size: 1.2rem; line-height: 1; width: 22px; text-align: center; flex-shrink: 0; }
.palmares-name { font-size: .9rem; font-weight: 700; color: #e6edf3; }
.palmares-season--active { border-color: #2baa9e55; }
.palmares-active-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5cd68c; margin-right: 6px; box-shadow: 0 0 5px #5cd68c; animation: pulse-dot .9s ease-in-out infinite alternate; vertical-align: middle; }
@keyframes pulse-dot { from { opacity: .5; } to { opacity: 1; } }
.palmares-winner--locked { opacity: .6; }

/* Auth modal */
.auth-box { width: 340px; }

.auth-lang-switch {
  display: flex; justify-content: flex-end; gap: 2px;
  margin-bottom: 10px;
}

.auth-tabs {
  display: flex; margin-bottom: 22px;
  border-bottom: 1px solid #21262d;
}

.auth-tab {
  flex: 1; padding: 10px; background: none; border: none;
  color: #8b949e; font-size: .92rem; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.auth-tab.active { color: #2baa9e; border-bottom-color: #2baa9e; }

.auth-panel input[type="text"],
.auth-panel input[type="email"],
.auth-panel input[type="password"] {
  display: block; width: 100%; padding: 11px 16px;
  background: #0d1117; border: 2px solid #30363d;
  border-radius: 50px; color: #e6edf3; font-size: .95rem;
  margin-bottom: 10px; outline: none; transition: border-color .2s;
}
.auth-panel input:focus { border-color: #2baa9e; }

/* ── Champs avec icône gauche ────────────────────────── */
#authModal .auth-field {
  position: relative; margin-bottom: 10px;
}
#authModal .auth-field > i {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  font-size: 1rem; color: #6b7688; pointer-events: none; z-index: 1;
  transition: color .2s;
}
#authModal .auth-field > input {
  padding-left: 42px !important;
  margin-bottom: 0 !important;
}
#authModal .auth-field:focus-within > i { color: #2baa9e; }

/* Inputs redesignés */
#authModal .auth-panel input[type="text"],
#authModal .auth-panel input[type="email"],
#authModal .auth-panel input[type="password"] {
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 8px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
#authModal .auth-panel input:focus {
  border-color: rgba(34,152,136,.7);
  background: rgba(34,152,136,.05);
  box-shadow: 0 0 0 3px rgba(34,152,136,.12);
}

/* ── Champ mot de passe avec bouton voiture ─────────── */
.pass-field {
  position: relative;
  margin-bottom: 10px;
}
.pass-field input {
  margin-bottom: 0 !important;
  padding-right: 58px !important;
}
.pass-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  display: flex;
  align-items: center;
  opacity: 0.75;
  transition: opacity .15s;
  overflow: visible;
}
.pass-toggle:hover { opacity: 1; }

/* Phares éteints par défaut */
.pass-toggle[data-shown="false"] .headlight { fill: #444; }

/* Phares allumés : jaune vif + double glow */
.pass-toggle[data-shown="true"] .headlight {
  fill: #ffe566;
  filter: drop-shadow(0 0 3px #ffd700) drop-shadow(0 0 8px #ffd70099);
}

/* Faisceaux : invisibles par défaut */
.beam {
  opacity: 0;
  pointer-events: none;
  filter: blur(4px);
  transition: opacity 0.25s;
}

/* Faisceaux allumés */
.pass-toggle[data-shown="true"] .beam { opacity: 0.22; }

/* Flash initial des faisceaux au moment du clic */
@keyframes beam-flash {
  0%   { opacity: 0.55; }
  60%  { opacity: 0.15; }
  100% { opacity: 0.22; }
}
.pass-toggle.anim-vroom .beam { animation: beam-flash 0.45s ease forwards; }

/* Vroom : voiture face gauche → s'élance vers la gauche */
@keyframes pass-vroom {
  0%   { transform: translateX(0)    rotate(0deg);  }
  25%  { transform: translateX(-7px) rotate(5deg);  }
  55%  { transform: translateX(2px)  rotate(-3deg); }
  80%  { transform: translateX(-1px) rotate(1deg);  }
  100% { transform: translateX(0)    rotate(0deg);  }
}
/* Frein : recule vers la droite */
@keyframes pass-brake {
  0%   { transform: translateX(0);  }
  20%  { transform: translateX(6px) rotate(-4deg); }
  50%  { transform: translateX(-3px) rotate(2deg); }
  75%  { transform: translateX(1px); }
  100% { transform: translateX(0);  }
}
.pass-toggle.anim-vroom .pass-car { animation: pass-vroom .45s ease; }
.pass-toggle.anim-brake .pass-car { animation: pass-brake .35s ease; }

.auth-error {
  color: #e74c3c; font-size: .8rem; min-height: 16px;
  margin: -4px 0 8px 4px;
}

.auth-submit {
  width: 100%; padding: 12px;
  background: transparent; color: #2baa9e;
  font-size: .96rem; font-weight: 700;
  border: 1.5px solid #2baa9e; border-radius: 6px;
  text-shadow: 0 0 10px #2baa9e55;
  box-shadow: 0 0 12px #2baa9e2a, inset 0 0 16px #2baa9e08;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, text-shadow .15s, transform .1s;
  margin-bottom: 6px;
}
.auth-submit:hover {
  background: rgba(43,170,158,.09);
  box-shadow: 0 0 22px #2baa9e55, inset 0 0 20px #2baa9e12;
  text-shadow: 0 0 12px #2baa9e99;
}
.auth-submit:active { transform: scale(.97); }
.auth-submit:disabled { opacity: .5; cursor: default; }

.auth-guest {
  display: block; width: 100%; padding: 10px; background: transparent;
  border: 1px solid #3b434d; border-radius: 6px;
  color: #8b949e;
  font-size: .85rem; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  margin-top: 6px; text-align: center;
}
.auth-guest:hover {
  background: rgba(255,255,255,.04); color: #e6edf3;
  border-color: #8b949e;
  box-shadow: 0 0 10px rgba(139,148,158,.15);
}

/* ── Auth modal — design cohérent avec welcome ──────────────── */
#authModal .modal-box {
  background:
    linear-gradient(155deg, rgba(34,152,136,.14) 0%, rgba(34,152,136,.03) 40%, transparent 65%),
    #161b22;
  border-color: rgba(34,152,136,.30);
  animation: wlc-in .25s ease both;
}

/* ── Toggle pill ─────────────────────────────────────── */
#authModal .auth-tabs {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 4px; gap: 4px;
  margin-bottom: 24px;
}
#authModal .auth-tab {
  border-radius: 7px;
  border-bottom: none;
  color: #6b7688;
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  transition: color .2s, background .2s, box-shadow .2s;
  position: relative; overflow: hidden;
}
#authModal .auth-tab:hover:not(.active) {
  color: #a0aab4;
  background: rgba(255,255,255,.05);
}
#authModal .auth-tab.active {
  font-family: 'Orbitron', sans-serif;
  font-size: .72rem;
  color: #fff;
  background: linear-gradient(to right, #1e9088 0%, #42bab2 100%);
  border-bottom-color: transparent;
  box-shadow: inset 4px 0 0 rgba(255,255,255,.28);
}
#authModal .auth-tab.active::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 50%),
    repeating-linear-gradient(
      -62deg,
      transparent 0px, transparent 14px,
      rgba(255,255,255,.04) 14px, rgba(255,255,255,.04) 15px
    );
}

#authModal .auth-submit {
  background: linear-gradient(to right, #1e9088 0%, #42bab2 100%);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 8px;
  box-shadow: inset 4px 0 0 rgba(255,255,255,.28);
  text-shadow: none;
  position: relative; overflow: hidden;
}
#authModal .auth-submit::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 45%),
    repeating-linear-gradient(
      -62deg,
      transparent 0px, transparent 14px,
      rgba(255,255,255,.04) 14px, rgba(255,255,255,.04) 15px
    );
}
#authModal .auth-submit:hover {
  filter: brightness(1.12);
  background: linear-gradient(to right, #1e9088 0%, #42bab2 100%);
  box-shadow: inset 4px 0 0 rgba(255,255,255,.28), 0 0 20px rgba(34,152,136,.25);
  text-shadow: none;
}
#authModal .auth-submit:active { transform: scale(.97); filter: brightness(.92); }

/* OTP verification panel */
.otp-header { text-align: center; margin-bottom: 18px; }
.otp-title   { font-size: 1rem; font-weight: 700; color: #e6edf3; margin-bottom: 6px; }
.otp-subtitle { font-size: .84rem; color: #8b949e; }
.otp-subtitle strong { color: #c9d1d9; }

.otp-code-input {
  display: block; width: 100%;
  padding: 14px 16px;
  background: #0d1117; border: 2px solid #30363d;
  border-radius: 50px; color: #e6edf3;
  font-size: 1.6rem; font-family: 'Consolas', monospace;
  letter-spacing: 10px; text-align: center;
  margin-bottom: 10px; outline: none;
  transition: border-color .2s;
}
.otp-code-input:focus { border-color: #2baa9e; }
.otp-code-input::placeholder { letter-spacing: 6px; font-size: 1rem; color: #484f58; }

.otp-back-btn { font-size: .78rem; opacity: .6; margin-top: 2px; }

.auth-forgot-link {
  display: block; width: 100%; background: none; border: none;
  color: #484f58; font-size: .78rem; cursor: pointer;
  text-align: center; padding: 6px 0 0;
  transition: color .15s;
}
.auth-forgot-link:hover { color: #8b949e; }

/* Profile modal — gradient */
#profileModal .modal-box {
  background:
    linear-gradient(155deg, rgba(34,152,136,.12) 0%, rgba(34,152,136,.03) 40%, transparent 65%),
    #161b22;
  border-color: rgba(43,170,158,.28);
}

/* Profile modal */
.profile-box {
  width: 640px;
  max-width: calc(100vw - 32px);
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 0;
  max-height: calc(100vh - 48px);
  overflow: hidden; /* le scroll est sur .profile-panel-content, pas la boîte */
}

/* Tous les panneaux (profil, boutique, succès, stats) scrollent */
.profile-panel-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* Header row: identity + balance */
.profile-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #0d1117; border: 1px solid #21262d;
  border-radius: 10px; padding: 10px 16px; margin-bottom: 16px; gap: 12px;
}

.profile-identity {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}

.profile-color-dot {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.2);
}

.profile-identity > span { font-size: .95rem; font-weight: 600; color: #e6edf3; }

.profile-balance { display: flex; gap: 8px; flex-shrink: 0; }

.balance-chip {
  display: flex; align-items: center; gap: 5px;
  background: #161b22; border: 1px solid #30363d;
  border-radius: 20px; padding: 4px 12px;
  font-size: .85rem; font-weight: 700; color: #e6edf3;
}

.balance-chip.balance-gems { border-color: #6e40c9; color: #b09aff; }

/* Tabs — underline scaleX (même logique que .social-tab) */
.profile-tabs {
  display: flex; gap: 0; margin-bottom: 22px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.profile-tab {
  position: relative;
  flex: 1; padding: 7px 12px 9px; background: none; border: none;
  color: #6e7681; font-size: .82rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  white-space: nowrap; transition: color .15s;
}
.profile-tab::after {
  content: ''; position: absolute;
  bottom: -1px; left: 0; right: 0; height: 2px;
  background: #2baa9e; border-radius: 1px 1px 0 0;
  transform: scaleX(0); transition: transform .18s ease;
}
.profile-tab.active { color: #e6edf3; }
.profile-tab.active::after { transform: scaleX(1); }
.profile-tab:not(.active):hover { color: #c9d1d9; }

/* ── Onglets colorés : Parrainer + Code promo ─────────────── */
.profile-tab[data-ptab="referral"] { color: rgba(16,185,129,.65); }
.profile-tab[data-ptab="referral"].active { color: #10b981; }
.profile-tab[data-ptab="referral"]::after { background: #10b981; }
.profile-tab[data-ptab="referral"]:not(.active):hover { color: #34d399; }

.profile-tab[data-ptab="promo"] { color: rgba(245,158,11,.65); }
.profile-tab[data-ptab="promo"].active { color: #f59e0b; }
.profile-tab[data-ptab="promo"]::after { background: #f59e0b; }
.profile-tab[data-ptab="promo"]:not(.active):hover { color: #fbbf24; }

.profile-section {
  margin-bottom: 4px; /* espace minimal entre sections collapsées */
}

/* ── Progression accordion ────────────────────────────────── */
.prog-toggle {
  border-style: none;
  border-left: 4px solid #2baa9e; /* same as .section-label */
  width: 100%;
  cursor: pointer;
  outline: none;
  justify-content: space-between;
  -webkit-appearance: none;
  appearance: none;
  margin-bottom: 0; /* l'espace header→contenu vient du padding-top du .prog-content */
}
.prog-toggle:hover { filter: brightness(1.12); }

.prog-chevron {
  font-size: .8rem;
  color: rgba(43,170,158,.55);
  flex-shrink: 0;
  transition: transform .22s ease;
}
.prog-toggle.collapsed .prog-chevron { transform: rotate(-90deg); }

.prog-content {
  overflow: hidden;
  max-height: 2400px;
  opacity: 1;
  transition: max-height .38s ease, opacity .22s ease;
  padding-top: 12px;    /* espace entre le header et le contenu */
  padding-bottom: 20px; /* espace entre le contenu et la section suivante */
}
.prog-content.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  padding-top: 0;
  padding-bottom: 0;
}

.profile-preview {
  display: flex; flex-direction: column; gap: 10px;
  background: #0d1117; border: 1px solid #21262d;
  border-radius: 14px; padding: 12px;
}

.profile-preview canvas {
  width: 100%; max-width: 100%; border-radius: 12px;
  background: #090b10; display: block;
}

.profile-preview .preview-caption {
  display: flex; justify-content: space-between; gap: 12px;
  align-items: center; color: #c9d1d9; font-size: .85rem;
}

.profile-preview .preview-caption strong {
  color: #e6edf3;
}

/* ── Emote picker (profile) ─────────────────────────────────── */

.section-hint {
  font-size: .72rem; color: #484f58;
  margin-left: 6px; font-weight: 400; text-transform: none; letter-spacing: 0;
}

.emote-assign-hint {
  font-size: .72rem; color: #484f58;
  margin-bottom: 10px; margin-top: 2px;
}

.emote-slots-row {
  display: flex; gap: 8px; margin-bottom: 10px;
}

.emote-slot-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 6px 4px;
  background: #0d1117; border: 2px solid #21262d; border-radius: 10px;
  cursor: pointer; transition: border-color .15s, background .15s;
  outline: none; min-width: 0;
}
.emote-slot-btn:hover { border-color: #30363d; background: #161b22; }
.emote-slot-btn.active {
  border-color: #2baa9e;
  background: rgba(43,170,158,0.08);
}

.emote-slot-label {
  font-size: .65rem; color: #8b949e; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}

.emote-slot-icon {
  font-size: 1.4rem; line-height: 1; min-height: 1.4rem;
  display: flex; align-items: center; justify-content: center;
}

.emote-owned-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}

.emote-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 20px;
  background: #0d1117; border: 1px solid #30363d;
  cursor: pointer; transition: border-color .15s, background .15s, transform .12s;
  font-size: .8rem; color: #c9d1d9; outline: none; white-space: nowrap;
  user-select: none;
}
.emote-chip:hover { background: #161b22; border-color: #8b949e; transform: scale(1.04); }
.emote-chip.selected {
  border-color: #2baa9e; background: rgba(43,170,158,0.1);
  color: #e6edf3;
}
.emote-chip .chip-emoji { font-size: 1.1rem; line-height: 1; }
.emote-chip .chip-remove {
  font-size: .7rem; color: #484f58; margin-left: 2px;
  transition: color .12s;
}
.emote-chip.selected .chip-remove { color: #8b949e; }
.emote-chip.selected .chip-remove:hover { color: #e6edf3; }

/* ── Social modal standalone ─────────────────────────────────── */

/* Gradient + watermark — cohérence avec les autres modales */
#socialModal .modal-box {
  background:
    linear-gradient(155deg, rgba(34,152,136,.15) 0%, rgba(34,152,136,.04) 40%, transparent 65%),
    #161b22;
  border-color: rgba(43,170,158,.32);
  animation: wlc-in .25s ease both;
  position: relative;
  overflow: hidden;
}
#socialModal .modal-box::after {
  content: '';
  position: absolute;
  right: -16px; bottom: -16px;
  width: 190px; height: 190px;
  background: url('/images/social.svg') no-repeat center / contain;
  filter: brightness(0) invert(1);
  opacity: .03;
  pointer-events: none;
  z-index: 0;
}

.social-box {
  width: 700px; max-width: calc(100vw - 32px);
  height: 78vh; max-height: 680px;
  display: flex; flex-direction: column; overflow: hidden;
  position: relative; z-index: 1;
}
.social-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; flex-shrink: 0;
}
.social-modal-title {
  margin-bottom: 0 !important;
  text-align: left !important;
}
.close-modal-x {
  background: none; border: none; color: #8b949e; font-size: 1.1rem;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
  transition: color .15s; flex-shrink: 0;
}
.close-modal-x:hover { color: #e6edf3; }
.social-add-btn {
  padding: 7px 14px; background: #2baa9e; border: none; border-radius: 8px;
  color: #fff; font-weight: 700; font-size: .82rem; cursor: pointer;
  white-space: nowrap; transition: background .15s;
}
.social-add-btn:hover { background: #239e92; }

/* Tabs — underline style (même logique que .modal-tabs / .modal-tab) */
.social-tabs {
  display: flex; gap: 0; margin-bottom: 16px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.social-tab {
  padding: 7px 18px 9px;
  font-size: .8rem; font-weight: 600;
  border: none; background: transparent;
  color: #6e7681; cursor: pointer; font-family: inherit;
  position: relative; transition: color .15s;
  white-space: nowrap; letter-spacing: .01em;
  display: flex; align-items: center; gap: 5px;
}
.social-tab::after {
  content: ''; position: absolute;
  bottom: -1px; left: 0; right: 0; height: 2px;
  background: #2baa9e; border-radius: 1px 1px 0 0;
  transform: scaleX(0); transition: transform .18s ease;
}
.social-tab.active { color: #e6edf3; }
.social-tab.active::after { transform: scaleX(1); }
.social-tab:not(.active):hover { color: #c9d1d9; }

.social-tab-panel {
  flex: 1; overflow-y: auto; min-height: 0; position: relative; z-index: 1;
}
/* Le panneau chat ne doit pas défiler lui-même — c'est la liste de messages qui défile */
#socialChatPanel {
  overflow: hidden; display: flex; flex-direction: column;
}

.social-chat-shell {
  flex: 1; min-height: 0;
  display: flex; gap: 10px;
}

.social-conversations-column {
  width: 220px; flex-shrink: 0;
  background: #0d1117; border: 1px solid #21262d;
  border-radius: 14px; padding: 10px;
  overflow-y: auto; min-height: 0;
}

.social-messages-column {
  flex: 1; min-width: 0;
  background: #0d1117; border: 1px solid #21262d;
  border-radius: 14px; padding: 12px;
  display: flex; flex-direction: column; min-height: 0;
}

.social-friend-list,
.social-conversations-list,
.social-request-list,
.social-messages-list {
  display: grid; gap: 6px;
}

#socialFriendRequests {
  margin-bottom: 14px;
}

.social-request-header {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #484f58;
  padding: 6px 2px 2px;
}

.social-request-item,
.social-conversation-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 14px; background: #0f151d;
  border: 1px solid #21262d; border-radius: 14px;
}

.social-sent-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 5px 10px 5px 12px;
  background: #0d1117; border: 1px solid #21262d; border-radius: 8px;
}
.social-sent-name {
  font-size: .82rem; color: #8b949e; font-style: italic; flex: 1;
}
.social-sent-cancel {
  background: none; border: none; color: #484f58;
  cursor: pointer; font-size: .8rem;
  padding: 3px 7px; border-radius: 4px;
  transition: color .15s;
  line-height: 1;
}
.social-sent-cancel:hover { color: #f07878; }

.social-request-item span,
.social-conversation-item span {
  display: inline-flex; gap: 8px; align-items: center;
}

/* Friend item — nouvelle mise en page */
.social-friend-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; background: #0f151d;
  border: 1px solid #21262d; border-radius: 10px;
  transition: border-color .15s;
}
.social-friend-item:hover { border-color: #30363d; }

.social-friend-car-dot {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.12);
}

.social-presence-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.social-presence-dot.online  { background: #5cd68c; box-shadow: 0 0 4px #5cd68c80; }
.social-presence-dot.racing  { background: #f0b84f; box-shadow: 0 0 4px #f0b84f80; }
.social-presence-dot.offline { background: #30363d; }

.social-friend-info {
  flex: 1; min-width: 0;
}
.social-friend-info .pub-profile-name-btn {
  display: block; text-align: left; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.social-friend-info strong { font-size: .86rem; }
.sfi-rank { font-size: .72rem; font-weight: 600; color: #2baa9e; opacity: .8; margin-left: 5px; }

.social-friend-status {
  font-size: .72rem; margin-top: 1px; display: block;
}

.social-friend-actions {
  display: flex; gap: 6px; flex-shrink: 0;
}

.social-chat-btn {
  padding: 4px 9px; background: #141c27;
  border: 1px solid #2baa9e50; border-radius: 7px;
  color: #2baa9e; font-size: .78rem; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.social-chat-btn:hover { background: #112127; border-color: #2baa9e; }

/* Compteur amis en ligne */
.social-friends-counter {
  font-size: .78rem; color: #8b949e; padding: 0 2px 6px;
  display: flex; align-items: center; gap: 6px;
}
.social-friends-counter .sfc-online { color: #5cd68c; font-weight: 700; }
.social-friends-counter .sfc-sep { color: #30363d; }

.social-status {
  font-size: .82rem; color: #8b949e;
}

.social-status.online   { color: #5cd68c; }
.social-status.offline  { color: #7a7d88; }
.social-status.racing   { color: #f0b84f; }
.social-status.pending  { color: #8b949e; font-style: italic; }

.social-request-row,
.social-message-row {
  display: flex; gap: 10px; margin-bottom: 14px;
}

.social-request-row input,
.social-message-row input {
  flex: 1; padding: 12px 14px; background: #0d1117;
  border: 1px solid #30363d; border-radius: 50px; color: #e6edf3;
  outline: none;
}

.social-message-row {
  flex-shrink: 0; margin-bottom: 0; margin-top: 8px;
}

.social-message-row button {
  min-width: 44px; padding: 8px 12px;
}
.social-message-row .auth-submit {
  background: #2baa9e !important; border-color: #2baa9e !important; color: #fff !important;
}
.social-message-row .auth-submit:hover {
  background: #239e92 !important; box-shadow: none !important;
}

.social-conversation-item {
  cursor: pointer; padding: 8px 10px; font-size: .83rem;
}

.social-conversation-item small {
  display: block; font-size: .72rem; color: #8b949e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px;
}

.social-conversation-item.active {
  border-color: #2baa9e; background: #112127;
}
.conv-hint { color: #484f58 !important; font-style: italic; }
.conv-no-msg { opacity: .75; }

.social-chat-header {
  flex-shrink: 0; margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
  color: #e6edf3; font-weight: 700; font-size: .9rem;
  overflow: hidden;
}

.social-chat-back-btn {
  display: none;
  flex-shrink: 0; align-items: center; gap: 6px;
  background: none; border: 1px solid #30363d;
  border-radius: 10px; color: #8b949e;
  padding: 6px 12px; font-size: .82rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.social-chat-back-btn:active { background: #21262d; }

.social-messages-list {
  flex: 1; overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
}

.social-message {
  max-width: 80%; padding: 10px 14px; border-radius: 16px;
  line-height: 1.4; font-size: .92rem;
}

.social-message.sent {
  background: #1d3a2e; color: #c8f4d9; align-self: flex-end;
}

.social-message.received {
  background: #131d28; color: #d5e0f0; align-self: flex-start;
}

.social-message small {
  display: block; margin-top: 4px; font-size: .75rem; color: #8b949e;
}

.section-label {
  font-size: .74rem; font-weight: 900; color: #e6edf3;
  text-transform: uppercase; letter-spacing: .09em;
  margin-bottom: 16px; margin-top: 8px;
  padding: 10px 16px;
  background: linear-gradient(to right, rgba(43,170,158,.14) 0%, rgba(43,170,158,.04) 60%, transparent 100%);
  border-left: 4px solid #2baa9e;
  border-radius: 0 8px 8px 0;
  margin-left: -2px;
  display: flex; align-items: center; gap: 9px;
}
.section-label::after { display: none; }
/* quand section-label EST le toggle, l'espace vient du padding-top du .prog-content */
.section-label.prog-toggle { margin-bottom: 0; }

.color-picker-label {
  font-size: .72rem; color: #8b949e;
  text-transform: uppercase; letter-spacing: .7px; margin-bottom: 12px;
}

.shop-earn-hint {
  font-size: .78rem; color: #8b949e; line-height: 1.5;
  background: rgba(43,170,158,0.07); border: 1px solid rgba(43,170,158,0.2);
  border-radius: 8px; padding: 9px 12px; margin-bottom: 14px;
}
.shop-earn-hint strong { color: #e6edf3; }

/* ── Mode boutique : masque les onglets du profil ────────── */
.profile-box.shop-mode .profile-tabs { display: none; }

/* ── Bouton récompense du jour dans la boutique (CTA) ─────── */
.shop-daily-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 14px;
  color: #8b949e;
  cursor: pointer;
  text-align: left;
  margin-bottom: 14px;
  transition: border-color .2s ease, color .2s ease, box-shadow .25s ease, background .2s ease;
  box-sizing: border-box;
  min-height: 70px;
}
.shop-daily-btn:hover {
  border-color: #484f58;
  color: #e6edf3;
  background: #161b22;
}
.shop-daily-icon-img {
  width: 44px; height: 44px;
  flex-shrink: 0;
  object-fit: contain;
  opacity: .7;
  transition: opacity .2s ease, filter .25s ease;
}
.shop-daily-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.shop-daily-label {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}
.shop-daily-sub {
  font-size: .74rem;
  opacity: .5;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-daily-chevron {
  font-size: .9rem;
  opacity: .35;
  flex-shrink: 0;
  transition: opacity .2s ease, color .2s ease;
}

/* Badge "Disponible !" */
.shop-daily-avail-badge {
  background: #ffd700;
  color: #0d1117;
  font-size: .7rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 10px;
  letter-spacing: .03em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* État actif : récompense disponible */
.shop-daily-btn--available {
  border-color: rgba(255,215,0,.45);
  background: linear-gradient(135deg, rgba(255,215,0,.05) 0%, #0d1117 100%);
  color: #e6edf3;
  animation: shop-daily-pulse 2.5s ease-in-out infinite;
}
.shop-daily-btn--available .shop-daily-icon-img {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(255,215,0,.5));
}
.shop-daily-btn--available .shop-daily-chevron {
  opacity: .75;
  color: #ffd700;
}
@keyframes shop-daily-pulse {
  0%, 100% { box-shadow: 0 0 0 0px rgba(255,215,0,0); }
  50%       { box-shadow: 0 0 0 4px rgba(255,215,0,.13), inset 0 0 22px rgba(255,215,0,.04); }
}

/* Shop sub-tabs — colored pills */
.shop-tabs {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 18px;
}

.shop-tab {
  flex: 1 1 auto; padding: 7px 12px;
  border-radius: 20px; border: 1.5px solid transparent;
  font-size: .76rem; font-weight: 800; font-family: inherit;
  cursor: pointer; transition: all .18s;
  text-align: center; white-space: nowrap; letter-spacing: .01em;
}

/* Standard — teal */
.shop-tab[data-stab="coins"] {
  color: rgba(43,170,158,.7); background: rgba(43,170,158,.07); border-color: rgba(43,170,158,.18);
}
.shop-tab[data-stab="coins"]:hover {
  color: #fff; background: rgba(43,170,158,.85); border-color: #2baa9e;
}
.shop-tab[data-stab="coins"].active {
  color: #fff; background: #2baa9e; border-color: #2baa9e;
  box-shadow: 0 2px 12px rgba(43,170,158,.35);
}

/* Premium — or ambré */
.shop-tab[data-stab="gems"] {
  color: rgba(245,158,11,.8); background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.2);
}
.shop-tab[data-stab="gems"]:hover {
  color: #0d1117; background: rgba(245,158,11,.85); border-color: #f59e0b;
  box-shadow: 0 2px 10px rgba(245,158,11,.25);
}
.shop-tab[data-stab="gems"].active {
  color: #0d1117; background: #f59e0b; border-color: #f59e0b;
  box-shadow: 0 2px 14px rgba(245,158,11,.4);
}

/* Gemmes (recharge) — violet */
.shop-tab[data-stab="recharge"] {
  color: rgba(139,92,246,.75); background: rgba(139,92,246,.07); border-color: rgba(139,92,246,.2);
}
.shop-tab[data-stab="recharge"]:hover {
  color: #fff; background: rgba(139,92,246,.85); border-color: #8b5cf6;
  box-shadow: 0 2px 10px rgba(139,92,246,.25);
}
.shop-tab[data-stab="recharge"].active {
  color: #fff; background: #8b5cf6; border-color: #8b5cf6;
  box-shadow: 0 2px 14px rgba(139,92,246,.4);
}

/* Shop panel */
.shop-section { margin-bottom: 22px; }

.shop-section-title {
  font-size: .68rem; font-weight: 800; color: #e6edf3;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 12px;
  padding: 7px 14px;
  background: linear-gradient(to right, rgba(43,170,158,.11) 0%, rgba(43,170,158,.03) 55%, transparent 100%);
  border-left: 3px solid rgba(43,170,158,.65);
  border-radius: 0 6px 6px 0;
  margin-left: -2px;
}

.shop-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.shop-grid-cars {
  grid-template-columns: repeat(2, 1fr);
}

.shop-card {
  background: #0d1117; border: 1px solid #30363d;
  border-radius: 12px; padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: border-color .15s;
}
.shop-card:hover { border-color: #484f58; }
.shop-card.shop-owned { border-color: rgba(43,170,158,0.5); }

.shop-preview {
  width: 48px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.shop-card-car { align-items: center; }
.shop-preview-car {
  width: 110px; height: 52px; border-radius: 8px;
  overflow: hidden; flex-shrink: 0; margin: 0 auto 6px;
}
.shop-preview-car canvas { display: block; }

.shop-item-name {
  font-size: .78rem; font-weight: 600; color: #c9d1d9;
  text-align: center; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.shop-item-type {
  font-size: .65rem; font-weight: 600; letter-spacing: .4px;
  color: #e8a87c; border: 1px solid rgba(232,168,124,.4);
  border-radius: 4px; padding: 1px 6px;
}

.shop-buy-btn {
  width: 100%; padding: 6px 8px;
  background: linear-gradient(to right, #1a8f85, #3cb5ac);
  color: #fff; font-size: .72rem; font-weight: 800;
  border: none; border-radius: 6px; cursor: pointer;
  text-transform: uppercase; letter-spacing: .04em;
  position: relative; overflow: hidden;
  transition: filter .15s, transform .1s;
}
.shop-buy-btn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.12) 0%, transparent 50%),
    repeating-linear-gradient(-62deg, transparent 0px, transparent 12px, rgba(255,255,255,.04) 12px, rgba(255,255,255,.04) 13px);
}
.shop-buy-btn:hover:not(:disabled) { filter: brightness(1.1); transform: scale(1.02); }
.shop-buy-btn:active:not(:disabled) { filter: brightness(.9); }
.shop-buy-btn:disabled {
  background: rgba(43,170,158,.18); color: rgba(43,170,158,.45);
  cursor: default; filter: none; transform: none;
}


/* Admin button */
.admin-btn { color: #f59e0b !important; border-color: rgba(245,158,11,0.4) !important; }
.admin-btn:hover { background: rgba(245,158,11,0.1) !important; border-color: #f59e0b !important; }

/* Admin modal */
.admin-box {
  width: 680px; max-width: 96vw;
  max-height: 88vh; display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
.admin-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 0; flex-shrink: 0;
}
.admin-title { font-size: 1.1rem; font-weight: 700; color: #f59e0b; margin: 0; }
.admin-close-btn {
  background: none; border: none; color: #8b949e; font-size: 1rem;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.admin-close-btn:hover { background: #21262d; color: #e6edf3; }
.admin-tabs {
  display: flex; gap: 4px; padding: 12px 20px 0; flex-shrink: 0;
  border-bottom: 1px solid #21262d; margin-bottom: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #30363d transparent;
  padding-bottom: 4px;
}
.admin-tabs::-webkit-scrollbar { height: 4px; }
.admin-tabs::-webkit-scrollbar-track { background: transparent; }
.admin-tabs::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; }
.admin-tab {
  padding: 8px 14px; background: none; border: none;
  color: #8b949e; font-size: .84rem; font-weight: 600;
  cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .15s, border-color .15s;
  white-space: nowrap; flex-shrink: 0;
}
.admin-tab:hover { color: #e6edf3; }
.admin-tab.active { color: #f59e0b; border-bottom-color: #f59e0b; }
.admin-panel-content {
  flex: 1; overflow-y: auto; padding: 16px 20px 20px;
}

/* Stats */
.admin-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px;
}
.admin-stat-card {
  background: #0d1117; border: 1px solid #21262d; border-radius: 10px;
  padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.asc-val { font-size: 1.3rem; font-weight: 800; color: #f59e0b; }
.asc-label { font-size: .7rem; color: #8b949e; text-align: center; }
.asc-sub { font-size: .65rem; color: #484f58; text-align: center; margin-top: -2px; }
.admin-stat-separator {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 700; color: #8b949e; text-transform: uppercase; letter-spacing: .7px;
  margin-top: 4px;
}
.admin-stat-separator::before, .admin-stat-separator::after { content: ''; flex: 1; height: 1px; background: #21262d; }
.admin-stat-card-eng { border-color: #1c2128; }
.admin-top-section { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-section-label { font-size: .72rem; color: #8b949e; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; font-weight: 700; }
.admin-top-list { display: flex; flex-direction: column; gap: 5px; }
.admin-top-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #0d1117; border: 1px solid #21262d; border-radius: 8px; font-size: .83rem; }
.atr-rank { color: #8b949e; width: 22px; flex-shrink: 0; }
.atr-name { flex: 1; color: #c9d1d9; font-weight: 600; }
.atr-val  { color: #f59e0b; font-weight: 700; }

/* Rooms */
.admin-refresh-btn {
  padding: 6px 14px; background: #21262d; border: 1px solid #30363d;
  border-radius: 8px; color: #c9d1d9; font-size: .82rem; font-weight: 600;
  cursor: pointer; margin-bottom: 12px; transition: background .15s;
}
.admin-refresh-btn:hover { background: #2d333b; }
.admin-rooms-list { display: flex; flex-direction: column; gap: 8px; }
.admin-room-card { background: #0d1117; border: 1px solid #21262d; border-radius: 10px; padding: 12px 14px; }
.arc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.arc-id { font-size: .9rem; font-weight: 700; color: #e6edf3; font-family: monospace; }
.arc-state { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; }
.arc-state.lobby    { background: rgba(43,170,158,0.15); color: #2baa9e; }
.arc-state.countdown{ background: rgba(241,196,15,0.15); color: #f1c40f; }
.arc-state.racing   { background: rgba(231,76,60,0.15);  color: #e74c3c; }
.arc-state.finished { background: rgba(139,148,158,0.15); color: #8b949e; }
.arc-event { font-size: .68rem; background: rgba(168,85,247,0.2); color: #a855f7; padding: 2px 7px; border-radius: 20px; font-weight: 700; }
.arc-meta { font-size: .78rem; color: #8b949e; margin-bottom: 8px; }
.arc-players { display: flex; flex-wrap: wrap; gap: 5px; }
.arc-player { font-size: .72rem; color: #fff; padding: 2px 8px; border-radius: 20px; font-weight: 600; }

/* Admin Écuries */
#adminEcuriesList { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.admin-ecurie-card { display: flex; align-items: center; gap: 12px; background: #0d1117; border: 1px solid #21262d; border-radius: 10px; padding: 10px 12px; }
.admin-ecurie-logo { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid #30363d; }
.admin-ecurie-logo-placeholder { display: flex; align-items: center; justify-content: center; background: #161b22; color: #2baa9e; font-weight: 800; font-size: .85rem; letter-spacing: .04em; }
.admin-ecurie-info { flex: 1; min-width: 0; }
.admin-ecurie-name { font-size: .93rem; font-weight: 700; color: #e6edf3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-ecurie-meta { font-size: .76rem; color: #8b949e; margin-top: 2px; }
.admin-ecurie-email { color: #6e7681; margin-left: 4px; }
.admin-ecurie-actions { display: flex; gap: 6px; flex-shrink: 0; }
.admin-ecurie-contact-btn, .admin-ecurie-disband-btn { background: none; border: 1px solid #30363d; border-radius: 7px; padding: 5px 8px; cursor: pointer; font-size: 1rem; line-height: 1; transition: background .15s; }
.admin-ecurie-contact-btn:hover { background: rgba(43,170,158,.15); border-color: #2baa9e; }
.admin-ecurie-disband-btn:hover { background: rgba(239,68,68,.15); border-color: #ef4444; }
.admin-ecurie-level-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.admin-ecurie-level-lbl { font-size: .72rem; color: #8b949e; }
.admin-ecurie-level-input { width: 46px; background: #0d1117; border: 1px solid #30363d; border-radius: 5px; color: #e6edf3; font-size: .78rem; padding: 2px 5px; text-align: center; }
.admin-ecurie-level-btn { background: #1d3a2e; color: #5cd68c; border: 1px solid #2baa9e33; border-radius: 5px; padding: 2px 8px; font-size: .72rem; font-weight: 700; cursor: pointer; }
.admin-ecurie-level-btn:hover { background: #1e4433; }
.admin-ecurie-xp-lbl { font-size: .68rem; color: #484f58; }

/* Users */
.admin-search-row { display: flex; gap: 8px; margin-bottom: 12px; }
.admin-search-input {
  flex: 1; padding: 8px 12px; background: #0d1117; border: 1px solid #30363d;
  border-radius: 8px; color: #e6edf3; font-size: .88rem; outline: none;
}
.admin-search-input:focus { border-color: #f59e0b; }
.admin-users-sort-row {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 4px; flex-wrap: wrap;
}
.admin-sort-label { font-size: .75rem; color: #8b949e; margin-right: 2px; white-space: nowrap; }
.admin-sort-btn {
  font-size: .75rem; font-weight: 600; padding: 4px 10px;
  border-radius: 20px; border: 1.5px solid #30363d;
  background: transparent; color: #8b949e; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.admin-sort-btn:hover { border-color: #f59e0b; color: #f59e0b; }
.admin-sort-btn.active { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,.1); }
.admin-users-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px; padding: 8px 10px;
  background: #0d1117; border: 1px solid #21262d; border-radius: 10px;
}
.admin-users-page-btn {
  padding: 6px 12px; border: 1px solid #30363d; border-radius: 8px;
  background: #161b22; color: #e6edf3; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.admin-users-page-btn:disabled { opacity: 0.45; cursor: default; }
.admin-users-page-info { flex: 1; text-align: center; font-size: .8rem; color: #8b949e; }
.admin-users-list { display: flex; flex-direction: column; gap: 6px; }
.admin-user-row {
  display: flex; flex-direction: column; gap: 0;
  background: #0d1117; border: 1px solid #21262d; border-radius: 10px; padding: 10px 14px;
}
.aur-main-row { display: flex; align-items: center; justify-content: space-between; }
.admin-user-row.banned { border-color: rgba(231,76,60,0.4); background: rgba(231,76,60,0.05); }
.aur-info { display: flex; flex-direction: column; gap: 3px; }
.aur-name { font-size: .9rem; font-weight: 700; color: #e6edf3; }
.aur-stats { font-size: .74rem; color: #8b949e; }
.aur-ban-btn {
  padding: 5px 12px; border: 1px solid #e74c3c; border-radius: 8px;
  background: transparent; color: #e74c3c; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: background .15s; white-space: nowrap;
}
.aur-ban-btn:hover { background: rgba(231,76,60,0.15); }
.aur-ban-btn.unban { border-color: #2baa9e; color: #2baa9e; }
.aur-ban-btn.unban:hover { background: rgba(43,170,158,0.15); }
.aur-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.aur-delete-btn {
  padding: 5px 10px; border: 1px solid #484f58; border-radius: 8px;
  background: transparent; color: #484f58; font-size: .82rem;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.aur-delete-btn:hover { border-color: #e74c3c; color: #e74c3c; background: rgba(231,76,60,0.1); }
.aur-reward-btn {
  padding: 5px 10px; border: 1px solid #484f58; border-radius: 8px;
  background: transparent; color: #c9d1d9; font-size: .82rem;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.aur-reward-btn:hover { border-color: #f59e0b; background: rgba(245,158,11,0.1); }
.aur-reward-form {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 10px; background: #161b22; border-radius: 8px; border: 1px solid #30363d;
  width: 100%; box-sizing: border-box;
}
.aur-reward-prem { font-size: .78rem; color: #c9d1d9; display: flex; align-items: center; gap: 4px; }
.aur-reward-send {
  padding: 5px 14px; border: 1px solid #2baa9e; border-radius: 8px;
  background: transparent; color: #2baa9e; font-size: .78rem; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.aur-reward-send:hover { background: rgba(43,170,158,0.15); }
.aur-reward-cancel {
  padding: 4px 8px; border: none; background: transparent; color: #8b949e; font-size: .85rem; cursor: pointer;
}
.aur-reward-cancel:hover { color: #e74c3c; }

/* Admin distribute-to-all */
.admin-distrib-all { background: #161b22; border: 1px solid #30363d; border-radius: 10px; padding: 12px 16px; }
.admin-distrib-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-distrib-input {
  flex: 1; min-width: 80px; max-width: 130px;
  padding: 7px 10px; background: #0d1117; border: 1px solid #30363d; border-radius: 8px;
  color: #c9d1d9; font-size: .85rem;
}
.admin-distrib-btn {
  padding: 7px 16px; border: 1px solid #2baa9e; border-radius: 8px;
  background: transparent; color: #2baa9e; font-size: .85rem; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s;
}
.admin-distrib-btn:hover { background: #2baa9e; color: #0d1117; }

/* Admin broadcast / notifs */
.admin-broadcast-form { background: #161b22; border: 1px solid #30363d; border-radius: 10px; padding: 14px 16px; }
.admin-broadcast-textarea {
  width: 100%; min-height: 80px; padding: 8px 10px;
  background: #0d1117; border: 1px solid #30363d; border-radius: 8px;
  color: #c9d1d9; font-size: .85rem; resize: vertical; box-sizing: border-box;
}
.admin-submit-btn {
  margin-top: 10px; padding: 8px 20px; border: 1px solid #f59e0b; border-radius: 8px;
  background: transparent; color: #f59e0b; font-size: .88rem; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s;
}
.admin-submit-btn:hover { background: #f59e0b; color: #0d1117; }
.admin-broadcast-result { margin-top: 8px; font-size: .82rem; min-height: 1.2em; }
.admin-broadcast-history { display: flex; flex-direction: column; gap: 8px; }
.admin-broadcast-item {
  background: #0d1117; border: 1px solid #21262d; border-radius: 8px; padding: 10px 14px;
}
.abi-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.abi-title  { font-size: .88rem; font-weight: 700; color: #e6edf3; flex: 1; }
.abi-meta   { font-size: .74rem; color: #8b949e; white-space: nowrap; }
.abi-body   { font-size: .82rem; color: #8b949e; }
.abi-delete-btn {
  padding: 2px 6px; border: none; background: transparent;
  color: #484f58; font-size: .82rem; cursor: pointer; flex-shrink: 0;
  transition: color .15s;
}
.abi-delete-btn:hover { color: #e74c3c; }

/* Broadcast in-game modal */
.broadcast-modal-box {
  max-width: 480px; width: min(92vw, 480px);
  padding: 28px 28px 24px;
}
.broadcast-modal-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.broadcast-modal-icon { font-size: 1.5rem; }
.broadcast-modal-title { font-size: 1.05rem; font-weight: 800; color: #e6edf3; letter-spacing: .01em; }
.broadcast-modal-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; max-height: 55vh; overflow-y: auto; }
.broadcast-modal-item {
  background: #0d1117; border: 1px solid #21262d; border-radius: 10px; padding: 12px 14px;
}
.bmi-date  { font-size: .72rem; color: #8b949e; margin-bottom: 4px; }
.bmi-title { font-size: .95rem; font-weight: 700; color: #e6edf3; margin-bottom: 6px; }
.bmi-body  { font-size: .85rem; color: #c9d1d9; line-height: 1.5; white-space: pre-wrap; }
.broadcast-item-link {
  display: inline-block; margin-top: 6px; font-size: .78rem; color: #2baa9e;
  text-decoration: underline;
}
.broadcast-modal-close {
  width: 100%; padding: 12px; background: #2baa9e; color: #fff;
  font-size: .96rem; font-weight: 700; border: none; border-radius: 50px;
  cursor: pointer; transition: background .15s, transform .1s;
}
.broadcast-modal-close:hover  { background: #229990; }
.broadcast-modal-close:active { transform: scale(.97); }

/* ── Écuries ─────────────────────────────────────────────────── */
#socialEcuriePanel { overflow-y: hidden; display: flex; flex-direction: column; }
#ecurieNoTeam { overflow-y: auto; flex: 1; }
#ecurieTeamView { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

.ecurie-section-title {
  font-size: .68rem; font-weight: 700; color: #3d4550;
  text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px;
}
.ecurie-create-section, .ecurie-search-section {
  padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.ecurie-payment-select { display: flex; gap: 8px; margin-bottom: 12px; }
.ecurie-payment-opt { flex: 1; display: flex; align-items: center; gap: 0; cursor: pointer; }
.ecurie-payment-opt input[type="radio"] { display: none; }
.ecurie-payment-opt .ecurie-payment-label {
  flex: 1; text-align: center; padding: 7px 6px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
  font-size: .78rem; font-weight: 600; color: #6e7681;
  background: rgba(13,17,23,.6);
  transition: border-color .15s, color .15s, background .15s; cursor: pointer;
}
.ecurie-payment-opt input[type="radio"]:checked + .ecurie-payment-label {
  border-color: rgba(43,170,158,.6); color: #e6edf3; background: rgba(43,170,158,.08);
}
.ecurie-payment-sub { display: block; font-size: .65rem; font-weight: 400; color: #3d4550; margin-top: 2px; }

.ecurie-input {
  width: 100%; background: rgba(13,17,23,.7);
  border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
  color: #e6edf3; padding: 8px 12px; font-size: .88rem;
  box-sizing: border-box; margin-bottom: 8px;
  transition: border-color .15s;
}
.ecurie-input:focus { outline: none; border-color: rgba(43,170,158,.6); }
.ecurie-input::placeholder { color: #3d4550; }

.ecurie-tag-row { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.ecurie-tag-prefix, .ecurie-tag-suffix { color: #4a5568; font-weight: 700; font-size: 1rem; }
.ecurie-tag-input {
  width: 70px; text-align: center; text-transform: uppercase;
  letter-spacing: .12em; font-weight: 700;
  background: rgba(13,17,23,.7); border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; color: #e6edf3; padding: 8px 10px; font-size: .95rem;
  transition: border-color .15s;
}
.ecurie-tag-input:focus { outline: none; border-color: rgba(43,170,158,.6); }

/* Bouton "Créer l'écurie" — tile style */
.ecurie-create-btn {
  width: 100%; padding: 10px; background: rgba(34,97,90,.7);
  color: #e6edf3; border: 1px solid rgba(43,170,158,.25);
  border-radius: 8px; font-weight: 700; font-size: .9rem;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.ecurie-create-btn:hover { background: rgba(43,170,158,.2); border-color: rgba(43,170,158,.5); }

#ecurieCreateBtn {
  padding: 0;
  background: linear-gradient(to right, #1a8f85 0%, #3cb5ac 100%);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 11px; cursor: pointer; overflow: hidden;
  position: relative;
  display: flex; align-items: center; gap: 0;
  color: #fff; font-family: inherit; text-align: left;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.25);
  transition: filter .15s, transform .1s;
  margin-top: 4px;
}
#ecurieCreateBtn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.13) 0%, transparent 50%),
    repeating-linear-gradient(
      -62deg,
      transparent 0px, transparent 14px,
      rgba(255,255,255,.045) 14px, rgba(255,255,255,.045) 15px
    );
}
#ecurieCreateBtn:hover  { filter: brightness(1.08); }
#ecurieCreateBtn:active { transform: scale(.98); filter: brightness(.95); }
#ecurieCreateBtn:disabled,
#ecurieCreateBtn.ecb-disabled {
  background: rgba(26,143,133,.25); border-color: rgba(255,255,255,.07);
  color: rgba(255,255,255,.3); box-shadow: none; filter: none; cursor: not-allowed;
  pointer-events: none;
}

/* ── Conditions de création d'écurie ──────────────────────────── */
.ecurie-create-conditions {
  display: flex; flex-direction: column; gap: 8px;
  margin: 12px 0 4px;
}
.ecurie-req-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 9px;
  font-size: .78rem; font-weight: 700;
  border: 1px solid transparent;
}
/* Condition remplie */
.ecurie-req-met {
  background: rgba(43,170,158,.08);
  border-color: rgba(43,170,158,.2);
  color: #2baa9e;
}
.ecurie-req-check {
  font-size: .9rem; font-weight: 900; flex-shrink: 0;
}
.ecurie-req-label { flex: 1; }

/* Condition non remplie */
.ecurie-req-unmet {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.1);
  color: #8b949e;
}
.ecurie-req-cross {
  font-size: .9rem; font-weight: 900; color: #6e7681; flex-shrink: 0;
}
.ecurie-req-missing {
  font-size: .7rem; font-weight: 600; color: #484f58;
  margin-left: 2px;
}
.ecurie-req-redirect-btn {
  margin-left: auto; flex-shrink: 0;
  padding: 4px 11px;
  background: rgba(43,170,158,.1);
  border: 1px solid rgba(43,170,158,.28);
  color: #2baa9e; font-size: .7rem; font-weight: 800;
  border-radius: 5px; cursor: pointer; font-family: inherit;
  white-space: nowrap; transition: background .15s, color .15s;
}
.ecurie-req-redirect-btn:hover {
  background: rgba(43,170,158,.22); color: #3dd4c5;
  border-color: rgba(43,170,158,.5);
}
/* Couleur spécifique Premium → or */
.ecurie-req-unmet:has(.ecurie-req-redirect-btn[data-type="sub"]) .ecurie-req-redirect-btn,
.ecurie-req-sub-btn {
  background: rgba(255,215,0,.08); border-color: rgba(255,215,0,.25);
  color: #ffd700;
}
.ecurie-req-sub-btn:hover { background: rgba(255,215,0,.18); border-color: rgba(255,215,0,.5); }
.ecb-icon {
  width: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 11px 0; z-index: 1;
}
.ecb-svg {
  width: 26px; height: 26px; object-fit: contain;
  filter: brightness(0) invert(1);
}
.ecb-label {
  flex: 1; z-index: 1;
  font-size: .88rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .06em;
}
.ecb-chevron {
  color: rgba(255,255,255,.4); margin-right: 14px;
  font-size: .9rem; z-index: 1;
}

.ecurie-error { color: #e74c3c; font-size: .82rem; padding: 4px 0; }

.ecurie-logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ecurie-logo-preview {
  width: 60px; height: 60px; border-radius: 8px;
  background: rgba(22,27,34,.8); border: 1px dashed rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; overflow: hidden; flex-shrink: 0;
}
.ecurie-logo-img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.ecurie-logo-pick-btn {
  padding: 6px 12px; background: rgba(22,27,34,.8);
  border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
  color: #6e7681; font-size: .82rem; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.ecurie-logo-pick-btn:hover { border-color: rgba(43,170,158,.6); color: #2baa9e; }

.ecurie-search-results { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ecurie-search-item {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  background: rgba(13,17,23,.5); border: 1px solid rgba(255,255,255,.05); border-radius: 8px;
}
.ecurie-search-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ecurie-search-name { font-size: .88rem; font-weight: 600; color: #e6edf3; }
.ecurie-search-count { font-size: .75rem; color: #4a5568; }
.ecurie-empty { color: #3d4550; font-size: .85rem; text-align: center; padding: 16px 0; margin: 0; }

.ecurie-header-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid rgba(43,170,158,.1);
}
.ecurie-header-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ecurie-team-name { font-size: 1rem; font-weight: 700; color: #e6edf3; }
.ecurie-team-tag { font-size: .85rem; font-weight: 700; }
.ecurie-header-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.ecurie-small-btn {
  padding: 4px 10px; background: rgba(22,27,34,.8);
  border: 1px solid rgba(255,255,255,.08); border-radius: 6px;
  color: #6e7681; font-size: .78rem; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.ecurie-small-btn:hover { border-color: rgba(43,170,158,.6); color: #2baa9e; }

.ecurie-leave-btn {
  padding: 4px 10px; background: transparent;
  border: 1px solid rgba(231,76,60,.25); color: rgba(231,76,60,.7);
  border-radius: 6px; font-size: .78rem; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ecurie-leave-btn:hover { background: rgba(231,76,60,.08); border-color: rgba(231,76,60,.5); color: #e74c3c; }

.ecurie-disband-btn {
  padding: 4px 10px; background: transparent;
  border: 1px solid rgba(231,76,60,.4); color: rgba(231,76,60,.8);
  border-radius: 6px; font-size: .78rem; cursor: pointer; font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
}
.ecurie-disband-btn:hover { background: rgba(231,76,60,.12); border-color: #e74c3c; color: #e74c3c; }

/* Onglets internes écurie — underline style */
.ecurie-tabs {
  display: flex; gap: 0; padding: 0 4px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.ecurie-tab {
  padding: 7px 12px 9px;
  font-size: .76rem; font-weight: 600;
  border: none; background: transparent;
  color: #6e7681; cursor: pointer; font-family: inherit;
  position: relative; transition: color .15s;
  white-space: nowrap; letter-spacing: .01em;
}
.ecurie-tab::after {
  content: ''; position: absolute;
  bottom: -1px; left: 0; right: 0; height: 2px;
  background: #2baa9e; border-radius: 1px 1px 0 0;
  transform: scaleX(0); transition: transform .18s ease;
}
.ecurie-tab.active { color: #e6edf3; }
.ecurie-tab.active::after { transform: scaleX(1); }
.ecurie-tab:not(.active):hover { color: #c9d1d9; }

/* Onglet Postulants avec candidature(s) en attente */
.ecurie-tab.has-applications { color: #f0b429; }
.ecurie-tab.has-applications::after {
  background: #f0b429;
  transform: scaleX(1);
}
.ecurie-tab.has-applications.active { color: #f5c842; }
.ecurie-apps-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #f0b429; color: #0d1117;
  font-size: .6rem; font-weight: 900; min-width: 17px; height: 17px;
  border-radius: 9px; padding: 0 4px; margin-left: 5px;
  vertical-align: middle; line-height: 1;
  animation: apps-badge-pulse 2.2s ease infinite;
  position: relative; top: -1px;
}
@keyframes apps-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,180,41,.5); transform: scale(1); }
  45%       { box-shadow: 0 0 0 5px rgba(240,180,41,0); transform: scale(1.12); }
}

.ecurie-tab-panel { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
#ecurieStatsPanel { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

.ecurie-members-list {
  flex: 1; overflow-y: auto; padding: 8px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.ecurie-member-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: rgba(13,17,23,.4); border: 1px solid rgba(255,255,255,.04);
  border-radius: 8px; transition: background .12s;
}
.ecurie-member-row:hover { background: rgba(255,255,255,.025); }
.ecurie-member-name { flex: 1; font-size: .86rem; color: #c9d1d9; }
.ecurie-founder-badge { font-size: .9rem; }
.ecurie-member-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ecurie-kick-btn { background: none; border: none; color: #3d4550; cursor: pointer; font-size: .9rem; padding: 0 4px; transition: color .12s; }
.ecurie-kick-btn:hover { color: #e74c3c; }
.ecurie-promote-btn {
  background: rgba(232,212,138,.06); border: 1px solid rgba(232,212,138,.25);
  border-radius: 5px; color: rgba(201,168,76,.8); cursor: pointer;
  font-size: .66rem; font-weight: 700; padding: 2px 7px;
  transition: background .15s, border-color .15s; white-space: nowrap;
}
.ecurie-promote-btn:hover { background: rgba(232,212,138,.16); border-color: #e8d48a; color: #e8d48a; }
.ecurie-promote-btn:disabled { opacity: .5; cursor: default; }
.ecurie-add-friend-btn, .ecurie-msg-btn {
  background: none; border: 1px solid rgba(255,255,255,.07); border-radius: 6px;
  color: #4a5568; cursor: pointer; font-size: .72rem; padding: 2px 7px;
  transition: color .15s, border-color .15s;
}
.ecurie-add-friend-btn:hover:not(:disabled), .ecurie-msg-btn:hover { color: #2baa9e; border-color: rgba(43,170,158,.5); }
.ecurie-add-friend-btn.sent { color: #2baa9e; border-color: rgba(43,170,158,.4); cursor: default; }
.ecurie-add-friend-btn:disabled { opacity: .4; }

.ecurie-invite-row {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 16px; border-top: 1px solid rgba(255,255,255,.05);
}
.ecurie-invite-row .ecurie-input { margin-bottom: 0; flex: 1; }

.ecurie-chat-messages {
  flex: 1; overflow-y: auto; padding: 8px 16px;
  display: flex; flex-direction: column; gap: 6px; max-height: 260px;
}
.ecurie-chat-msg { display: flex; flex-direction: column; gap: 2px; }
.ecurie-chat-msg.mine { align-items: flex-end; }
.ecurie-msg-author { font-size: .72rem; font-weight: 700; color: #4a5568; }
.ecurie-msg-text {
  background: rgba(22,27,34,.8); border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px; padding: 6px 10px;
  font-size: .86rem; color: #c9d1d9; max-width: 90%; word-break: break-word;
}
.ecurie-chat-msg.mine .ecurie-msg-text {
  background: rgba(43,170,158,.12); border-color: rgba(43,170,158,.25); color: #c8f4e8;
}
.ecurie-chat-system { justify-content: center; }
.ecurie-msg-system {
  font-size: .7rem; color: #2baa9e; font-style: italic; text-align: center;
  opacity: .75; padding: 2px 8px; background: rgba(43,170,158,.06);
  border-radius: 6px; display: block; width: 100%;
}
.ecurie-chat-input-row {
  display: flex; gap: 6px; padding: 8px 16px;
  border-top: 1px solid rgba(255,255,255,.05); align-items: center;
}
.ecurie-chat-input-row .ecurie-input { margin-bottom: 0; flex: 1; min-width: 0; }
.ecurie-chat-input-row .auth-submit {
  width: 36px; height: 36px; min-width: 36px; padding: 0;
  border-radius: 8px; flex-shrink: 0; margin-bottom: 0; font-size: 1rem;
  background: #2baa9e !important; border-color: #2baa9e !important; color: #fff !important;
}
.ecurie-chat-input-row .auth-submit:hover {
  background: #239e92 !important; box-shadow: none !important;
}

.ecurie-invites-list {
  padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex; flex-direction: column; gap: 6px;
}
.ecurie-invite-item {
  display: flex; align-items: center; gap: 8px; padding: 8px;
  background: rgba(13,17,23,.5); border: 1px solid rgba(43,170,158,.2);
  border-radius: 8px;
}
.ecurie-invite-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ecurie-invite-name { font-size: .85rem; font-weight: 700; color: #e6edf3; }
.ecurie-invite-by { font-size: .73rem; color: #4a5568; }
.ecurie-accept-btn {
  padding: 5px 12px; background: #2baa9e; border: none;
  color: #fff; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: .82rem;
  transition: background .15s;
}
.ecurie-accept-btn:hover { background: #229990; }
.ecurie-decline-btn {
  padding: 5px 10px; background: transparent;
  border: 1px solid rgba(255,255,255,.08); color: #4a5568;
  border-radius: 6px; cursor: pointer; font-size: .82rem;
  transition: color .15s, border-color .15s;
}
.ecurie-decline-btn:hover { color: rgba(231,76,60,.8); border-color: rgba(231,76,60,.3); }

.ecurie-tag-inline { font-size: .78em; color: #2baa9e; -webkit-text-fill-color: #2baa9e; font-weight: 700; margin-right: 4px; opacity: .85; }

/* Clan tag level colors */
.ecurie-tag-level-3, .ecurie-tag-level-4 {
  background: linear-gradient(90deg, #9e9e9e 0%, #e8e8e8 40%, #ffffff 50%, #e8e8e8 60%, #9e9e9e 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  animation: silverShimmer 3s ease-in-out infinite;
}
.ecurie-tag-level-5, .ecurie-tag-level-6 {
  background: linear-gradient(90deg, #ffd700 0%, #fff8c0 40%, #fffde0 50%, #fff8c0 60%, #ffd700 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  animation: goldShimmer 3s ease-in-out infinite;
}
.ecurie-tag-level-7, .ecurie-tag-level-8 {
  background: linear-gradient(90deg, #a8d8ea 0%, #e8f4f8 40%, #ffffff 50%, #e8f4f8 60%, #a8d8ea 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  animation: platinumShimmer 3s ease-in-out infinite;
}
.ecurie-tag-level-9, .ecurie-tag-level-10 {
  background: linear-gradient(90deg, hsl(0,100%,60%), hsl(60,100%,60%), hsl(120,100%,60%), hsl(180,100%,60%), hsl(240,100%,60%), hsl(300,100%,60%), hsl(360,100%,60%));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  animation: rainbowScroll 3s linear infinite;
}
@keyframes silverShimmer {
  0%   { background-position: 120% center; }
  50%  { background-position: -30% center; }
  100% { background-position: 120% center; }
}
@keyframes goldShimmer {
  0%   { background-position: 120% center; }
  50%  { background-position: -30% center; }
  100% { background-position: 120% center; }
}
@keyframes platinumShimmer {
  0%   { background-position: 120% center; }
  50%  { background-position: -30% center; }
  100% { background-position: 120% center; }
}
@keyframes rainbowScroll {
  0%   { background-position: 0% center; }
  100% { background-position: -200% center; }
}

/* ── Logo crop modal ──────────────────────────────────────────── */
.logo-crop-box { background: #0d1117; border: 1px solid #30363d; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 360px; width: calc(100vw - 32px); }
.logo-crop-header { width: 100%; display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #e6edf3; font-size: .95rem; }
.logo-crop-canvas-wrap { border-radius: 8px; overflow: hidden; border: 1px solid #30363d; line-height: 0; }
.logo-crop-canvas-wrap canvas { display: block; touch-action: none; cursor: grab; width: 300px; height: 300px; }
.logo-crop-canvas-wrap canvas:active { cursor: grabbing; }
.logo-crop-hint { font-size: .78rem; color: #8b949e; margin: 0; text-align: center; }

/* Admin chart period pills */
.admin-chart-period-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px; margin-bottom: 10px; flex-wrap: wrap; gap: 8px;
}
.admin-chart-pills { display: flex; gap: 4px; }
.admin-chart-pill {
  padding: 4px 12px; border: 1px solid #30363d; border-radius: 20px;
  background: transparent; color: #8b949e; font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.admin-chart-pill:hover { border-color: #484f58; color: #c9d1d9; }
.admin-chart-pill.active { background: #21262d; border-color: #2baa9e; color: #2baa9e; }

/* Admin bar charts */
.admin-charts-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-chart-block { flex: 1; min-width: 220px; background: #161b22; border: 1px solid #30363d; border-radius: 10px; padding: 12px 14px; }
.admin-chart-block h4 { margin: 0 0 10px; font-size: .8rem; color: #8b949e; text-transform: uppercase; letter-spacing: .04em; }
.admin-bar-chart { display: flex; flex-direction: column; gap: 3px; max-height: 250px; overflow-y: auto; }
.admin-bar-row { display: flex; align-items: center; gap: 6px; }
.admin-bar-lbl { width: 46px; font-size: .72rem; color: #8b949e; flex-shrink: 0; }
.admin-bar-track { flex: 1; height: 10px; background: #21262d; border-radius: 5px; overflow: hidden; }
.admin-bar-fill { height: 100%; border-radius: 5px; transition: width .3s; }
.admin-bar-val { width: 28px; text-align: right; font-size: .72rem; color: #c9d1d9; flex-shrink: 0; }

.admin-empty { color: #8b949e; font-size: .85rem; text-align: center; padding: 20px 0; }

/* ── Promo codes admin ─────────────────────────────────────── */
.promo-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.promo-form-row .admin-input { flex: 1; min-width: 120px; }

.promo-catalog-group { margin-bottom: 16px; }
.promo-catalog-group-title { font-size: .72rem; font-weight: 700; color: #8b949e; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.promo-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; }

.promo-catalog-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #161b22; border: 1px solid #30363d; border-radius: 8px;
  padding: 8px 4px 6px; cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s;
  position: relative;
}
.promo-catalog-card:hover { border-color: #4a9eff; background: #1c2230; }
.promo-catalog-card.selected { border-color: #4a9eff; background: #0d2040; }

.promo-catalog-preview {
  width: 44px; height: 44px; border-radius: 6px; overflow: hidden;
  background: #21262d; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.promo-catalog-name {
  font-size: .65rem; color: #c9d1d9; text-align: center; line-height: 1.2;
  margin: 0; word-break: break-word;
}
.promo-catalog-check {
  position: absolute; top: 4px; right: 5px;
  font-size: .7rem; font-weight: 800;
  color: #8b949e; transition: color .15s;
}
.promo-catalog-card.selected .promo-catalog-check { color: #4a9eff; }

.promo-code-row {
  background: #161b22; border: 1px solid #30363d; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px;
}
.promo-code-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.promo-code-badge {
  font-family: monospace; font-size: .9rem; font-weight: 800; letter-spacing: .08em;
  background: #21262d; border: 1px solid #4a9eff; color: #4a9eff;
  padding: 2px 8px; border-radius: 6px;
}
.promo-code-label { font-size: .82rem; color: #e6edf3; }
.promo-code-items { display: flex; flex-wrap: wrap; gap: 4px; }
.promo-item-chip {
  font-size: .72rem; background: #21262d; border: 1px solid #30363d;
  color: #8b949e; padding: 2px 7px; border-radius: 12px;
}
.promo-code-actions { display: flex; gap: 6px; }

.admin-btn-sm {
  padding: 4px 10px; border-radius: 6px; font-size: .75rem; font-weight: 600; cursor: pointer;
  background: #21262d; border: 1px solid #30363d; color: #c9d1d9; transition: background .15s;
}
.admin-btn-sm:hover { background: #30363d; }
.admin-btn-danger { border-color: rgba(220,38,38,.5) !important; color: #f87171 !important; }
.admin-btn-danger:hover { background: rgba(220,38,38,.15) !important; border-color: #f87171 !important; }

/* ── Admin Grant Cosmétiques ────────────────────────────────── */
.acg-search-wrap { position: relative; display: inline-block; width: 100%; max-width: 360px; }
.acg-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
  background: #161b22; border: 1px solid #30363d; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); max-height: 220px; overflow-y: auto; margin-top: 2px;
}
.acg-dd-item {
  padding: 8px 12px; cursor: pointer; font-size: .85rem; color: #c9d1d9;
  transition: background .12s;
}
.acg-dd-item:hover { background: #21262d; }
.acg-dd-empty { color: #8b949e; cursor: default; }
.acg-selected-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 8px 12px; border-radius: 8px;
  background: rgba(43,170,158,.1); border: 1px solid rgba(43,170,158,.3);
}
.acg-selected-avatar { font-size: 1.1rem; }
.acg-selected-name { font-weight: 700; color: #e3e3e3; font-size: .9rem; }
.acg-unlock-badge {
  font-size: .72rem; background: rgba(43,170,158,.15); border: 1px solid rgba(43,170,158,.4);
  color: #2baa9e; padding: 2px 8px; border-radius: 20px; font-weight: 700;
}
.acg-link-btn {
  background: none; border: none; color: #4a9eff; font-size: .8rem; cursor: pointer;
  padding: 2px 4px; text-decoration: underline; display: inline-flex; align-items: center; gap: 4px;
}
.acg-link-btn:hover { color: #79b8ff; }
.acg-clear-btn {
  background: none; border: none; color: #8b949e; font-size: .9rem; cursor: pointer;
  margin-left: auto; padding: 2px 6px; border-radius: 4px;
}
.acg-clear-btn:hover { color: #f85149; background: rgba(248,81,73,.1); }
.acg-unlocks-list { margin-top: 4px; }
.acg-item-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: .72rem;
  background: #21262d; border: 1px solid #30363d; color: #8b949e;
  padding: 2px 6px 2px 8px; border-radius: 12px; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acg-chip-rm {
  background: none; border: none; color: #6e7681; cursor: pointer; font-size: .65rem;
  padding: 0 2px; line-height: 1; flex-shrink: 0;
}
.acg-chip-rm:hover { color: #f85149; }

/* ── Gem packs (recharge tab) ───────────────────────────────── */
.shop-recharge-intro {
  font-size: .8rem; color: #8b949e; text-align: center; margin-bottom: 16px;
}
.gem-packs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}

/* Card */
.gem-pack {
  position: relative;
  background: #0a0d12;
  border: 1.5px solid rgba(139,92,246,.22);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.gem-pack:hover {
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 6px 22px rgba(139,92,246,.2);
  transform: translateY(-2px);
}

/* ── Visual top zone ── */
.gp-visual {
  padding: 20px 10px 15px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: linear-gradient(165deg, rgba(139,92,246,.13) 0%, rgba(99,60,180,.06) 55%, transparent 100%);
  border-bottom: 1px solid rgba(139,92,246,.1);
  position: relative;
}
.gp-visual::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    -62deg, transparent 0px, transparent 14px,
    rgba(255,255,255,.016) 14px, rgba(255,255,255,.016) 15px
  );
}
.gp-gem {
  font-size: 2rem; line-height: 1;
  filter: drop-shadow(0 3px 10px rgba(139,92,246,.55));
  position: relative; z-index: 1;
}
.gp-count {
  font-size: 1.55rem; font-weight: 900; color: #c084fc;
  line-height: 1; letter-spacing: -.02em;
  position: relative; z-index: 1;
}
.gp-unit {
  font-size: .6rem; font-weight: 700;
  color: rgba(168,85,247,.5); text-transform: uppercase; letter-spacing: .1em;
  position: relative; z-index: 1;
}

/* ── Info bottom zone ── */
.gp-info {
  padding: 11px 10px 13px;
  display: flex; flex-direction: column; gap: 9px; flex: 1;
}
.gp-name {
  font-size: .67rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: #6e7681;
}
.gp-price {
  font-size: 1.1rem; font-weight: 900;
  color: #e6edf3; letter-spacing: -.01em; margin-top: auto;
}

/* Popular variant */
.gem-pack-popular {
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 0 22px rgba(139,92,246,.16);
}
.gem-pack-popular:hover {
  box-shadow: 0 6px 28px rgba(139,92,246,.32);
}
.gem-pack-popular .gp-visual {
  background: linear-gradient(165deg, rgba(139,92,246,.22) 0%, rgba(99,60,180,.1) 55%, transparent 100%);
  border-bottom-color: rgba(139,92,246,.22);
}
.gem-pack-popular .gp-gem {
  filter: drop-shadow(0 3px 12px rgba(168,85,247,.75));
}
.gem-pack-popular .gp-count { color: #d8b4fe; }
.gem-pack-popular .gp-name { color: #9b72ef; }
.gem-pack-popular .gp-price { color: #fff; }

/* "Populaire" badge — pill flottant top-right */
.gem-pack-badge {
  position: absolute; top: 8px; right: 8px;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: #fff; font-size: .56rem; font-weight: 800;
  padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .07em;
  white-space: nowrap; z-index: 3;
  box-shadow: 0 2px 8px rgba(139,92,246,.45);
}

/* Elite variant — légèrement plus intense */
.gem-pack-elite {
  border-color: rgba(168,85,247,.28);
}
.gem-pack-elite .gp-visual {
  background: linear-gradient(165deg, rgba(168,85,247,.16) 0%, rgba(99,60,180,.06) 55%, transparent 100%);
}
.gem-pack-elite .gp-gem {
  filter: drop-shadow(0 3px 14px rgba(192,38,211,.65));
}
.gem-pack-elite .gp-count { color: #e9d5ff; }

/* Buy button — full width */
.gem-pack-btn {
  width: 100%; padding: 8px 6px;
  background: linear-gradient(to right, #6d28d9, #a855f7);
  color: #fff; font-size: .68rem; font-weight: 900;
  border: none; border-radius: 6px; cursor: pointer;
  text-transform: uppercase; letter-spacing: .07em;
  position: relative; overflow: hidden;
  transition: filter .15s, transform .1s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.gem-pack-btn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.15) 0%, transparent 55%),
    repeating-linear-gradient(-62deg, transparent 0px, transparent 10px, rgba(255,255,255,.04) 10px, rgba(255,255,255,.04) 11px);
}
.gem-pack-btn:hover { filter: brightness(1.14); transform: scale(1.03); }
.gem-pack-btn:active { filter: brightness(.88); transform: scale(.96); }

.shop-recharge-notice {
  font-size: .72rem; color: #484f58; text-align: center; margin-top: 18px;
}

/* ── Gold packs (gems → coins) ──────────────────────────────── */
.gold-packs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.gold-pack {
  position: relative;
  background: #0d0a04;
  border: 1.5px solid rgba(245,158,11,.22);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.gold-pack:hover {
  border-color: rgba(245,158,11,.55);
  box-shadow: 0 6px 22px rgba(245,158,11,.18);
  transform: translateY(-2px);
}

/* Visual top zone */
.gpk-visual {
  padding: 20px 10px 15px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: linear-gradient(165deg, rgba(245,158,11,.14) 0%, rgba(180,83,9,.06) 55%, transparent 100%);
  border-bottom: 1px solid rgba(245,158,11,.1);
  position: relative;
}
.gpk-visual::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    -62deg, transparent 0px, transparent 14px,
    rgba(255,255,255,.016) 14px, rgba(255,255,255,.016) 15px
  );
}
.gpk-emoji {
  font-size: 2rem; line-height: 1;
  filter: drop-shadow(0 3px 10px rgba(245,158,11,.6));
  position: relative; z-index: 1;
}
.gpk-count {
  font-size: 1.45rem; font-weight: 900; color: #fbbf24;
  line-height: 1; letter-spacing: -.02em;
  position: relative; z-index: 1;
}
.gpk-unit {
  font-size: .6rem; font-weight: 700;
  color: rgba(245,158,11,.5); text-transform: uppercase; letter-spacing: .1em;
  position: relative; z-index: 1;
}

/* Info bottom zone */
.gpk-info {
  padding: 11px 10px 13px;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.gpk-name {
  font-size: .67rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: #6e7681;
}
.gpk-cost {
  font-size: .82rem; font-weight: 700; color: #c084fc;
  display: flex; align-items: center; gap: 4px; margin-top: auto;
}
.gpk-gems { font-size: .95rem; font-weight: 900; }

/* Best value variant */
.gold-pack-best {
  border-color: rgba(245,158,11,.5);
  box-shadow: 0 0 20px rgba(245,158,11,.12);
}
.gold-pack-best:hover { box-shadow: 0 6px 28px rgba(245,158,11,.28); }
.gold-pack-best .gpk-visual {
  background: linear-gradient(165deg, rgba(245,158,11,.22) 0%, rgba(180,83,9,.1) 55%, transparent 100%);
  border-bottom-color: rgba(245,158,11,.2);
}
.gold-pack-best .gpk-emoji { filter: drop-shadow(0 3px 14px rgba(245,158,11,.8)); }
.gold-pack-best .gpk-count { color: #fde68a; }
.gold-pack-best .gpk-name { color: #d97706; }

/* "Meilleur" badge */
.gpk-badge {
  position: absolute; top: 8px; right: 8px;
  background: linear-gradient(135deg, #92400e, #f59e0b);
  color: #0d1117; font-size: .56rem; font-weight: 800;
  padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .07em;
  white-space: nowrap; z-index: 3;
  box-shadow: 0 2px 8px rgba(245,158,11,.4);
}

/* Buy button */
.gold-pack-btn {
  width: 100%; padding: 8px 6px;
  background: linear-gradient(to right, #92400e, #f59e0b);
  color: #0d1117; font-size: .68rem; font-weight: 900;
  border: none; border-radius: 6px; cursor: pointer;
  text-transform: uppercase; letter-spacing: .07em;
  position: relative; overflow: hidden;
  transition: filter .15s, transform .1s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.gold-pack-btn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.2) 0%, transparent 55%),
    repeating-linear-gradient(-62deg, transparent 0px, transparent 10px, rgba(255,255,255,.05) 10px, rgba(255,255,255,.05) 11px);
}
.gold-pack-btn:hover { filter: brightness(1.12); transform: scale(1.03); }
.gold-pack-btn:active { filter: brightness(.85); transform: scale(.96); }
.gold-pack-btn:disabled { opacity: .35; cursor: not-allowed; filter: none; transform: none; }

/* Gold pack insufficient state */
.gold-pack-insufficient { border-color: rgba(245,158,11,.12) !important; }
.gold-pack-insufficient .gpk-visual { opacity: .6; }
.gpk-redirect {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin-top: 4px;
}
.gpk-insuff-label {
  font-size: .6rem; font-weight: 700; color: rgba(192,132,252,.65);
}
.gpk-redirect-btn {
  flex-shrink: 0; padding: 3px 8px;
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.28);
  color: #c084fc; font-size: .6rem; font-weight: 800;
  border-radius: 4px; cursor: pointer; white-space: nowrap; font-family: inherit;
  transition: background .15s;
}
.gpk-redirect-btn:hover { background: rgba(139,92,246,.25); }

/* Premium badge option in profile picker */
.badge-option-premium {
  background-image: linear-gradient(135deg, var(--badge-bg-from, rgba(80,0,120,0.6)), var(--badge-bg-to, rgba(40,0,80,0.4)));
  border-color: rgba(160,80,255,0.4) !important;
  box-shadow: 0 0 8px rgba(160,80,255,0.2);
}
.badge-option-premium.selected {
  box-shadow: 0 0 12px rgba(200,100,255,0.5);
}

.color-grid {
  display: grid; grid-template-columns: repeat(auto-fill, 38px);
  gap: 10px; margin-bottom: 8px;
}

.color-swatch {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 3px solid transparent; position: relative;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  outline: none;
}
.color-swatch.locked {
  opacity: 0.38; cursor: not-allowed;
}
.color-swatch.locked::after {
  content: '🔒';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px; line-height: 1; pointer-events: none;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected {
  border-color: #fff; transform: scale(1.1);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
}

.color-section-label {
  grid-column: 1 / -1;
  font-size: .6rem; font-weight: 700; letter-spacing: .12em;
  color: #2baa9e; text-transform: uppercase;
  margin-top: 18px; margin-bottom: 6px;
  display: flex; align-items: center; gap: 7px;
}
.color-section-label::before {
  content: '';
  display: block; width: 14px; height: 1.5px;
  background: currentColor; border-radius: 1px; opacity: .7; flex-shrink: 0;
}
.color-section-label::after {
  content: '';
  flex: 1; height: 1px; background: currentColor; opacity: .12;
}

.color-hint {
  font-size: .73rem; color: #484f58;
  text-align: center; margin-bottom: 18px;
}

.profile-actions { display: flex; gap: 8px; margin-bottom: 0; }

/* Save — tile style */
.profile-save-btn {
  flex: 2; height: 42px;
  display: flex; align-items: center;
  padding: 0;
  background: linear-gradient(to right, #1a8f85 0%, #3cb5ac 100%);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 11px; cursor: pointer; overflow: hidden;
  transition: filter .15s, transform .1s;
  position: relative;
}
.profile-save-btn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.12) 0%, transparent 50%),
    repeating-linear-gradient(-62deg, transparent 0px, transparent 12px, rgba(255,255,255,.04) 12px, rgba(255,255,255,.04) 13px);
}
.profile-save-btn:hover:not(:disabled) { filter: brightness(1.1); transform: scale(1.015); }
.psb-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.2); border-right: 1px solid rgba(255,255,255,.12);
  position: relative; z-index: 1;
}
.psb-icon img { width: 18px; height: 18px; filter: brightness(0) invert(1); opacity: .85; }
.psb-label {
  flex: 1; text-align: center; font-size: .78rem; font-weight: 800;
  color: #fff; text-transform: uppercase; letter-spacing: .07em;
  position: relative; z-index: 1;
}
.psb-chevron {
  font-size: .85rem; color: rgba(255,255,255,.45);
  padding-right: 12px; position: relative; z-index: 1;
}

/* Close — ghost style */
.profile-close-btn {
  flex: 1; padding: 10px;
  background: transparent; color: #8b949e;
  border: 1.5px solid rgba(139,148,158,.22); border-radius: 8px;
  font-size: .78rem; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.profile-close-btn:hover { background: rgba(139,148,158,.08); border-color: rgba(139,148,158,.4); color: #c9d1d9; }

.push-notif-section { margin-top: 18px; }
.push-notif-hint { font-size: .78rem; color: #8b949e; margin: 4px 0 10px; }
.push-notif-btn {
  width: 100%; padding: 10px 16px;
  border: none; border-radius: 50px;
  font-size: .88rem; font-weight: 700; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.push-notif-btn[data-state="loading"] { background: #21262d; color: #8b949e; cursor: default; }
.push-notif-btn[data-state="inactive"] { background: #1d3a2e; color: #5cd68c; }
.push-notif-btn[data-state="inactive"]:hover { background: #1e4433; }
.push-notif-btn[data-state="active"] { background: #2d1f1f; color: #e06c6c; }
.push-notif-btn[data-state="active"]:hover { background: #3a2020; }
.push-notif-btn[data-state="denied"] { background: #21262d; color: #8b949e; cursor: default; }
.push-notif-debug-btn {
  width: 100%; margin-top: 8px; padding: 9px 14px;
  border-radius: 12px; border: 1px solid #30363d; background: #161b22; color: #c9d1d9;
  font-size: .8rem; font-weight: 700; cursor: pointer;
}
.push-notif-debug-status { font-size: .74rem; color: #8b949e; margin: 8px 2px 0; line-height: 1.35; white-space: pre-line; }

/* Sidebar user section */
.sidebar-user {
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid #21262d;
}

.sidebar-profile-btn {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 7px 8px; background: rgba(43,170,158,0.08);
  border: 1px solid rgba(43,170,158,0.2); border-radius: 8px;
  color: #e6edf3; font-size: .82rem; cursor: pointer;
  transition: background .15s, border-color .15s; text-align: left;
}
.sidebar-profile-btn:hover {
  background: rgba(43,170,158,0.15); border-color: rgba(43,170,158,0.4);
}

.sidebar-profile-icon { margin-left: auto; font-size: .8rem; color: #484f58; }

/* ============================================================
   Leaderboard (sidebar)
   ============================================================ */

.sidebar-lb h3 {
  font-size: .72rem; color: #8b949e;
  text-transform: uppercase; letter-spacing: .7px;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07);
  margin-bottom: 6px;
}

.sidebar-lb-tabs {
  display: flex; gap: 4px; margin-bottom: 7px;
}
.sidebar-lb-tab {
  flex: 1; padding: 4px 0; font-size: .7rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,.09); border-radius: 8px;
  background: transparent; color: #6e7681; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.sidebar-lb-tab.active { background: rgba(43,170,158,.15); color: #5cd68c; border-color: rgba(43,170,158,.35); }
.sidebar-lb-tab:not(.active):hover { background: rgba(255,255,255,.04); color: #c9d1d9; }

.sidebar-lb-row {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 3px; font-size: .75rem;
  border-bottom: 1px solid #12161c;
}
.sidebar-lb-row.lb-me .sidebar-lb-name { color: #2baa9e; font-weight: 700; }
.sidebar-lb-separator { text-align: center; color: #484f58; font-size: .65rem; letter-spacing: 3px; padding: 2px 0; }

.sidebar-lb-rank {
  width: 18px; text-align: center; flex-shrink: 0;
  font-size: .72rem; color: #484f58;
}
.sidebar-lb-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: #c9d1d9;
}
.sidebar-lb-time {
  font-family: 'Consolas', monospace; font-size: .72rem;
  color: #6e7681; white-space: nowrap;
}
.sidebar-lb-empty { font-size: .74rem; color: #484f58; padding: 4px 0; }

#sidebarCampaignMedals { margin-top: 8px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 8px; }
.sidebar-cpg-label { font-size: .68rem; color: #8b949e; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; font-weight: 700; }
.sidebar-cpg-row { font-size: .78rem; padding: 2px 0; font-weight: 600; }
.sidebar-cpg-row.gold   { color: #ffd700; }
.sidebar-cpg-row.silver { color: #c0c0c0; }
.sidebar-cpg-row.bronze { color: #cd7f32; }

/* Campaign result toast */
.campaign-toast {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%) translateY(-20px);
  display: flex; align-items: center; gap: 12px;
  background: #161b22; border: 2px solid #30363d; border-radius: 16px;
  padding: 14px 20px; z-index: 99999; opacity: 0;
  transition: opacity .35s, transform .35s; pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.8); min-width: 240px;
}
.campaign-toast.campaign-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.campaign-toast.campaign-toast-gold   { border-color: #ffd700; }
.campaign-toast.campaign-toast-silver { border-color: #c0c0c0; }
.campaign-toast.campaign-toast-bronze { border-color: #cd7f32; }
.cpg-toast-icon  { font-size: 2.2rem; line-height: 1; }
.cpg-toast-title { font-weight: 800; font-size: 1rem; color: #e6edf3; }
.cpg-toast-sub   { font-size: .78rem; color: #ffd700; margin-top: 2px; font-weight: 600; }

/* ============================================================
   Badge & Trail pickers (profile modal)
   ============================================================ */

.badge-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px;
}

.badge-option {
  padding: 4px 10px; border-radius: 20px; cursor: pointer;
  font-size: .75rem; font-weight: 700; border: 2px solid transparent;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  letter-spacing: .3px; outline: none;
}
.badge-option:hover:not(.locked) { transform: scale(1.07); }
.badge-option.locked { opacity: 0.38; cursor: not-allowed; }
.badge-option.selected {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
  transform: scale(1.05);
}

.trail-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px;
}

.trail-swatch {
  width: 42px; height: 28px; border-radius: 8px; cursor: pointer;
  border: 3px solid transparent;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  outline: none; flex-shrink: 0;
}
.trail-swatch:hover:not(.locked) { transform: scale(1.12); }
.trail-swatch.locked { opacity: 0.38; cursor: not-allowed; position: relative; }
.trail-swatch.locked::after {
  content: '🔒';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px; pointer-events: none;
}
.trail-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
  transform: scale(1.08);
}

.color-section-label--premium  { color: #a855f7; }
.color-section-label--animated { color: #ff7c40; }
.color-section-label--creator  { color: #F5C100; }

/* ── Creator section (inline in profile) ───────────────────── */
#creatorsSection {
  border: 1px solid rgba(245,193,0,.25); border-radius: 10px;
  background: rgba(245,193,0,.04); padding: 12px 14px; margin-bottom: 12px;
}
.creator-section-title {
  font-size: .78rem; font-weight: 800; color: #F5C100;
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px;
}
.creator-pack-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.creator-pack-logo { width: 26px; height: 26px; object-fit: contain; }
.creator-pack-name { font-size: .9rem; font-weight: 800; letter-spacing: .04em; }
.creator-type-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.creator-type-label {
  font-size: .7rem; font-weight: 700; color: #8b949e;
  text-transform: uppercase; letter-spacing: .05em; min-width: 60px; flex-shrink: 0;
}
.creator-pack-items { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.creator-separator { border: none; border-top: 1px solid #21262d; margin: 12px 0; }
.creator-swatch {
  width: 38px; height: 38px; border-radius: 7px; border: 2px solid transparent;
  cursor: pointer; transition: border-color .15s, transform .1s;
}
.creator-swatch:hover { transform: scale(1.1); }
.creator-swatch.selected { border-color: #F5C100 !important; box-shadow: 0 0 8px rgba(245,193,0,.5); }

.creator-item-selected {
  border-color: #F5C100 !important;
  box-shadow: 0 0 0 3px rgba(245,193,0,0.3), 0 0 10px rgba(245,193,0,0.15) !important;
  transform: scale(1.05) !important;
}

/* ── Victory picker ── */
.victory-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px;
}
.victory-swatch {
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,0.07); border: 3px solid transparent;
  font-size: 1.5rem; display: flex; align-items: center; justify-content: center;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  outline: none; flex-shrink: 0; color: #8b949e;
}
.victory-swatch:hover { transform: scale(1.12); }
.victory-swatch.selected {
  border-color: #ffe066;
  box-shadow: 0 0 0 2px rgba(255,224,102,0.3);
  transform: scale(1.08);
}

/* ── Model picker ── */
.model-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px;
}
.model-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 8px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 3px solid transparent;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  outline: none; flex-shrink: 0;
}
.model-swatch canvas {
  border-radius: 5px; display: block;
}
.model-swatch:hover { transform: scale(1.07); }
.model-swatch.selected {
  border-color: #2baa9e;
  box-shadow: 0 0 0 2px rgba(43,170,158,0.35);
  transform: scale(1.05);
}
.model-label {
  font-size: 0.68rem; color: #8b949e; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  pointer-events: none;
}
.model-swatch.selected .model-label { color: #2baa9e; }
.model-swatch.locked { opacity: 0.6; cursor: pointer; }
.model-swatch.locked:hover { transform: scale(1.04); border-color: rgba(255,204,0,0.4); }

/* ============================================================
   Daily reward
   ============================================================ */

.daily-box {
  width: 420px; max-width: calc(100vw - 32px); text-align: center;
}

.daily-title {
  font-size: 1.2rem; font-weight: 800; color: #ffd700; margin-bottom: 20px;
}

.daily-streak-row {
  display: flex; gap: 6px; justify-content: center; margin-bottom: 16px;
  flex-wrap: wrap;
}

.daily-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px; border-radius: 10px; min-width: 48px;
  background: #0d1117; border: 1px solid #21262d;
  transition: transform .15s;
}

.daily-chip-day  { font-size: .7rem; font-weight: 700; color: #484f58; text-transform: uppercase; }
.daily-chip-gems { font-size: .72rem; color: #8b949e; }

.daily-chip-done {
  background: rgba(43,170,158,0.1); border-color: rgba(43,170,158,0.3);
}
.daily-chip-done .daily-chip-day  { color: #2baa9e; }
.daily-chip-done .daily-chip-gems { color: #2baa9e; }

.daily-chip-current {
  background: rgba(255,215,0,0.1); border-color: rgba(255,215,0,0.5);
  box-shadow: 0 0 12px rgba(255,215,0,0.2); transform: scale(1.08);
}
.daily-chip-current .daily-chip-day  { color: #ffd700; }
.daily-chip-current .daily-chip-gems { color: #ffd700; font-weight: 700; }

.daily-status-msg {
  font-size: .84rem; color: #8b949e; min-height: 18px; margin-bottom: 8px;
}

/* ── Bouton Réclamer — CTA principal ─────────────────────────── */
#dailyClaimBtn {
  background: linear-gradient(to right, #1a8f85 0%, #3cb5ac 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.25) !important;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.25), 0 3px 16px rgba(43,170,158,.4), inset 0 1px 0 rgba(255,255,255,.15) !important;
  position: relative; overflow: hidden;
  transition: filter .15s, transform .1s !important;
}
#dailyClaimBtn::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.13) 0%, transparent 50%),
    repeating-linear-gradient(
      -62deg,
      transparent 0px, transparent 14px,
      rgba(255,255,255,.04) 14px, rgba(255,255,255,.04) 15px
    );
  pointer-events: none;
}
#dailyClaimBtn:hover  { filter: brightness(1.08) !important; box-shadow: 0 4px 22px rgba(43,170,158,.55) !important; }
#dailyClaimBtn:active { transform: scale(.98) !important; filter: brightness(.92) !important; }
#dailyClaimBtn:disabled {
  background: #21262d !important; color: #484f58 !important;
  box-shadow: none !important; opacity: 1 !important;
}

/* ── Daily Premium row ───────────────────────────────────────── */
.daily-premium-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 12px; padding: 10px 14px;
  background: linear-gradient(135deg, rgba(40,28,2,.9), rgba(24,16,2,.9));
  border: 1px solid rgba(255,215,0,.35); border-radius: 10px;
}
.daily-premium-locked { opacity: 1; }
.daily-premium-locked .daily-premium-info { opacity: .7; } /* texte atténué, pas le bouton */
.daily-premium-info { display: flex; align-items: center; gap: 10px; }
.daily-premium-icon {
  font-size: 1.3rem; color: #ffd700;
  text-shadow: 0 0 8px rgba(255,215,0,.6);
}
.daily-premium-label {
  display: block; font-size: .78rem; font-weight: 700;
  color: #ffd700; text-transform: uppercase; letter-spacing: .5px;
}
.daily-premium-reward { display: block; font-size: .82rem; color: #e6edf3; margin-top: 1px; }
.daily-premium-btn {
  flex-shrink: 0; padding: 6px 14px; border-radius: 8px; font-size: .82rem; font-weight: 700;
  background: linear-gradient(135deg, #b8860b, #ffd700); color: #1a0800;
  border: none; cursor: pointer; transition: opacity .15s;
  white-space: nowrap;
}
.daily-premium-btn:disabled { opacity: .5; cursor: default; }
.daily-premium-btn-locked {
  background: linear-gradient(135deg, #f5a800 0%, #ffe14d 100%) !important;
  color: #1a0800 !important; border: none !important;
  text-shadow: none !important;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.3), 0 2px 14px rgba(255,200,0,.45) !important;
  opacity: 1 !important;
}
.daily-premium-btn-locked:hover {
  filter: brightness(1.08);
  box-shadow: 0 3px 20px rgba(255,200,0,.65) !important;
}

/* ── Premium : pseudo doré dans les menus ────────────────────── */
.premium-name-gold {
  background: linear-gradient(90deg, #ffd700 20%, #fff8c0 48%, #ffd700 52%, #ffd700 80%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  text-shadow: none !important;
  animation: premiumShimmer 3.5s ease-in-out infinite;
}
@keyframes premiumShimmer {
  0%   { background-position: 120% center; }
  50%  { background-position: -30% center; }
  100% { background-position: 120% center; }
}

/* ── Premium nav indicator ───────────────────────────────────── */
.premium-nav-dot { display: none !important; }

/* ── Profile: bandeau premium ────────────────────────────────── */
.profile-premium-banner {
  display: flex; align-items: center; gap: 8px;
  margin: -4px 0 10px;
  padding: 8px 14px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(30,20,2,.9), rgba(18,12,2,.9));
  border: 1px solid rgba(255,215,0,.5);
  box-shadow: 0 0 12px rgba(255,215,0,.1);
  font-size: .82rem; font-weight: 700; color: #ffd700;
}
.ppb-icon { font-size: 1rem; text-shadow: 0 0 8px rgba(255,215,0,.8); }
.ppb-countdown {
  margin-left: auto; font-size: .75rem; color: #c9a227; font-weight: 600;
}

/* ── Shop: tab spécifiques (overrides couleur pill) ─────────── */
/* Abonnement — or, pulse quand non actif */
.shop-tab-premium {
  color: rgba(255,215,0,.75) !important;
  background: rgba(255,215,0,.07) !important;
  border-color: rgba(255,215,0,.2) !important;
}
.shop-tab-premium:hover {
  color: #0d1117 !important;
  background: #ffd700 !important;
  border-color: #ffd700 !important;
  box-shadow: 0 2px 14px rgba(255,215,0,.4) !important;
}
.shop-tab-premium.active {
  color: #0d1117 !important;
  background: #ffd700 !important;
  border-color: #ffd700 !important;
  box-shadow: 0 2px 16px rgba(255,215,0,.45) !important;
}
/* Pulse quand l'abonnement n'est pas actif */
@keyframes sub-tab-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,.0); border-color: rgba(255,215,0,.2) !important; }
  50%       { box-shadow: 0 0 0 4px rgba(255,215,0,.0); border-color: rgba(255,215,0,.55) !important; }
}
@keyframes sub-tab-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(255,215,0,.12), 0 0 0 0 rgba(255,215,0,.2); }
  50%       { box-shadow: 0 0 10px rgba(255,215,0,.28), 0 0 0 3px rgba(255,215,0,0); }
}
.shop-tab-premium.shop-tab-sub-inactive:not(.active) {
  animation: sub-tab-glow 2.6s ease-in-out infinite;
}

/* Événements — rose corail */
.shop-tab-event {
  color: rgba(244,63,94,.75);
  background: rgba(244,63,94,.07);
  border-color: rgba(244,63,94,.2);
}
.shop-tab-event:hover {
  color: #fff;
  background: rgba(244,63,94,.85);
  border-color: #f43f5e;
  box-shadow: 0 2px 12px rgba(244,63,94,.3);
}
.shop-tab-event.active {
  color: #fff;
  background: #f43f5e;
  border-color: #f43f5e;
  box-shadow: 0 2px 14px rgba(244,63,94,.4);
}
.shop-tab-event-active { position: relative; }
.shop-tab-event-active::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px;
  background: #f43f5e; border-radius: 50%;
  animation: event-pulse 1.4s ease-in-out infinite;
}
@keyframes event-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* Panel événements */
.shop-event-empty {
  text-align: center; color: #888; padding: 40px 20px;
  font-size: 14px; font-style: italic;
}
.shop-event-theme { margin-bottom: 24px; }
.shop-event-theme-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 12px;
  background: rgba(232,168,124,0.08);
  border-left: 3px solid #e8a87c;
  border-radius: 0 8px 8px 0;
}
.set-icon  { font-size: 20px; }
.set-name  { font-weight: 600; color: #e8a87c; flex: 1; }
.set-dates { font-size: 11px; color: #888; }
.set-limited {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  color: #e8a87c; border: 1px solid #e8a87c;
  border-radius: 4px; padding: 1px 6px;
}

/* ── Admin: Seasonal panel ─────────────────────────────────────── */
.seasonal-admin-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px; flex-wrap: wrap;
}
.sar-type  { font-size: 18px; flex-shrink: 0; }
.sar-info  { display: flex; flex-direction: column; flex: 1; min-width: 140px; }
.sar-item-id { font-size: 13px; font-weight: 600; color: #e8a87c; }
.sar-theme   { font-size: 11px; color: #888; }
.sar-toggle-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #ccc; cursor: pointer;
}
.sar-dates {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: #aaa;
}
.sar-dates input[type="date"] {
  background: #2a2a2a; border: 1px solid #444; color: #ddd;
  border-radius: 4px; padding: 2px 6px; font-size: 11px;
}
.sar-arrow { color: #888; font-size: 14px; }
.sar-save-btn {
  background: #e8a87c; color: #111; border: none;
  border-radius: 6px; padding: 5px 12px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: opacity .15s;
}
.sar-save-btn:hover { opacity: .85; }

/* ── Admin: Seasonal theme cards ───────────────────────────────── */
.seasonal-theme-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(232,168,124,0.2);
  border-radius: 12px; padding: 16px; margin-bottom: 14px;
}

/* Admin — season cards */
.admin-season-card { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.admin-season-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.admin-season-name { font-weight: 700; font-size: .95rem; color: #e6edf3; }
.admin-season-status { font-size: .78rem; font-weight: 700; }
.admin-season-dates { font-size: .75rem; color: #8b949e; margin-bottom: 12px; }
.admin-season-badges { display: flex; flex-direction: column; gap: 8px; }
.admin-season-badge { display: flex; align-items: center; gap: 10px; border: 1px solid; border-radius: 10px; padding: 8px 12px; }
.asb-emoji { font-size: 1.4rem; flex-shrink: 0; }
.asb-info { display: flex; flex-direction: column; gap: 2px; }
.asb-id { font-size: .8rem; font-weight: 700; }
.asb-badge-id { font-size: .68rem; color: #484f58; font-family: monospace; }
.asb-winner { font-size: .78rem; font-weight: 600; color: #5cd68c; }
.stc-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.stc-icon { font-size: 22px; }
.stc-name { font-size: 15px; font-weight: 700; color: #e8a87c; flex: 1; }
.stc-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #ccc; cursor: pointer;
}
.stc-toggle input[type="checkbox"] { cursor: pointer; }
.stc-toggle-text { min-width: 40px; }
.stc-items {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.2); border-radius: 8px;
}
.stc-item {
  font-size: 12px; color: #aaa;
  background: rgba(255,255,255,0.05);
  border-radius: 6px; padding: 4px 10px;
}
.stc-item b { color: #ccc; }
.stc-dates-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.stc-dates-label { font-size: 12px; color: #888; }
.stc-dates-row input[type="date"] {
  background: #2a2a2a; border: 1px solid #444; color: #ddd;
  border-radius: 6px; padding: 4px 8px; font-size: 12px;
}
.stc-save { margin-left: auto; }

/* ── Shop preview modal ─────────────────────────────────────── */
#shopPreviewModal { z-index: 1000; }
#trackVoteModal    { z-index: 800; }
#changeTrackModal  { z-index: 800; }

#shopPreviewModal .modal-box {
  background: linear-gradient(155deg, rgba(34,152,136,.15) 0%, rgba(34,152,136,.04) 40%, transparent 65%), #161b22;
  border-color: rgba(43,170,158,.32);
  animation: wlc-in .25s ease both; position: relative; overflow: hidden;
}
#shopPreviewModal .modal-box::after {
  content: ''; position: absolute; right: -18px; bottom: -18px;
  width: 180px; height: 180px;
  background: url('/images/boutique.svg') no-repeat center / contain;
  filter: brightness(0) invert(1); opacity: .03; pointer-events: none; z-index: 0;
}

.shop-preview-box { max-width: 320px; padding: 22px 20px 20px; text-align: center; }
.shop-preview-sub { display: none; }

#shopPreviewCanvas {
  border-radius: 10px; border: 1px solid rgba(255,255,255,.08);
  display: block; margin: 0 auto 14px; background: #070b12;
  max-width: 100%; position: relative; z-index: 1;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.shop-preview-title {
  font-size: 1rem; font-weight: 800; color: #e6edf3;
  margin: 0 0 3px; text-transform: uppercase; letter-spacing: .04em;
  position: relative; z-index: 1;
}
.shop-preview-price-line {
  font-size: 1.15rem; color: #f0c040; font-weight: 900;
  margin: 0 0 18px; letter-spacing: -.01em;
  position: relative; z-index: 1;
}

/* Buttons row */
.shop-preview-btns { display: flex; gap: 10px; position: relative; z-index: 1; }

/* Cancel — ghost */
.spm-cancel-btn {
  flex: 1; padding: 10px;
  background: transparent; color: #8b949e;
  border: 1.5px solid rgba(139,148,158,.22); border-radius: 8px;
  font-size: .78rem; font-weight: 700; font-family: inherit; cursor: pointer;
  text-transform: uppercase; letter-spacing: .05em;
  transition: background .15s, color .15s, border-color .15s;
}
.spm-cancel-btn:hover { background: rgba(255,255,255,.04); color: #e6edf3; border-color: rgba(139,148,158,.45); }

/* Confirm — tile button */
.spm-confirm-btn {
  flex: 2; padding: 0;
  background: linear-gradient(to right, #1a8f85 0%, #3cb5ac 100%);
  border: 1.5px solid rgba(255,255,255,.18); border-radius: 11px;
  cursor: pointer; overflow: hidden; position: relative;
  display: flex; align-items: center;
  color: #fff; font-family: inherit;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.22);
  transition: filter .15s, transform .1s;
}
.spm-confirm-btn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.13) 0%, transparent 50%),
    repeating-linear-gradient(-62deg, transparent 0px, transparent 14px, rgba(255,255,255,.045) 14px, rgba(255,255,255,.045) 15px);
}
.spm-icon {
  width: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 0; z-index: 1;
}
.spm-svg { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); }
.spm-label { flex: 1; z-index: 1; font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; text-align: left; }
.spm-chevron { color: rgba(255,255,255,.4); margin-right: 12px; font-size: .9rem; z-index: 1; }
.spm-confirm-btn:hover { filter: brightness(1.1); }
.spm-confirm-btn:active { filter: brightness(.92); transform: scale(.98); }
.spm-confirm-btn:disabled, .spm-confirm-btn.spm-disabled {
  opacity: .32; cursor: not-allowed; filter: none; transform: none; pointer-events: none;
}

/* ── Insufficient gems row ── */
.spm-insufficient-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; margin-bottom: 14px;
  background: rgba(139,92,246,.08);
  border: 1px solid rgba(139,92,246,.22);
  border-radius: 8px; position: relative; z-index: 1;
}
.spm-insufficient-msg {
  font-size: .75rem; font-weight: 700; color: rgba(168,85,247,.8);
  display: flex; align-items: center; gap: 5px;
}
.spm-get-gems-btn {
  flex-shrink: 0; padding: 5px 12px;
  background: linear-gradient(to right, #6d28d9, #a855f7);
  color: #fff; font-size: .7rem; font-weight: 800;
  border: none; border-radius: 5px; cursor: pointer;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  position: relative; overflow: hidden;
  transition: filter .15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.spm-get-gems-btn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.14) 0%, transparent 55%);
}
.spm-get-gems-btn:hover { filter: brightness(1.14); }

/* Prix en mode insuffisant */
.shop-preview-price-line.spm-price-insufficient { color: rgba(168,85,247,.7); }

.premium-offer-card, .premium-active-card {
  margin: 8px 0; padding: 20px;
  background: linear-gradient(135deg, rgba(30,20,2,.95), rgba(18,12,2,.95));
  border: 1.5px solid rgba(255,215,0,.5); border-radius: 14px;
  box-shadow: 0 0 24px rgba(255,215,0,.08);
}
.premium-offer-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.premium-offer-icon {
  font-size: 2.4rem; color: #ffd700;
  text-shadow: 0 0 16px rgba(255,215,0,.7);
}
.premium-offer-title { font-size: 1.05rem; font-weight: 800; color: #ffd700; }
.premium-offer-price { font-size: 1.5rem; font-weight: 800; color: #e6edf3; margin-top: 2px; }
.premium-offer-price span { font-size: .85rem; color: #8b949e; font-weight: 400; }

.premium-active-badge {
  display: inline-block; padding: 4px 14px; border-radius: 20px;
  background: linear-gradient(135deg, #b8860b, #ffd700); color: #1a0800;
  font-size: .82rem; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; margin-bottom: 10px;
}
.premium-active-expires { font-size: .8rem; color: #8b949e; margin-bottom: 14px; }
.premium-manage-hint { font-size: .75rem; color: #484f58; margin-top: 12px; }
.premium-manage-hint a { color: #8b949e; }

.premium-perks-list {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
}
.premium-perks-list li { font-size: .85rem; color: #c9d1d9; padding-left: 2px; }

.premium-subscribe-btn {
  width: 100%; padding: 12px; border-radius: 10px; font-size: .95rem; font-weight: 800;
  background: linear-gradient(135deg, #b8860b, #ffd700, #b8860b);
  background-size: 200% 100%; color: #1a0800; border: none; cursor: pointer;
  transition: background-position .3s, box-shadow .2s;
  box-shadow: 0 0 16px rgba(255,215,0,.25);
}
.premium-subscribe-btn:hover {
  background-position: right center;
  box-shadow: 0 0 24px rgba(255,215,0,.4);
}
.premium-sub-notice {
  font-size: .72rem; color: #484f58; text-align: center; margin-top: 10px;
}

.reward-notif-box {
  width: 460px;
  max-width: calc(100vw - 32px);
}

.reward-notif-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #2baa9e;
  margin-bottom: 8px;
}

.reward-notif-sub {
  color: #8b949e;
  font-size: .86rem;
  margin-bottom: 12px;
}

.reward-notif-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.reward-notif-item {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 10px;
  padding: 9px 11px;
}

.reward-notif-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.reward-notif-kind {
  font-size: .78rem;
  color: #c9d1d9;
  font-weight: 700;
}

.reward-notif-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}

.reward-notif-label {
  font-size: .73rem;
  color: #8b949e;
}

.reward-notif-value {
  font-size: .78rem;
  color: #e6edf3;
  font-weight: 700;
}

.reward-notif-rank {
  font-size: .78rem;
  color: #2baa9e;
  font-weight: 700;
}

.reward-notif-amount {
  font-size: .83rem;
  color: #e6edf3;
  font-weight: 700;
}

/* ============================================================
   Podium
   ============================================================ */

.podium-box {
  width: 460px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px); overflow-y: auto;
  text-align: center;
}

.podium-title {
  font-size: 1.3rem; font-weight: 800; color: #2baa9e; margin-bottom: 18px;
}

.podium-entry {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 10px; margin-bottom: 7px;
  background: #0d1117; border: 1px solid #21262d;
  animation: slideIn .25s ease both;
}
.podium-entry:nth-child(1) { animation-delay: .05s; }
.podium-entry:nth-child(2) { animation-delay: .10s; }
.podium-entry:nth-child(3) { animation-delay: .15s; }

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

.podium-entry.podium-me {
  border-color: rgba(43,170,158,0.45);
  background: rgba(43,170,158,0.08);
}

.podium-medal { font-size: 1.3rem; width: 30px; flex-shrink: 0; text-align: center; }
.podium-name  { flex: 1; font-size: .92rem; font-weight: 600; text-align: left; }
.podium-time  { font-family: 'Consolas', monospace; font-size: .85rem; color: #8b949e; white-space: nowrap; }

.podium-coins-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,200,0,0.1); border: 1px solid rgba(255,200,0,0.3);
  border-radius: 20px; padding: 8px 18px; margin: 12px 0 0;
  font-size: .95rem; font-weight: 700; color: #ffd700;
}

.podium-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}
.podium-action-row {
  display: flex;
  gap: 8px;
}
.podium-action-btn {
  flex: 1;
  padding: 11px 14px;
  border-radius: 6px;
  border: 1px solid #3b434d;
  background: transparent;
  color: #c9d1d9;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  white-space: nowrap;
}
.podium-action-btn:hover {
  border-color: #8b949e;
  background: rgba(255,255,255,.04);
  box-shadow: 0 0 10px rgba(139,148,158,.15);
}
.podium-action-primary {
  background: #2baa9e;
  border-color: #2baa9e;
  color: #fff;
}
.podium-action-primary:hover { background: #25968b; border-color: #25968b; }
.podium-action-dismiss {
  background: transparent;
  border-color: transparent;
  color: #484f58;
  font-size: .8rem;
  padding: 7px;
}
.podium-action-dismiss:hover { color: #8b949e; background: transparent; border-color: transparent; }

/* ============================================================
   Leaderboard inline (homepage)
   ============================================================ */

.home-lb {
  margin-top: 10px;
  border-top: 1px solid #2d3540;
  padding-top: 8px;
}

.home-lb-title {
  font-size: .7rem; font-weight: 700; color: #8b949e;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px;
}

.home-lb .lb-row {
  padding: 4px 8px;
  margin-bottom: 2px;
  gap: 7px;
}

.home-lb .lb-rank { font-size: .78rem; width: 22px; }
.home-lb .lb-name { font-size: .78rem; }
.home-lb .lb-time { font-size: .74rem; }
.home-lb .dot     { width: 8px !important; height: 8px !important; }
.home-lb .lb-loading, .home-lb .lb-empty { padding: 6px 0; font-size: .76rem; }

.lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; margin-bottom: 4px;
  background: #0d1117; border: 1px solid #21262d;
}
.lb-row-me { border-color: rgba(43,170,158,0.4); background: rgba(43,170,158,0.07); }
.lb-separator { text-align: center; color: #484f58; font-size: .7rem; letter-spacing: 3px; padding: 2px 0; }

.lb-rank  { width: 28px; text-align: center; flex-shrink: 0; font-size: .85rem; color: #8b949e; }
.lb-name  { flex: 1; font-size: .88rem; font-weight: 600; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-time  { font-family: 'Consolas', monospace; font-size: .82rem; color: #8b949e; white-space: nowrap; }
.lb-row-me .lb-name { color: #2baa9e; }

.lb-loading, .lb-empty { color: #484f58; font-size: .84rem; padding: 16px 0; }

/* ============================================================
   Stats profil
   ============================================================ */

.stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 6px;
}

.stat-card {
  background: #0d1117; border: 1px solid #21262d; border-radius: 12px;
  padding: 16px 12px; text-align: center;
  display: flex; flex-direction: column; gap: 4px;
}

.stat-value {
  font-size: 2rem; font-weight: 800; color: #e6edf3; line-height: 1;
}
.stat-value.stat-gold   { color: #ffd700; }
.stat-value.stat-silver { color: #c0c0c0; }
.stat-value.stat-bronze { color: #cd7f32; }
.stat-value.stat-teal   { color: #2baa9e; }

.stat-label {
  font-size: .72rem; color: #8b949e; text-transform: uppercase; letter-spacing: .6px;
}

.stat-card-sm { padding: 10px 8px; }
.stat-card-sm .stat-value { font-size: 1.5rem; }

.stats-medals-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px;
}

/* ── Campaign ─────────────────────────────────────────────── */
.campaign-box { max-height: 80vh; overflow-y: auto; }

.campaign-timer {
  text-align: center; font-size: .82rem; color: #8b949e; margin: -4px 0 12px;
}

.campaign-tracks { display: flex; flex-direction: column; gap: 8px; }

.campaign-track-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #0d1117; border: 1px solid #21262d; border-radius: 10px; padding: 10px 12px;
}

.campaign-track-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }

.campaign-medal { font-size: 1.6rem; flex-shrink: 0; }

.campaign-track-name { font-weight: 700; font-size: .9rem; color: #e6edf3; }

.campaign-thresholds { font-size: .72rem; color: #8b949e; margin-top: 2px; }

.campaign-best { font-size: .75rem; color: #2baa9e; margin-top: 2px; }

.campaign-play-btn {
  flex-shrink: 0; padding: 7px 14px;
  background: #2baa9e; color: #fff;
  border: none; border-radius: 50px; cursor: pointer;
  font-weight: 700; font-size: .82rem;
  transition: background .15s;
}
.campaign-play-btn:hover { background: #229990; }

.campaign-reward-banner {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.3);
  border-radius: 10px; padding: 10px 14px; margin-top: 10px;
  font-size: .85rem; color: #ffd700; font-weight: 600;
}
.campaign-reward-banner.campaign-reward-claimed { color: #2baa9e; border-color: rgba(43,170,158,0.3); background: rgba(43,170,158,0.08); }

.stats-track-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-radius: 8px; margin-bottom: 4px;
  background: #0d1117; border: 1px solid #21262d;
}
.stats-track-name { font-size: .85rem; color: #c9d1d9; flex: 1; }
.stats-track-rank {
  font-family: 'Consolas', monospace; font-size: .75rem; color: #6e7681;
  background: rgba(255,255,255,.05); border: 1px solid #21262d;
  border-radius: 4px; padding: 1px 5px; margin-right: 8px;
}
.stats-track-time { font-family: 'Consolas', monospace; font-size: .82rem; color: #2baa9e; font-weight: 700; }

/* ── Public profile modal ─────────────────────────────────── */
.pub-profile-box {
  width: 400px; max-width: calc(100vw - 32px);
  max-height: 88vh; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 24px 28px 20px;
}

.pub-profile-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}

.pub-profile-identity {
  display: flex; align-items: center; gap: 10px;
}

.pub-profile-name {
  font-size: 1.15rem; font-weight: 800; color: #e6edf3;
}

.pub-profile-rank {
  font-size: .85rem; font-weight: 700; color: #2baa9e;
  background: #112127; border: 1px solid #2baa9e40;
  border-radius: 8px; padding: 2px 8px; white-space: nowrap;
}
.pub-profile-rank.hidden { display: none; }

#pubProfileCanvas {
  width: 100%; border-radius: 12px;
  background: #071014; display: block;
}

.glb-row { cursor: pointer; transition: background .12s; }
.glb-row:hover { background: rgba(43,170,158,0.07); border-radius: 8px; }

.pub-profile-name-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
  transition: color .15s;
}
.pub-profile-name-btn:hover { color: #2baa9e; }

/* ── Pub profile : emote strip ───────────────────────────── */

.pub-emote-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 0 2px;
}

.pub-emote-pill {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 7px;
  background: #0d1117; border: 1px solid #30363d;
  border-radius: 20px; font-size: .78rem; color: #c9d1d9;
  user-select: none;
}

.pub-emote-pill-premium {
  background: rgba(30,30,58,0.85);
  border-color: var(--glow, rgba(168,85,247,0.5));
  box-shadow: 0 0 6px var(--glow, rgba(168,85,247,0.3));
  color: #e6edf3;
}

.pub-emote-emoji { font-size: 1.1rem; line-height: 1; }
.pub-emote-name  { font-size: .72rem; color: #8b949e; }
.pub-emote-pill-premium .pub-emote-name { color: #c9d1d9; }

/* ── Pub profile : season badge strip ───────────────────────── */
.pub-season-badge-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 0 2px;
}
.pub-season-badge-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 9px;
  border: 1px solid; border-radius: 8px;
  user-select: none;
}

/* ============================================================
   Volume control
   ============================================================ */

#volumeControl {
  position: fixed; bottom: 18px; right: 18px; z-index: 9999;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}

#volumeBtn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(43,170,158,.1); border: 1.5px solid rgba(43,170,158,.4);
  color: #2baa9e; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: border-color .15s, background .15s, box-shadow .15s;
  box-shadow: 0 0 10px rgba(43,170,158,.15), 0 2px 8px rgba(0,0,0,.4);
}
#volumeBtn:hover {
  background: rgba(43,170,158,.18);
  border-color: rgba(43,170,158,.7);
  box-shadow: 0 0 16px rgba(43,170,158,.3), 0 2px 8px rgba(0,0,0,.4);
}

#volumePopover {
  background: #161b22; border: 1px solid #30363d; border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.5); min-width: 190px;
}
#volumePopover.hidden { display: none; }

.vol-row {
  display: flex; align-items: center; gap: 8px;
}

.vol-icon { font-size: .95rem; flex-shrink: 0; width: 20px; text-align: center; }

.vol-slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 4px; border-radius: 2px;
  background: #21262d; outline: none; cursor: pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: #2baa9e; cursor: pointer;
  border: 2px solid #0d1117;
}
.vol-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #2baa9e; cursor: pointer; border: 2px solid #0d1117;
}

.vol-label {
  font-size: .78rem; font-weight: 700; color: #e6edf3;
  min-width: 34px; text-align: right;
}

/* Sliders dans le profil : touch targets plus grands sur mobile */
@media (pointer: coarse) {
  #profileVolumeSection .vol-slider { height: 6px; }
  #profileVolumeSection .vol-slider::-webkit-slider-thumb { width: 22px; height: 22px; }
  #profileVolumeSection .vol-slider::-moz-range-thumb { width: 22px; height: 22px; }
}

/* ============================================================
   Achievements
   ============================================================ */

#achievementsList {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 420px; overflow-y: auto; padding-right: 4px;
}

.ach-card {
  display: flex; align-items: center; gap: 12px;
  background: #0d1117; border: 1px solid #21262d; border-radius: 12px;
  padding: 14px 14px; opacity: .55; transition: opacity .2s, border-color .2s;
}

.ach-card.ach-unlocked {
  opacity: 1; border-color: #f0b429;
  box-shadow: 0 0 8px rgba(240,180,41,.18);
}

.ach-card.ach-claimed {
  opacity: 1; border-color: #21262d;
}

.ach-emoji { font-size: 2rem; flex-shrink: 0; width: 40px; text-align: center; }

.ach-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.ach-title { font-size: .9rem; font-weight: 700; color: #e6edf3; margin: 0; }
.ach-desc  { font-size: .78rem; color: #8b949e; margin: 0; }

.ach-progress-bar {
  height: 5px; background: #21262d; border-radius: 3px; overflow: hidden; margin-top: 2px;
}
.ach-progress-fill { height: 100%; background: #2baa9e; border-radius: 3px; transition: width .4s; }

.ach-progress-txt { font-size: .72rem; color: #484f58; margin: 2px 0 0; }

.ach-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0;
}

.ach-reward { font-size: .82rem; font-weight: 700; color: #ffd700; white-space: nowrap; }

.ach-claimed-badge {
  font-size: .72rem; color: #2baa9e; font-weight: 700;
}

.ach-claim-btn {
  font-size: .78rem; font-weight: 700; padding: 5px 12px; border-radius: 8px;
  background: linear-gradient(135deg,#f0b429,#e07b00); color: #000; border: none; cursor: pointer;
  white-space: nowrap;
}
.ach-claim-btn:disabled { opacity: .5; cursor: default; }

/* ============================================================
   Event modal
   ============================================================ */

/* Gradient + watermark — cohérence avec les autres modales */
#eventModal .modal-box {
  background:
    linear-gradient(155deg, rgba(34,152,136,.15) 0%, rgba(34,152,136,.04) 40%, transparent 65%),
    #161b22;
  border-color: rgba(43,170,158,.32);
  animation: wlc-in .25s ease both;
  position: relative;
  overflow: hidden;
}
#eventModal .modal-box::after {
  content: '';
  position: absolute;
  right: -16px; bottom: -16px;
  width: 190px; height: 190px;
  background: url('/images/evenement.svg') no-repeat center / contain;
  filter: brightness(0) invert(1);
  opacity: .03;
  pointer-events: none;
  z-index: 0;
}

/* Desktop : les 2 événements côte à côte */
.event-box { max-width: 900px; width: 94vw; }

.events-container {
  display: flex; gap: 16px; align-items: flex-start;
  position: relative; z-index: 1;
}

.event-panel {
  flex: 1; min-width: 0;
  background: rgba(13,17,23,.7);
  border: 1px solid rgba(43,170,158,.18);
  border-radius: 14px;
  overflow: hidden;
}

/* Variante Creator Cup — style distinct */
.event-panel--cup {
  background: linear-gradient(165deg, rgba(46,16,86,.5) 0%, rgba(13,17,23,.75) 55%);
  border-color: rgba(139,92,246,.5);
  border-top: 2px solid #8b5cf6;
  box-shadow: 0 0 22px rgba(109,40,217,.18), inset 0 1px 0 rgba(168,85,247,.12);
}
.event-panel--cup .event-panel-header {
  background: linear-gradient(135deg, rgba(55,22,95,.55) 0%, rgba(22,27,34,.92) 60%);
  border-bottom-color: rgba(139,92,246,.22);
}
.event-panel--cup .event-panel-header > span:first-child {
  color: #c084fc;
  text-shadow: 0 0 14px rgba(168,85,247,.45);
  letter-spacing: .03em;
}
.event-panel--cup .event-panel-chevron { color: #a78bfa; opacity: 1; }
.event-panel--cup .event-info-item {
  background: rgba(30,10,60,.45);
  border-color: rgba(139,92,246,.18);
}
.event-panel--cup .event-info-val { color: #ddd6fe; }
.event-panel--cup .event-info-label { color: rgba(167,139,250,.5); }
.event-panel--cup .event-play-btn {
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
}
.event-panel--cup .event-play-btn:hover {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
}

.event-panel-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: rgba(22,27,34,.9);
  border: none; cursor: pointer;
  color: #e6edf3; font-size: .88rem; font-weight: 700; text-align: left;
  border-bottom: 1px solid rgba(43,170,158,.12);
  letter-spacing: .01em;
  transition: background .15s;
}
.event-panel-header:hover { background: rgba(28,34,48,.95); }
.event-panel-chevron {
  font-size: 1rem; color: #2baa9e; transition: transform .2s; display: inline-block;
  opacity: .7;
}
.event-panel:not(.collapsed) .event-panel-chevron { transform: rotate(90deg); }

.event-panel-body { padding: 14px; }
.event-panel.collapsed .event-panel-body { display: none; }

.event-modal-title {
  font-size: 1.15rem; font-weight: 800; color: #e6edf3;
  text-align: center; margin-bottom: 14px;
}

.event-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px;
}

.event-info-item {
  background: rgba(13,17,23,.6); border: 1px solid rgba(255,255,255,.06); border-radius: 10px;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 3px;
}

.event-info-label {
  font-size: .68rem; color: #4a5568; text-transform: uppercase; letter-spacing: .5px;
}

.event-info-val {
  font-size: .95rem; font-weight: 700; color: #e6edf3;
}

.event-timer { color: #f0b429; }
.event-best  { color: #2baa9e; }

/* Bouton Lancer — calqué sur #joinBtn / #createRoomBtn */
.event-play-btn {
  width: 100%; padding: 0; margin-bottom: 16px;
  background: linear-gradient(to right, #1a8f85 0%, #3cb5ac 100%);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 11px; cursor: pointer; overflow: hidden;
  position: relative;
  display: flex; align-items: center; gap: 0;
  color: #fff; font-family: inherit; text-align: left;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.25);
  transition: filter .15s, transform .1s;
}
.event-play-btn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.13) 0%, transparent 50%),
    repeating-linear-gradient(
      -62deg,
      transparent 0px, transparent 14px,
      rgba(255,255,255,.045) 14px, rgba(255,255,255,.045) 15px
    );
}
.event-play-btn:hover  { filter: brightness(1.08); }
.event-play-btn:active { transform: scale(.98); filter: brightness(.95); }
.event-play-btn:disabled {
  background: #21262d; border-color: #30363d;
  color: #484f58; box-shadow: none;
  filter: none; cursor: default;
}
.epb-icon {
  width: 58px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 0; z-index: 1;
}
.epb-svg {
  width: 32px; height: 32px; object-fit: contain;
  filter: brightness(0) invert(1);
}
.epb-label {
  flex: 1; z-index: 1;
  font-size: .92rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .07em;
}
.epb-chevron {
  color: rgba(255,255,255,.45); margin-right: 14px;
  font-size: .95rem; z-index: 1;
}

/* Event leaderboard */
.event-lb { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }

.event-lb-header {
  display: grid; grid-template-columns: 28px 1fr 90px;
  padding: 4px 10px; color: #8b949e; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .5px;
}

.event-lb-row {
  display: grid; grid-template-columns: 28px 1fr 90px;
  align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 8px;
  background: #0d1117; border: 1px solid #21262d;
  font-size: .85rem;
}

.event-lb-row.event-lb-me {
  border-color: #2baa9e; background: rgba(43,170,158,.08);
}

.event-lb-separator {
  text-align: center;
  color: #484f58;
  font-size: .65rem;
  letter-spacing: 3px;
  padding: 2px 0;
}

.event-lb-rank { font-weight: 800; color: #8b949e; text-align: center; font-size: .8rem; }
.event-lb-rank.gold   { color: #ffd700; }
.event-lb-rank.silver { color: #c0c0c0; }
.event-lb-rank.bronze { color: #cd7f32; }

.event-lb-name {
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.event-lb-name .dot { flex-shrink: 0; }

.event-lb-time {
  font-family: 'Consolas', monospace; font-size: .83rem;
  font-weight: 700; color: #2baa9e; text-align: right;
}

.event-lb-empty { color: #484f58; font-size: .84rem; padding: 12px 0; text-align: center; }

/* Rewards info block */
.event-rewards-info {
  background: #0d1117; border: 1px solid #21262d; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px;
}
.event-rewards-title {
  font-size: .7rem; color: #8b949e; text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 2px;
}
.event-reward-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem; color: #c9d1d9;
}
.event-reward-row span:first-child { font-weight: 600; }
.event-reward-row span:last-child  { font-weight: 700; color: #e6edf3; }
.event-reward-participation { border-top: 1px solid #21262d; padding-top: 6px; margin-top: 2px; color: #8b949e; }
.event-reward-participation span:last-child { color: #8b949e; }

/* ── Vote modal (post test-race) ───────────────────────────── */
.vote-box {
  width: min(92vw, 420px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.vote-box .vote-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #7c3aed;
  margin-bottom: 2px;
}

.vote-time {
  font-size: .9rem;
  color: #c9d1d9;
}

.vote-question {
  font-size: .95rem;
  color: #e6edf3;
}

.vote-hint {
  font-size: .75rem;
  color: #8b949e;
  margin-top: -4px;
}

.vote-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.vote-btn {
  padding: 10px 20px;
  border: 1px solid #3b434d;
  border-radius: 6px;
  background: transparent;
  color: #c9d1d9;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, text-shadow .15s, transform .1s;
}
.vote-btn:active { transform: scale(.96); }
.vote-btn.yes:hover {
  background: rgba(43,170,158,.07); border-color: #2baa9e; color: #2baa9e;
  text-shadow: 0 0 8px #2baa9e66; box-shadow: 0 0 14px #2baa9e33;
}
.vote-btn.no:hover {
  background: rgba(231,76,60,.07); border-color: #e74c3c; color: #e74c3c;
  box-shadow: 0 0 14px #e74c3c33;
}
.vote-btn.skip       { font-size: .8rem; font-weight: 400; color: #8b949e; }
.vote-btn.skip:hover { color: #c9d1d9; border-color: #8b949e; }

/* ── Beta circuits modal ───────────────────────────────────── */
.beta-box {
  width: min(92vw, 560px);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.beta-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #7c3aed;
  margin-bottom: 4px;
}

.beta-subtitle {
  font-size: .82rem;
  color: #8b949e;
  margin-bottom: 14px;
}

.beta-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.beta-loading, .beta-empty {
  color: #8b949e;
  font-size: .85rem;
  text-align: center;
  padding: 20px 0;
}

.beta-circuit-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 12px 14px;
}

.bcc-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.bcc-name {
  font-size: .95rem;
  font-weight: 700;
  color: #e6edf3;
}

.bcc-author {
  font-size: .75rem;
  color: #8b949e;
}

.bcc-votes {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: .8rem;
  color: #8b949e;
  margin-bottom: 10px;
}

.bcc-yes  { color: #2baa9e; font-weight: 600; }
.bcc-no   { color: #e74c3c; font-weight: 600; }
.bcc-myvote { font-style: italic; }

.bcc-actions {
  display: flex;
  gap: 8px;
}

.bcc-btn {
  padding: 6px 12px;
  border: 1px solid #30363d;
  border-radius: 7px;
  background: #21262d;
  color: #c9d1d9;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.bcc-btn:hover { background: #2d333b; border-color: #484f58; }
.bcc-btn.vote-yes.active { background: rgba(43,170,158,.2); border-color: #2baa9e; color: #2baa9e; }
.bcc-btn.vote-no.active  { background: rgba(231,76,60,.15);  border-color: #e74c3c; color: #e74c3c; }
.bcc-btn.try-btn { background: #7c3aed22; border-color: #7c3aed; color: #a78bfa; }
.bcc-btn.try-btn:hover { background: #7c3aed44; }

/* ── Admin circuits panel ──────────────────────────────────── */
.admin-circuits-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-circuit-card {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 12px 14px;
}

.admin-circuit-logo-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid #21262d;
}
.admin-circuit-logo-row:last-child { border-bottom: none; }
.acl-name { font-size: .82rem; color: #e6edf3; min-width: 100px; flex-shrink: 0; }
.acl-input {
  flex: 1; background: #0d1117; border: 1px solid #30363d; border-radius: 6px;
  color: #e6edf3; font-size: .78rem; padding: 5px 8px;
}
.acl-save-btn {
  background: #2baa9e; color: #fff; border: none; border-radius: 6px;
  padding: 5px 12px; font-size: .78rem; cursor: pointer; white-space: nowrap;
  flex-shrink: 0;
}
.acl-save-btn:hover { background: #229990; }

.acc-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.acc-name {
  font-size: .95rem;
  font-weight: 700;
  color: #e6edf3;
}

.acc-author {
  font-size: .75rem;
  color: #8b949e;
}

.acc-votes {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  font-size: .8rem;
}

.acc-status {
  padding: 1px 7px;
  border-radius: 10px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.acc-status-pending  { background: rgba(241,196,15,.15);  color: #f1c40f; }
.acc-status-approved { background: rgba(43,170,158,.15);  color: #2baa9e; }
.acc-status-rejected { background: rgba(231,76,60,.12);   color: #e74c3c; }

.acc-vote-yes { color: #2baa9e; font-weight: 600; }
.acc-vote-no  { color: #e74c3c; font-weight: 600; }

.acc-actions {
  display: flex;
  gap: 8px;
}

.acc-btn {
  padding: 5px 12px;
  border: 1px solid #30363d;
  border-radius: 7px;
  background: #21262d;
  color: #c9d1d9;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.acc-btn.approve:hover { background: rgba(43,170,158,.2); border-color: #2baa9e; color: #2baa9e; }
.acc-btn.reject:hover  { background: rgba(231,76,60,.15);  border-color: #e74c3c; color: #e74c3c; }
.acc-btn.try:hover     { background: #7c3aed22; border-color: #7c3aed; color: #a78bfa; }
.acc-btn.rename:hover  { background: rgba(245,158,11,.15); border-color: #f59e0b; color: #f59e0b; }
.acc-rename-form {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 10px; background: #161b22; border-radius: 8px; border: 1px solid #30363d;
}
.acc-rename-input { flex: 1; min-width: 140px; padding: 5px 8px; font-size: .84rem; }
.acc-rename-cancel {
  padding: 4px 8px; border: none; background: transparent; color: #8b949e; font-size: .85rem; cursor: pointer;
}
.acc-rename-cancel:hover { color: #e74c3c; }

@media (max-width: 960px) {
  .login-box-wide {
    width: min(96vw, 700px);
    padding: 22px 24px;
  }

  .create-layout {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   Mobile / PWA
   ═══════════════════════════════════════════════════════════ */

/* ── D-pad ───────────────────────────────────────────────── */
#mobileControls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px 20px 12px;
  pointer-events: none;
  z-index: 600;
  touch-action: none;
}

@media (pointer: fine) {
  #mobileControls { display: none !important; }
}

.dpad-cluster {
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

#dpadAccel { flex-direction: column; }
#dpadSteer { min-width: 0; }

.dpad-btn {
  width: 96px;
  height: 96px;
  background: rgba(13,17,23,0.72);
  border: 2px solid rgba(43,170,158,0.35);
  border-radius: 20px;
  color: rgba(230,237,243,0.75);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: none;
  backdrop-filter: blur(6px);
  transition: background .08s, border-color .08s;
}
.dpad-btn svg {
  width: 52px; height: 52px;
  pointer-events: none;
}

.dpad-btn.dpad-stack { height: 74px; }

.dpad-btn.pressed,
.dpad-btn:active {
  background: rgba(43,170,158,0.28);
  border-color: #2baa9e;
  color: #e6edf3;
}

.dpad-steer-bar {
  position: relative;
  width: 196px;
  height: 122px;
  display: grid;
  grid-template-columns: 1fr 46px 1fr;
  align-items: center;
  background: rgba(13,17,23,0.72);
  border: 2px solid rgba(43,170,158,0.35);
  border-radius: 24px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: none;
  backdrop-filter: blur(6px);
  transition: background .08s, border-color .08s, box-shadow .08s;
}

.dpad-steer-bar.active,
.dpad-steer-bar.steering-left,
.dpad-steer-bar.steering-right {
  border-color: #2baa9e;
  box-shadow: inset 0 0 0 1px rgba(43,170,158,0.16);
}

.dpad-steer-side,
.dpad-steer-center {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dpad-steer-side svg {
  width: 52px;
  height: 52px;
  opacity: 0.9;
  pointer-events: none;
}

.dpad-steer-center::before {
  content: '';
  width: 2px;
  height: 48px;
  border-radius: 999px;
  background: rgba(230,237,243,0.2);
}

.dpad-steer-bar.steering-left .dpad-steer-side-left {
  background: rgba(43,170,158,0.24);
}

.dpad-steer-bar.steering-right .dpad-steer-side-right {
  background: rgba(43,170,158,0.24);
}

.dpad-steer-thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(230,237,243,0.16);
  border: 1px solid rgba(230,237,243,0.18);
  box-shadow: 0 6px 16px rgba(0,0,0,0.28);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left .06s linear, background .08s, border-color .08s;
}

.dpad-steer-bar.active .dpad-steer-thumb,
.dpad-steer-bar.steering-left .dpad-steer-thumb,
.dpad-steer-bar.steering-right .dpad-steer-thumb {
  background: rgba(43,170,158,0.34);
  border-color: rgba(43,170,158,0.7);
}

.dpad-emotes {
  display: flex; gap: 6px;
  pointer-events: auto;
  align-self: flex-end;
  padding-bottom: 4px;
}

.emote-dpad-btn {
  width: 52px; height: 52px;
  background: rgba(13,17,23,0.72);
  border: 2px solid rgba(43,170,158,0.25);
  border-radius: 14px;
  color: rgba(230,237,243,0.85);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  user-select: none; touch-action: none;
  backdrop-filter: blur(6px);
  transition: background .08s, border-color .08s, transform .1s;
}
.emote-dpad-btn:active {
  background: rgba(43,170,158,0.22);
  border-color: #2baa9e;
  transform: scale(0.92);
}
.mobile-camera-btn { font-size: .85rem; font-weight: 700; letter-spacing: -.02em; }
.mobile-camera-btn.active {
  background: rgba(60,130,255,0.22);
  border-color: rgba(60,130,255,0.6);
  color: #6ab0ff;
}

/* ── Overlay portrait (mobile paysage bloqué) ──────────────── */
#portraitOverlay {
  display: none;
  position: fixed; inset: 0; z-index: 99999;
  background: #0d1117;
  align-items: center; justify-content: center;
}
.portrait-overlay-inner {
  text-align: center; color: #e6edf3; padding: 2rem;
}
.portrait-icon {
  font-size: 4rem; margin-bottom: 1rem;
  animation: tilt 1.4s ease-in-out infinite alternate;
}
.portrait-overlay-inner p { margin: .4rem 0; font-size: 1.2rem; font-weight: 700; }
.portrait-sub { font-size: .9rem !important; font-weight: 400 !important; color: #8b949e; }
@keyframes tilt {
  from { transform: rotate(0deg); }
  to   { transform: rotate(90deg); }
}
@media (pointer: coarse) and (orientation: landscape) {
  #portraitOverlay { display: flex; }
}

/* ═══════════════════════════════════════════════════════════
   @media (pointer: coarse) — tout le reste du mobile
   ═══════════════════════════════════════════════════════════ */
@media (pointer: coarse) {

  /* ── Body / html ─────────────────────────────────────── */
  /* Double-verrou overflow sur html + body :
     - élimine les scrollbars horizontaux et verticaux sur mobile
     - évite que body réagisse aux changements dvh (URL bar iOS ↑↓)
     - position:fixed reste ancré au viewport (non affecté par overflow:hidden)
     Pas de height: pas de reflow quand dvh change (URL bar iOS qui se cache) */
  html { overflow: hidden; }
  body { overflow: hidden; display: block; }

  /* ── Inputs : font-size ≥ 1rem pour éviter le zoom iOS ─ */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input,
  textarea,
  select {
    font-size: 1rem !important;
  }

  /* ── Touch targets : hauteur minimum 44px ────────────── */
  .track-sort-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .mobile-nav-btn { min-height: 44px; }
  .auth-submit    { min-height: 48px; }
  .auth-guest     { min-height: 44px; }
  .auth-tab       { min-height: 44px; }

  /* ── Écran login ─────────────────────────────────────── */
  #loginScreen {
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0;
  }

  .login-box-wide,
  .login-box {
    width: 100%;
    max-width: 100%;
    padding: 14px 14px calc(72px + env(safe-area-inset-bottom, 8px));
    box-sizing: border-box;
    border-radius: 0;
    border: none;
    box-shadow: none;
    min-height: 100dvh;
  }

  /* ── Momentum scroll + overscroll sur les conteneurs ─── */
  .profile-panel-content,
  #sidebar.race-drawer-mode,
  .track-grid,
  .social-messages-list,
  .social-conversations-list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  #joinView {
    width: 100%; max-width: 100%;
    border-radius: 0; border: none; box-shadow: none;
    min-height: 100dvh;
    padding: 0 !important; /* écrase le padding générique de .login-box */
    overflow: hidden;
  }
  .join-brand {
    padding: 18px 16px 16px;
    flex-direction: row; align-items: center; gap: 14px;
  }
  .join-brand .home-brand-title { flex-direction: column; align-items: flex-start; gap: 0; }
  .join-brand .hbt-mini  { font-size: 1.35rem; }
  .join-brand .hbt-racer { font-size: 1.35rem; }
  .join-brand .hbt-online { display: block; font-size: .6rem; }
  .join-body {
    padding: 16px 14px calc(110px + env(safe-area-inset-bottom, 16px));
    gap: 8px;
  }

  /* ── Header compact ──────────────────────────────────── */
  .home-header {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #21262d;
  }

  .home-brand { gap: 8px; }

  .home-logo-svg { width: 32px; height: 32px; border-radius: 7px; }

  .home-brand-title { flex-direction: row; align-items: baseline; gap: 5px; }
  .hbt-mini  { font-size: 1.05rem; }
  .hbt-racer { font-size: 1.05rem; }
  .hbt-online { display: none; }

  .subtitle { display: none; }

  .user-bar { display: none; }

  /* ── Mise en page create ─────────────────────────────── */
  .create-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Sélecteur de circuit en premier, puis prévisualisation */
  .create-controls { order: 1; }
  .track-preview-panel { order: 2; }

  .track-summary { display: none; }

  #trackPreviewCanvas {
    width: 100%;
    max-height: 170px;
    height: auto;
    object-fit: cover;
  }

  .preview-caption { margin-top: 8px; }

  /* Boutons Créer + Modes Fun : 2 colonnes sur mobile */
  .create-btns-row { flex-direction: row; }
  #createRoomBtn { flex: 1; }
  .fun-mode-wrap  { flex: 1; }
  /* Icônes plus compactes + sous-titre masqué pour tenir dans 50% de largeur */
  .crb-icon { width: 44px; }
  .crb-svg-img { width: 30px; height: 30px; }
  .fmb-icon { width: 40px; }
  .fmb-img  { width: 26px; height: 26px; }
  .fmb-caret { margin-right: 8px; }

  /* Leaderboard inline : hauteur limitée + scroll interne */
  #homeLeaderboard {
    max-height: 185px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #30363d transparent;
  }

  .code-row input { font-size: 1rem; }

  .track-select-box { width: 100vw; height: 100dvh; border-radius: 0; padding: 20px 16px 16px; }

  /* ── Footer links : cachés sur mobile ────────────────── */
  .home-footer-links { display: none; }

  /* ── Bottom nav ──────────────────────────────────────── */
  .mobile-bottom-nav {
    display: flex;
    flex-direction: column;       /* subrow + btns empilés */
    position: fixed;
    bottom: 0; left: 0; right: 0;
    overflow: hidden;             /* clip tout débordement potentiel */
    background: #161b22;
    border-top: 1px solid #30363d;
    z-index: 201;
    border-radius: 0;
    transition:
      border-radius .3s cubic-bezier(.34,1.1,.64,1),
      border-top-color .25s ease;
  }
  .mobile-bottom-nav.drawer-open {
    border-radius: 14px 14px 0 0;
    border-top-color: rgba(34,152,136,.5);
  }
  /* En mode app installée (standalone) : marge supplémentaire en bas */
  @media (display-mode: standalone) {
    .mobile-nav-btns { padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px); }
    #mobileControls { padding-bottom: 34px; }
  }

  /* Rangée des boutons principaux */
  .mobile-nav-btns {
    display: flex;
    width: 100%;
    min-width: 0;                     /* empêche le débordement horizontal */
    box-sizing: border-box;
    padding: 6px 0 env(safe-area-inset-bottom, 10px);
  }

  .mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    color: #8b949e;
    cursor: pointer;
    padding: 6px 4px;
    font-size: inherit;
    transition: color .15s;
    position: relative;
  }
  .mobile-nav-btn:active,
  .mobile-nav-btn.mobile-nav-active { color: #2baa9e; }

  .mobile-nav-icon  { font-size: 1.3rem; line-height: 1; }
  .nav-svg-icon { width: 29px; height: 29px; display: block; object-fit: contain; }
  .mobile-nav-drawer-caret {
    font-size: .55rem; position: absolute; bottom: 2px; right: 50%;
    transform: translateX(50%); opacity: .5;
    transition: transform .25s cubic-bezier(.34,1.2,.64,1), opacity .2s;
  }
  #mobileNavEditor.drawer-open .mobile-nav-drawer-caret { transform: translateX(50%) rotate(180deg); opacity: .9; }
  .mobile-nav-label { font-size: .75rem; font-weight: 600; letter-spacing: .02em; display: flex; flex-direction: column; align-items: center; gap: 1px; }
  .mnpl-tag { font-size: .65rem; font-weight: 800; color: #2baa9e; -webkit-text-fill-color: #2baa9e; letter-spacing: .03em; line-height: 1; }

  .mobile-nav-btn.mobile-nav-locked { opacity: .35; }

  /* ── Sous-rangée Éditeur (surgit dans la nav — grid trick) ─ */
  .mobile-nav-subrow {
    display: grid;
    grid-template-rows: 0fr;          /* hauteur réelle, pas de max-height */
    min-width: 0;                     /* empêche le débordement horizontal */
    width: 100%;
    overflow: hidden;                 /* clip horizontal */
    transition:
      grid-template-rows .3s ease-out,
      opacity .2s ease;
    opacity: 0;
  }
  .mobile-nav-subrow.open {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  /* Inner wrapper : c'est lui qui cache le contenu quand grid = 0fr */
  .mobile-nav-subrow-inner {
    overflow: hidden;
    min-height: 0;
    display: flex;
    gap: 8px;
    padding: 0 10px;
    box-sizing: border-box;
    width: 100%;
    border-bottom: 1px solid transparent;
    transition:
      padding .3s ease-out,
      border-bottom-color .25s ease;
  }
  .mobile-nav-subrow.open .mobile-nav-subrow-inner {
    padding: 10px 10px 8px;
    border-bottom-color: rgba(255,255,255,.07);
  }

  /* Tuiles (items) — stagger d'entrée */
  .mobile-nav-subrow .med-item {
    min-width: 0;
    opacity: 0;
    transform: translateY(10px) scale(0.86);
    transition:
      opacity .22s ease,
      transform .3s cubic-bezier(.34,1.4,.64,1);
    transition-delay: 0s;
  }
  .mobile-nav-subrow.open .med-item:nth-child(1) {
    opacity: 1; transform: none;
    transition-delay: .09s;
  }
  .mobile-nav-subrow.open .med-item:nth-child(2) {
    opacity: 1; transform: none;
    transition-delay: .17s;
  }

  .med-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    padding: 14px 8px;
    border: none; border-radius: 10px;
    font-size: .82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: #fff; cursor: pointer; text-decoration: none;
    position: relative; overflow: hidden;
    box-shadow: inset 4px 0 0 rgba(255,255,255,.22);
    transition: filter .15s, transform .15s;
  }
  .med-item::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to bottom, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 45%),
      repeating-linear-gradient(-62deg, transparent 0px, transparent 14px, rgba(255,255,255,.04) 14px, rgba(255,255,255,.04) 15px);
  }
  .med-item:hover { filter: brightness(1.12); }
  .med-item:active { filter: brightness(.88); transform: scale(.97) !important; }

  .med-item-teal   { background: linear-gradient(to right, #1e9088 0%, #42bab2 100%); }
  .med-item-purple { background: linear-gradient(to right, #6840a0 0%, #9668c8 100%); }

  .med-icon { font-size: 1.6rem; line-height: 1; }
  .med-icon img { width: 32px; height: 32px; object-fit: contain; }

  /* Overlay au-dessus de la nav (ferme le sous-menu) */
  .med-overlay {
    display: none;
    position: fixed; inset: 0;
    bottom: 60px;             /* ne couvre pas la nav */
    background: rgba(0,0,0,.2);
    z-index: 200;
  }
  .med-overlay.open { display: block; }

  /* Barre utilitaire mobile (classement, admin…) — premier enfant du nav fixe */
  .mobile-admin-bar {
    display: flex;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid #21262d;
  }

  /* Bouton Classement — discret mais identifiable */
  .mobile-lb-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    gap: 7px;
    padding: 7px 10px;
    background: rgba(43,170,158,.06);
    border: 1px solid rgba(43,170,158,.2);
    border-radius: 10px;
    color: #2baa9e;
    font-size: .78rem; font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .mobile-lb-btn:active { background: rgba(43,170,158,.13); border-color: rgba(43,170,158,.4); }
  .mobile-lb-btn .nav-svg-icon {
    filter: drop-shadow(0 0 3px rgba(43,170,158,.35));
  }

  /* Toggle langue dans la barre admin mobile — poussé à droite */
  .mobile-lang-toggle { margin-left: auto; flex-shrink: 0; }

  /* Bouton Admin — compact, ambre */
  .mobile-admin-btn {
    flex: 0 0 auto;
    padding: 7px 12px;
    background: #0d1117; border: 1px solid #30363d;
    border-radius: 10px; color: #8b949e;
    font-size: .72rem; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    text-decoration: none;
  }
  .mobile-admin-btn.admin-btn { color: #f59e0b; border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,.04); }

  /* Pastille "récompense dispo" */
  .mobile-nav-btn .nav-badge {
    position: absolute; top: 4px; right: calc(50% - 14px);
    width: 8px; height: 8px; border-radius: 50%;
    background: #f59e0b; border: 2px solid #161b22;
  }
  .mobile-nav-btn.mobile-nav-reward-active {
    animation: none;
    font-weight: 700;
  }
  /* Récompense quotidienne mobile — jaune statique */
  #mobileNavDaily.mobile-nav-reward-active {
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.38);
    background: rgba(255, 215, 0, 0.09);
    box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.12);
  }
  @keyframes nav-event-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(43,170,158,0); }
    50%       { box-shadow: 0 0 0 3px rgba(43,170,158,.14); }
  }
  /* Événement mobile — teal pulse + glow icône */
  #mobileNavEvent.mobile-nav-reward-active {
    color: #2baa9e;
    background: rgba(43,170,158,.10);
    border-radius: 10px;
    animation: nav-event-pulse 2s ease-in-out infinite;
  }
  #mobileNavEvent.mobile-nav-reward-active .nav-svg-icon {
    filter: drop-shadow(0 0 4px rgba(43,170,158,.7));
  }
  /* Boutique mobile — même traitement qu'Événement, couleur or */
  @keyframes nav-shop-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
    50%       { box-shadow: 0 0 0 3px rgba(255,215,0,.14); }
  }
  #mobileNavShop.mobile-nav-reward-active {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.09);
    border-radius: 10px;
    animation: nav-shop-pulse 2s ease-in-out infinite;
  }
  #mobileNavShop.mobile-nav-reward-active .nav-svg-icon {
    filter: drop-shadow(0 0 4px rgba(255,215,0,.7));
  }

  /* ── Profil ──────────────────────────────────────────── */
  .profile-box {
    overflow: hidden !important;
    height: calc(100dvh - 48px);
    max-height: calc(100dvh - 48px);
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    padding: 14px 12px 12px;
    margin: 24px 0;
    border-radius: 18px 18px 0 0;
  }

  .profile-header { flex-wrap: wrap; gap: 8px; }
  .profile-balance { flex-wrap: wrap; gap: 6px; }

  .profile-tabs {
    overflow-x: visible;
    flex-wrap: nowrap;
  }
  .profile-tab {
    flex: 1; flex-shrink: 1;
    font-size: .68rem; padding: 8px 4px;
    min-height: 44px; white-space: normal;
    text-align: center; line-height: 1.25;
    display: flex; align-items: center; justify-content: center;
  }

  .profile-actions {
    position: sticky; bottom: 0;
    background: #161b22;
    padding: 10px 0 4px; margin-top: 8px;
    border-top: 1px solid #21262d; z-index: 5;
  }

  /* ── Vue course ──────────────────────────────────────── */
  #gameContainer { flex-direction: column; align-items: center; gap: 0; }

  #gameCanvas {
    width: min(100vw, calc(100dvh - 218px - env(safe-area-inset-bottom, 0px))) !important;
    height: min(100vw, calc(100dvh - 218px - env(safe-area-inset-bottom, 0px))) !important;
    border-radius: 0;
  }

  /* Bandeau HUD : collé sous le canvas, géré par JS (display none/flex) */
  .mobile-race-hud {
    position: relative;
    width: 100%;
    height: 48px;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: rgba(13,17,23,0.92);
    border-top: 1px solid #30363d;
    pointer-events: none;
  }
  .mobile-hud-lap {
    font-size: .88rem; font-weight: 700; color: #e6edf3;
    min-width: 90px;
  }
  .mobile-hud-speed {
    font-size: 1.1rem; font-weight: 800; color: #2baa9e;
    text-align: center;
  }
  .mobile-hud-unit { font-size: .65rem; font-weight: 600; color: #8b949e; }
  .mobile-hud-timer {
    font-family: 'Consolas', monospace;
    font-size: .9rem; font-weight: 700; color: #e6edf3;
    min-width: 90px; text-align: right;
  }

  /* Barre d'emotes mobile (sous le HUD vitesse) */
  .mobile-emote-bar {
    width: 100%; height: 50px;
    align-items: center; justify-content: center; gap: 10px;
    padding: 5px 16px;
    background: rgba(13,17,23,0.92);
    border-top: 1px solid #21262d;
  }
  .mobile-emote-bar .emote-dpad-btn {
    width: 40px; height: 40px;
    font-size: 1.3rem; border-radius: 12px;
  }

  /* Leaderboard TA mobile — au-dessus de la flèche accélération (controls = 176px) */
  #mobileSpecTaBoard.spec-ta-visible {
    display: block;
    position: fixed;
    bottom: 180px; left: 0; right: 0;
    z-index: 150; /* inférieur aux contrôles tactiles (600) */
    background: rgba(13,17,23,0.88);
    border-top: 1px solid rgba(43,170,158,0.28);
    border-bottom: 1px solid rgba(43,170,158,0.12);
    padding: 4px 12px 5px;
    backdrop-filter: blur(10px);
    max-height: 130px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Cacher le HUD desktop et le compteur canvas sur mobile */
  #hud { display: none; }

  /* Sidebar normale (lobby / fin de course) */
  #sidebar {
    width: 100%; max-width: none;
    border-radius: 0; border-left: none; border-right: none;
    margin-bottom: 130px;
    transition: none;
  }

  /* Sidebar en mode drawer */
  #sidebar.race-drawer-mode {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-height: 78vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 20px 20px 0 0;
    border: 1px solid rgba(43,170,158,.22);
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 16px);
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
    z-index: 700;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
  }
  #sidebar.race-drawer-mode.race-drawer-open {
    transform: translateY(0);
  }

  /* Backdrop */
  #raceDrawerBackdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 650;
  }
  #raceDrawerBackdrop.visible { display: block; }

  /* Bouton ☰ toggle */
  .race-menu-toggle {
    position: fixed;
    top: 12px; left: 12px;
    z-index: 680;
    width: 42px; height: 42px;
    background: rgba(22,27,34,0.88);
    border: 1px solid #30363d;
    border-radius: 12px;
    color: #e6edf3;
    font-size: 1.15rem;
    align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
  .race-menu-toggle:active { background: #21262d; }

  #volumeControl { display: none; }

  /* ── Modals ──────────────────────────────────────────── */
  .modal-box { width: min(96vw, 480px); max-height: 88vh; overflow-y: auto; }
  .welcome-splash-box { padding: 28px 16px; }
  .welcome-title { font-size: 1.15rem; }
  .welcome-options { gap: 6px; }
  .welcome-option-btn { height: 56px; }
  .welcome-option-primary { height: 74px; }
  .welcome-option-primary .welcome-opt-icon { width: 64px; }
  .welcome-option-primary .welcome-opt-icon i { font-size: 1.75rem; }
  .welcome-option-primary .welcome-opt-icon img { width: 42px; height: 42px; }
  .welcome-option-primary .welcome-opt-text { padding: 14px 16px; gap: 4px; }
  .welcome-option-primary .welcome-opt-text strong { font-size: .9rem; }
  .welcome-option-primary .welcome-opt-text span { font-size: .75rem; }
  .welcome-opt-icon { width: 50px; padding: 10px 0; }
  .welcome-opt-icon svg { width: 26px; height: 26px; }
  .welcome-opt-icon i { font-size: 1.2rem; }
  .welcome-opt-icon img { width: 32px; height: 32px; }
  .welcome-opt-text { padding: 10px 12px; }
  .welcome-opt-text strong { font-size: .78rem; }
  .welcome-opt-text span { font-size: .68rem; }

  /* ── Modals profil public + social : bottom sheet ───── */
  #publicProfileModal { align-items: flex-end; }
  .pub-profile-box {
    width: 100vw; max-width: 100vw;
    max-height: 90dvh; border-radius: 22px 22px 0 0;
    padding: 20px 16px 20px; margin: 0;
  }
  #socialModal { align-items: flex-end; }
  .social-box {
    width: calc(100vw - 20px); max-width: calc(100vw - 20px);
    height: 88dvh; max-height: 88dvh;
    border-radius: 18px 18px 0 0;
    padding: 20px 14px 16px;
    margin: 0 10px;
    overflow: hidden;
  }
  .social-tabs { gap: 6px; margin-bottom: 10px; }
  .social-tab  { padding: 10px 8px; font-size: .82rem; }

  /* Conversations : items plus grands, faciles à taper */
  .social-conversation-item { padding: 14px 12px; font-size: .88rem; }
  /* Le span droit doit se contraindre pour que text-overflow:ellipsis fonctionne */
  .social-conversation-item > span:last-child {
    min-width: 0; flex-shrink: 1; overflow: hidden;
    justify-content: flex-end;
  }
  .social-conversation-item small { max-width: 100%; font-size: .76rem; }

  /* Friends : touch targets plus grands */
  .social-friend-item { padding: 12px 14px; min-height: 52px; }
  .social-chat-btn { padding: 8px 14px; font-size: .88rem; }
  .social-friends-counter { font-size: .85rem; padding-bottom: 12px; }

  /* Chat : une vue à la fois */
  .social-chat-shell { flex-direction: column; gap: 0; }

  .social-conversations-column {
    width: 100%; flex: 1; border-radius: 12px;
    overflow-x: hidden; /* empêche le scroll horizontal */
    box-sizing: border-box;
  }
  /* La grille et chaque item ne dépassent jamais la largeur du conteneur */
  .social-conversations-list {
    width: 100%; overflow-x: hidden;
  }
  .social-conversation-item {
    width: 100%; box-sizing: border-box; overflow: hidden;
  }
  /* Le span gauche (nom) ne pousse pas — le span droit (preview) se tronque */
  .social-conversation-item > span:first-child {
    flex-shrink: 0; max-width: 55%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .social-conversation-item > span:last-child {
    flex: 1; min-width: 0; overflow: hidden; justify-content: flex-end;
  }
  .social-conversation-item small {
    display: block; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
  }
  /* par défaut : liste conversations visible, panel messages caché */
  .social-chat-shell .social-messages-column { display: none; }

  /* quand chat-open : inverser */
  .social-chat-shell.chat-open .social-conversations-column { display: none; }
  .social-chat-shell.chat-open .social-messages-column {
    display: flex; flex: 1; min-height: 0;
  }

  /* Bouton retour visible sur mobile */
  .social-chat-back-btn { display: inline-flex; }

  /* Agrandir la zone de saisie */
  .social-message-row input { padding: 14px 16px; font-size: .95rem; }
  .social-message-row button { padding: 10px 16px; }

  /* ── TA live overlay : remplacé par #mobileSpecTaBoard sur mobile ── */
  .ta-live-overlay { display: none !important; }

  /* Sidebar football mobile : off-screen via transform (race-drawer-mode),
     même comportement que la course normale. Aucun display:none nécessaire. */

  /* ── Football score HUD : visible sur mobile (score canvas trop petit), centré au-dessus du D-pad ── */
  .football-score-hud {
    display: flex !important;
    position: fixed; bottom: 184px; top: auto; left: 50%; transform: translateX(-50%);
    background: rgba(13,17,23,.92); border: 1px solid rgba(43,170,158,.35);
    border-radius: 12px; padding: 5px 16px; z-index: 300;
    align-items: center;
  }
  .football-score-hud.hidden { display: none !important; }
}

/* Fallback max-width pour appareils ne reportant pas pointer:coarse */
@media (max-width: 900px) {
  #volumeControl { display: none; }
}

/* Mobile : événements en accordion vertical */
@media (pointer: coarse) {
  .events-container { flex-direction: column; gap: 10px; }
  .event-box        { max-width: 100%; }
}

/* Tablette (iPad) : boutons D-pad plus grands */
@media (pointer: coarse) and (min-width: 600px) {
  .dpad-btn            { width: 130px; height: 130px; font-size: 2.6rem; border-radius: 26px; }
  .dpad-btn.dpad-stack { height: 100px; }
  .dpad-steer-bar      { width: 248px; height: 150px; grid-template-columns: 1fr 58px 1fr; border-radius: 30px; }
  .dpad-steer-side svg { width: 64px; height: 64px; }
  .dpad-steer-thumb    { width: 58px; height: 58px; }
  .emote-dpad-btn      { width: 70px; height: 70px; font-size: 1.9rem; border-radius: 18px; }
  /* Contrôles plus hauts sur tablette (dpad-stack 100px × 2 + gap + padding = 228px) */
  #mobileSpecTaBoard.spec-ta-visible { bottom: 234px; }
}

/* ── Editor return sidebar button ───────────────────────── */
.editor-return-btn {
  display: block; width: 100%; text-align: center;
  padding: 9px; margin-bottom: 10px;
  background: #1d3a2e; color: #5cd68c;
  border: 1px solid #2baa9e; border-radius: 8px;
  font-size: .84rem; font-weight: 700; text-decoration: none;
  transition: background .15s;
}
.editor-return-btn:hover { background: #1e4433; }
.editor-return-btn.hidden { display: none; }

/* ── Editor return banner ────────────────────────────────── */
#editorReturnBanner {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: #161b22; border: 1px solid #30363d; border-radius: 14px;
  padding: 12px 20px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,.5); z-index: 9999;
  font-size: .88rem; color: #c9d1d9;
}
#editorReturnBanner a {
  background: #1d3a2e; color: #5cd68c;
  padding: 7px 14px; border-radius: 50px;
  font-weight: 700; font-size: .82rem; text-decoration: none;
  white-space: nowrap;
}
#editorReturnBanner a:hover { background: #1e4433; }

/* ── PWA : bannière mise à jour ──────────────────────────── */
#pwaUpdateBanner {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #1c2a1e;
  border-bottom: 2px solid #2baa9e;
  color: #e6edf3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  padding-top: calc(9px + env(safe-area-inset-top, 0px));
  font-size: .84rem;
  z-index: 99999;
}
#pwaUpdateBanner button {
  background: #2baa9e; color: #fff;
  border: none; border-radius: 6px;
  padding: 5px 14px; font-size: .82rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}

/* ── PWA : bannière installation ─────────────────────────── */
#pwaInstallBanner {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  left: 12px; right: 12px;
  background: #161b22;
  border: 1px solid #2baa9e55;
  border-radius: 14px;
  color: #e6edf3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  z-index: 9998;
  box-shadow: 0 4px 24px #0009;
  animation: pwaSlideUp .3s ease;
}
@keyframes pwaSlideUp {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.pwa-install-icon { font-size: 1.6rem; line-height: 1; }
.pwa-install-text { flex: 1; min-width: 0; }
.pwa-install-text strong { display: block; font-size: .86rem; }
.pwa-install-text span   { font-size: .74rem; color: #8b949e; }
.pwa-install-actions {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 4px; flex-shrink: 0;
}
.pwa-install-btn {
  background: #2baa9e; color: #fff;
  border: none; border-radius: 8px;
  padding: 7px 13px; font-size: .82rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.pwa-install-close {
  background: none; border: none; color: #8b949e;
  font-size: .74rem; cursor: pointer; padding: 3px;
  text-align: center;
}
.pwa-install-close:hover { color: #c9d1d9; }

/* ── PWA : modal iOS instructions ───────────────────────── */
#iosInstallModal .modal-box { max-width: 330px; }
.ios-install-steps { list-style: none; margin: 14px 0 0; }
.ios-install-steps li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; font-size: .86rem; line-height: 1.45;
  border-bottom: 1px solid #21262d;
}
.ios-install-steps li:last-child { border-bottom: none; }
.ios-step-num {
  width: 22px; height: 22px; background: #2baa9e;
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: .72rem; font-weight: 700;
  flex-shrink: 0; margin-top: 2px;
}

/* ── Push notification banner ─────────────────────────────── */
#pushBanner {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #161b22; border: 1px solid #30363d; border-radius: 14px;
  padding: 12px 14px; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,.5); z-index: 9999;
  max-width: 380px; width: calc(100vw - 32px);
  opacity: 0; transition: opacity .25s, transform .25s;
}
#pushBanner.push-banner-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.push-banner-text { font-size: .82rem; color: #c9d1d9; flex: 1; line-height: 1.3; }
.push-banner-yes {
  background: #1d3a2e; color: #5cd68c; border: none; border-radius: 50px;
  padding: 7px 14px; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.push-banner-yes:hover { background: #1e4433; }
.push-banner-no {
  background: transparent; color: #8b949e; border: none;
  padding: 7px 8px; font-size: .8rem; cursor: pointer; white-space: nowrap;
}
.push-banner-no:hover { color: #c9d1d9; }

/* ── Circuit Conquest ────────────────────────────────────────── */
.track-conquest-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 5px; padding: 3px 6px 3px 4px;
  background: rgba(240,192,64,.07); border-radius: 20px;
  border: 1px solid rgba(240,192,64,.18);
  width: fit-content;
}
.conquest-logo-img {
  width: 16px; height: 16px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.conquest-logo-placeholder {
  width: 16px; height: 16px; border-radius: 50%; background: #21262d;
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; font-weight: 800; color: #8b949e; flex-shrink: 0;
}

/* ── Ecurie Stats Tab ─────────────────────────────────────────── */
.ecurie-stats { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.ecurie-level-banner {
  display: flex; align-items: center; justify-content: space-between;
}
.ecurie-level-num { font-size: 1rem; font-weight: 800; color: #e6edf3; }
.ecurie-level-passive { font-size: .78rem; color: #f0c040; font-weight: 700; }
.ecurie-stat-lbl { font-size: .75rem; color: #8b949e; flex: 1; }
.ecurie-stat-val { font-size: .82rem; color: #c9d1d9; font-weight: 600; }
.ecurie-stat-row { display: flex; align-items: center; justify-content: space-between; }
.ecurie-xp-wrap { display: flex; flex-direction: column; gap: 3px; }
.ecurie-xp-track {
  height: 6px; background: #21262d; border-radius: 3px; overflow: hidden;
}
.ecurie-xp-fill {
  height: 100%; background: linear-gradient(90deg, #2baa9e, #3dd9cc);
  border-radius: 3px; transition: width .4s ease;
}
.ecurie-xp-txt { font-size: .68rem; color: #8b949e; text-align: right; }
/* Level milestones progression */
.ecurie-milestones {
  display: flex; align-items: center; justify-content: space-between;
  background: #0d1117; border-radius: 8px; padding: 8px 6px; gap: 2px;
  overflow-x: auto;
}
.milestone-arrow { color: #30363d; font-size: .9rem; flex-shrink: 0; }
.ecurie-milestone {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex-shrink: 0; opacity: .35; transition: opacity .3s;
}
.ecurie-milestone.reached { opacity: .65; }
.ecurie-milestone.current { opacity: 1; }
.milestone-tag { font-size: .65rem !important; padding: 1px 4px !important; }
.milestone-label { font-size: .55rem; color: #8b949e; }
.milestone-niv { font-size: .5rem; color: #484f58; }
/* Circuits conquered list */
.ecurie-circuits-conquered {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 180px; overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ecurie-circuits-conquered::-webkit-scrollbar { width: 4px; }
.ecurie-circuits-conquered::-webkit-scrollbar-track { background: transparent; }
.ecurie-circuits-conquered::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; }
.ecurie-circuit-info { display: none; }
.ecurie-circuit-row {
  display: flex; align-items: center; gap: 6px;
  background: #161b22; border-radius: 6px; padding: 5px 8px;
}
.ecurie-circuit-name { font-size: .75rem; color: #c9d1d9; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecurie-circuit-info { font-size: .65rem; color: #8b949e; white-space: nowrap; }
.ecurie-no-circuits { font-size: .75rem; color: #8b949e; text-align: center; padding: 8px 0; }

/* ── Ecurie Pilot Stats ──────────────────────────────────────── */
.pilot-stats-list { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.pilot-stat-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #161b22; border-radius: 8px; padding: 7px 10px;
}
.pilot-stat-rank { font-size: .75rem; min-width: 24px; text-align: center; flex-shrink: 0; }
.pilot-stat-name {
  display: flex; align-items: center; gap: 5px;
  font-size: .8rem; font-weight: 600; color: #e6edf3;
  flex: 1; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pilot-car-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pilot-stat-badge {
  font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0;
}
.pilot-rank    { background: rgba(201,209,217,.15); color: #c9d1d9; border: 1px solid rgba(201,209,217,.2); }
.pilot-xp      { background: rgba(88,166,255,.12); color: #58a6ff; }
.pilot-races   { background: rgba(63,185,80,.1);   color: #3fb950; }
.pilot-circuits{ background: rgba(210,153,255,.1); color: #d29dff; }
.ecurie-pilots-loading, .ecurie-pilots-empty { font-size: .78rem; color: #8b949e; text-align: center; padding: 16px 0; }

/* ── Admin Ranked Panel ──────────────────────────────────────── */
.ar-players-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.ar-player-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 7px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05);
  font-size: .82rem;
}
.ar-player-row:hover { background: rgba(167,139,250,.07); }
.ar-pr-pos { width: 22px; text-align: right; font-size: .72rem; color: #484f58; flex-shrink: 0; }
.ar-pr-name { flex: 1; min-width: 0; font-weight: 600; color: #e3e3e3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-pr-rank { font-size: .74rem; font-weight: 600; flex-shrink: 0; }
.ar-pr-elo { font-weight: 700; color: #e3e3e3; min-width: 68px; text-align: right; flex-shrink: 0; }
.ar-pr-wl { font-size: .72rem; color: #8b949e; min-width: 52px; text-align: right; flex-shrink: 0; }
.ar-pr-edit-btn {
  background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.2);
  color: #a78bfa; border-radius: 5px; padding: 3px 7px; cursor: pointer; font-size: .78rem; flex-shrink: 0;
}
.ar-pr-edit-btn:hover { background: rgba(167,139,250,.22); }

/* ── Ranked Leaderboard ──────────────────────────────────────── */
.ranked-lb-list { display: flex; flex-direction: column; gap: 0; }
.rlb-row { gap: 10px !important; }
.rlb-rank-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.rlb-rank-icon .rank-img { width: 1.5rem; height: 1.5rem; }
.rlb-rank-label {
  font-size: .72rem; color: var(--rank-color, #8b949e); font-weight: 600;
  display: block; line-height: 1.1; margin-top: 1px;
}
.rlb-elo {
  font-size: .82rem; font-weight: 700; color: #e3e3e3; white-space: nowrap;
}

/* ── Ecurie Leaderboard ──────────────────────────────────────── */
.ecurie-lb-header {
  font-size: .66rem; color: #3d4550; letter-spacing: .06em; text-transform: uppercase;
  text-align: right; padding: 0 2px 8px; border-bottom: 1px solid rgba(255,255,255,.05);
  margin-bottom: 2px;
}
.ecurie-lb-list { display: flex; flex-direction: column; gap: 0; }
.ecurie-lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px 9px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  position: relative;
  transition: background .12s;
}
.ecurie-lb-row::before {
  content: '';
  position: absolute; left: 0; top: 5px; bottom: 5px;
  width: 3px; border-radius: 2px;
  background: rgba(255,255,255,.07);
}
.ecurie-lb-row.gold::before   { background: rgba(228,196,41,.7); }
.ecurie-lb-row.silver::before { background: rgba(160,170,180,.5); }
.ecurie-lb-row.bronze::before { background: rgba(176,115,64,.5); }
.ecurie-lb-row.gold   { background: rgba(228,196,41,.02); }
.ecurie-lb-row:last-child { border-bottom: none; }
.ecurie-lb-row:hover  { background: rgba(255,255,255,.025); }
.ecurie-lb-logo { flex-shrink: 0; }
.ecurie-lb-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ecurie-lb-name { font-size: .83rem; color: #c9d1d9; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecurie-lb-sub { font-size: .67rem; color: #3d4550; }
.ecurie-lb-circuits {
  display: flex; flex-direction: column; align-items: flex-end; min-width: 42px; gap: 1px;
}
.ecurie-lb-circuits-num { font-size: .92rem; font-weight: 700; color: #e6edf3; line-height: 1; font-variant-numeric: tabular-nums; }
.ecurie-lb-circuits-lbl { font-size: .6rem; color: #3d4550; letter-spacing: .03em; }

/* ── Ecurie Applications ─────────────────────────────────────── */
.ecurie-app-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px; background: #161b22; border-radius: 8px; margin-bottom: 6px;
}
.ecurie-app-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ecurie-app-name { font-size: .82rem; font-weight: 700; color: #e6edf3; }
.ecurie-app-rank { font-size: .72rem; color: #2baa9e; font-weight: 600; }
.ecurie-app-stats { font-size: .68rem; color: #8b949e; }
.ecurie-app-msg { font-size: .72rem; color: #c9d1d9; font-style: italic; margin-top: 2px; }
.ecurie-app-actions { display: flex; gap: 4px; flex-shrink: 0; }
.ecurie-app-accept { background: #1d3a2e; color: #5cd68c; border: 1px solid #2baa9e44; border-radius: 6px; padding: 4px 8px; cursor: pointer; font-weight: 700; }
.ecurie-app-accept:hover { background: #1e4433; }
.ecurie-app-decline { background: #2d1a1a; color: #f87171; border: 1px solid #ef444444; border-radius: 6px; padding: 4px 8px; cursor: pointer; font-weight: 700; }
.ecurie-app-decline:hover { background: #3d2020; }
/* Apply button in search/browse results */
.ecurie-apply-btn {
  background: rgba(43,170,158,.1); color: #2baa9e;
  border: 1px solid rgba(43,170,158,.3);
  border-radius: 6px; padding: 4px 10px; font-size: .75rem; font-weight: 700;
  cursor: pointer; margin-top: 4px; white-space: nowrap; flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.ecurie-apply-btn:hover { background: rgba(43,170,158,.18); border-color: rgba(43,170,158,.55); }
.ecurie-apply-btn:disabled { opacity: .4; cursor: default; }
.ecurie-apply-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ecurie-apply-textarea {
  background: rgba(13,17,23,.7); border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px; color: #e6edf3; font-size: .78rem; padding: 6px 8px;
  resize: none; font-family: inherit; min-height: 52px;
  transition: border-color .15s;
}
.ecurie-apply-textarea:focus { outline: none; border-color: rgba(43,170,158,.5); }
.ecurie-apply-send { align-self: flex-end; }

/* ── Ecurie Browse section ───────────────────────────────────── */
.ecurie-browse-section { padding: 12px 16px 16px; }
.ecurie-browse-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.ecurie-sort-chips { display: flex; gap: 4px; }
.ecurie-sort-chip {
  padding: 3px 10px; background: transparent;
  border: 1px solid rgba(255,255,255,.08); border-radius: 20px;
  color: #3d4550; font-size: .72rem; font-weight: 600;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.ecurie-sort-chip:hover { border-color: rgba(43,170,158,.3); color: #6e7681; }
.ecurie-sort-chip.active {
  background: rgba(43,170,158,.1); border-color: rgba(43,170,158,.45); color: #2baa9e;
}
.ecurie-browse-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 220px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(43,170,158,.2) transparent;
}
.ecurie-browse-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(13,17,23,.4); border: 1px solid rgba(255,255,255,.04);
  border-radius: 8px; transition: background .12s, border-color .12s;
}
.ecurie-browse-item:hover { background: rgba(255,255,255,.022); border-color: rgba(43,170,158,.1); }
.ecurie-browse-info { flex: 1; min-width: 0; }
.ecurie-browse-name {
  font-size: .85rem; font-weight: 600; color: #c9d1d9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecurie-browse-tag { color: #2baa9e; font-weight: 700; margin-right: 3px; font-size: .78rem; }
.ecurie-browse-meta { display: flex; gap: 8px; margin-top: 2px; align-items: center; }
.ecurie-browse-level {
  font-size: .65rem; color: #4a5568; font-weight: 700; letter-spacing: .02em;
  background: rgba(255,255,255,.04); border-radius: 4px; padding: 1px 5px;
  border: 1px solid rgba(255,255,255,.05);
}
.ecurie-browse-members { font-size: .68rem; color: #3d4550; }
.ecurie-browse-full {
  font-size: .7rem; color: #3d4550; font-weight: 600;
  padding: 3px 8px; border: 1px solid rgba(255,255,255,.05); border-radius: 6px;
  flex-shrink: 0;
}
.ecurie-browse-actions { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; }

/* ── Create room options ─────────────────────────────────────── */
.create-room-options {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-bottom: 12px;
}

/* Inputs options (mot de passe, etc.) */
.create-opt-input {
  background: #0d1117; border: 1.5px solid #30363d; border-radius: 10px;
  color: #e6edf3; font-size: .85rem; padding: 10px 12px;
  font-family: inherit; width: 100%; box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}
.create-opt-input:focus {
  outline: none; border-color: #2baa9e;
  box-shadow: 0 0 0 3px rgba(43,170,158,.11);
}

/* Toggle row */
.create-opt-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: 10px;
  cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s;
}
.create-opt-toggle:hover {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}
.create-opt-toggle input[type="checkbox"] { display: none; }

/* Slider */
.toggle-slider {
  width: 42px; height: 22px; background: #21262d;
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 11px;
  position: relative; transition: background .2s, border-color .2s; flex-shrink: 0;
}
.toggle-slider::after {
  content: ''; position: absolute; left: 2px; top: 2px;
  width: 14px; height: 14px; background: #6e7681; border-radius: 50%;
  transition: transform .2s, background .2s;
}
.create-opt-toggle input:checked + .toggle-slider {
  background: #2baa9e; border-color: #2baa9e;
}
.create-opt-toggle input:checked + .toggle-slider::after {
  transform: translateX(20px); background: #fff;
}

/* Label toggle */
.toggle-label-text {
  font-size: .84rem; font-weight: 700; color: #c9d1d9; flex: 1;
}
.create-opt-toggle:has(input:checked) .toggle-label-text { color: #fff; }
.create-opt-toggle:has(input:checked) {
  border-color: rgba(43,170,158,.35);
  background: rgba(43,170,158,.07);
}

/* Rangée toggles côte à côte */
.comp-toggles-row {
  display: flex; gap: 8px;
}
.comp-toggles-row .create-opt-toggle {
  flex: 1; min-width: 0; /* permet au texte de wrapper si besoin */
}

/* Bloc sous-options compétition */
#competitionOptions {
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(255,255,255,.02);
  border: 1.5px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 12px;
}

/* Select caché (conservé pour la compat JS) */
.create-opt-select {
  background: #161b22; border: 1.5px solid #30363d; border-radius: 10px;
  color: #e6edf3; font-size: .82rem; padding: 8px 10px;
  font-family: inherit; cursor: pointer; width: 100%;
}
.create-opt-select:focus { outline: none; border-color: #2baa9e; }

/* ── Competition standings ───────────────────────────────────── */
.comp-standings-header {
  font-size: .75rem; font-weight: 700; color: #e8d48a;
  margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; gap: 6px;
}
.ta-spec-countdown { margin-left: auto; font-variant-numeric: tabular-nums; font-size: .75rem; color: #8b949e; font-weight: 600; }
.ta-spec-countdown.urgent { color: #f78166; }
.comp-standings-entry {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 0; font-size: .78rem; color: #c9d1d9;
}
.comp-standings-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-standings-wins { font-weight: 700; color: #e8d48a; font-size: .75rem; }
.comp-standings-hint { font-size: .75rem; color: #8b949e; font-style: italic; }

/* ── Ready button ────────────────────────────────────────────── */
.ready-btn {
  width: 100%; padding: 11px 0;
  background: linear-gradient(to right, #1a8f85 0%, #3cb5ac 100%);
  color: #fff; font-weight: 900; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .07em;
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 11px; cursor: pointer;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.25);
  transition: filter .15s;
  margin-top: 4px;
  font-family: inherit;
}
.ready-btn:hover { filter: brightness(1.1); }
.ready-btn.ready-active {
  background: linear-gradient(to right, #166d4a 0%, #27a865 100%);
  box-shadow: inset 3px 0 0 rgba(255,255,255,.25), 0 0 12px rgba(39,168,101,.3);
}

/* ── Competition start button ────────────────────────────────── */
.comp-start-btn {
  width: 100%; padding: 11px 0;
  background: linear-gradient(to right, #7a6218 0%, #c4a23a 100%);
  color: #fff; font-weight: 900; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .07em;
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: 11px; cursor: pointer;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.22);
  transition: filter .15s;
  margin-top: 4px;
  font-family: inherit;
}
.comp-start-btn:hover { filter: brightness(1.1); }

/* ── Competition Lobby Overlay ────────────────────────────── */
.comp-lobby-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #070b10 0%, #0a0f18 100%);
  display: flex; align-items: center; justify-content: center; z-index: 110;
  overflow-y: auto; padding: 20px 0;
}
.comp-lobby-overlay.hidden { display: none; }

.comp-lobby-box {
  display: flex; flex-direction: column; align-items: stretch;
  width: 100%; max-width: 440px; gap: 0;
}

.comp-lobby-header {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 28px 28px 18px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.comp-lobby-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(232,212,138,.07); border: 1px solid rgba(232,212,138,.2);
  border-radius: 999px; padding: 3px 14px;
  font-size: .65rem; font-weight: 800; color: #e8d48a;
  letter-spacing: .12em; text-transform: uppercase;
}
.comp-lobby-title-text {
  font-size: 1.3rem; font-weight: 900; color: #e6edf3;
  font-family: 'Orbitron', sans-serif; letter-spacing: .04em;
}
.comp-lobby-bestof { font-size: .75rem; color: #8b949e; }
.comp-lobby-hint { font-size: .75rem; color: #8b949e; text-align: center; }

.comp-lobby-players {
  display: flex; flex-direction: column; gap: 7px;
  padding: 18px 28px; margin-top: 0; width: 100%; box-sizing: border-box;
}

.comp-lobby-player {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 9px 14px;
  transition: border-color .2s, background .2s;
}
.comp-lobby-player.ready {
  border-color: rgba(43,170,158,.3); background: rgba(43,170,158,.05);
}
.comp-lobby-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.comp-lobby-pname {
  flex: 1; font-size: .84rem; font-weight: 700; color: #e6edf3;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.comp-lobby-status { font-size: .72rem; color: #6e7681; flex-shrink: 0; }
.comp-lobby-player.ready .comp-lobby-status { color: #2baa9e; font-weight: 700; }

/* player-row used by football lobby */
.comp-lobby-player-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 6px;
  font-size: .8rem; color: #e6edf3;
}
.comp-lobby-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.comp-lobby-actions {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 28px 28px;
}

.comp-lobby-ready-btn {
  width: 100%; height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 11px;
  background: linear-gradient(to right, #1a8f85 0%, #3cb5ac 100%);
  border: 1.5px solid rgba(255,255,255,.14); color: #fff;
  font-size: .9rem; font-weight: 800; cursor: pointer;
  position: relative; overflow: hidden;
  transition: filter .15s, transform .1s;
}
.comp-lobby-ready-btn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.12) 0%, transparent 50%),
    repeating-linear-gradient(-62deg, transparent 0px, transparent 14px, rgba(255,255,255,.04) 14px, rgba(255,255,255,.04) 15px);
}
.comp-lobby-ready-btn:hover { filter: brightness(1.1); }
.comp-lobby-ready-btn:active { transform: scale(.98); }
.comp-lobby-ready-btn.ready-active {
  background: linear-gradient(to right, #1a6b44 0%, #228750 100%);
  border-color: rgba(92,214,140,.2);
}

.comp-lobby-start-btn {
  width: 100%; height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 11px;
  background: linear-gradient(to right, #7a5b0e 0%, #9e7a16 100%);
  border: 1.5px solid rgba(232,212,138,.22); color: #e8d48a;
  font-size: .9rem; font-weight: 800; cursor: pointer;
  position: relative; overflow: hidden;
  transition: filter .15s, transform .1s;
}
.comp-lobby-start-btn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.1) 0%, transparent 50%),
    repeating-linear-gradient(-62deg, transparent 0px, transparent 14px, rgba(255,255,255,.04) 14px, rgba(255,255,255,.04) 15px);
}
.comp-lobby-start-btn:hover { filter: brightness(1.1); }
.comp-lobby-start-btn:active { transform: scale(.98); }

.comp-lobby-leave-btn {
  width: 100%; padding: 9px 0; border-radius: 8px;
  background: transparent; border: 1px solid #30363d;
  color: #6e7681; font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.comp-lobby-leave-btn:hover { color: #c9d1d9; border-color: #484f58; }

/* ── Room code pill ─────────────────────────────────────── */
.comp-lobby-room-code {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 16px; border-radius: 20px; align-self: center;
  background: rgba(30,215,96,.06); border: 1px solid rgba(30,215,96,.22);
  color: #1ed760; font-family: 'Courier New', monospace; font-size: .8rem;
  font-weight: 700; letter-spacing: .14em; user-select: all;
}

/* ── Spectator button ────────────────────────────────────── */
.comp-lobby-spectator-btn {
  width: 100%; padding: 9px 0; border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(139,148,158,.3);
  color: #8b949e; font-size: .8rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: color .15s, border-color .15s, background .15s;
}
.comp-lobby-spectator-btn i { font-size: 1rem; }
.comp-lobby-spectator-btn:hover {
  color: #c9d1d9; border-color: rgba(139,148,158,.6);
  background: rgba(139,148,158,.07);
}
.comp-lobby-spectator-btn.active {
  color: #58a6ff; border-color: rgba(88,166,255,.4);
  background: rgba(88,166,255,.07);
}

/* ── Team mode — Card Picker (.ctm-) ─────────────────────── */
.ctm-pick-wrap {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 20px;
}
.ctm-choose-prompt {
  text-align: center; font-size: .72rem; color: #8b949e; letter-spacing: .04em;
}
.ctm-grid {
  display: grid; grid-template-columns: 1fr 26px 1fr; align-items: stretch;
}
.ctm-vs {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif; font-size: .58rem; font-weight: 900;
  color: #484f58; letter-spacing: .06em;
}
.ctm-card {
  display: flex; flex-direction: column; gap: 8px;
  border-radius: 12px; padding: 12px 10px; border: 1.5px solid;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.ctm-card.ctm-a { background: rgba(74,158,255,.05); border-color: rgba(74,158,255,.2); }
.ctm-card.ctm-b { background: rgba(255,107,74,.05); border-color: rgba(255,107,74,.2); }
.ctm-card.ctm-mine.ctm-a {
  background: rgba(74,158,255,.11); border-color: rgba(74,158,255,.5);
  box-shadow: 0 0 18px rgba(74,158,255,.12);
}
.ctm-card.ctm-mine.ctm-b {
  background: rgba(255,107,74,.11); border-color: rgba(255,107,74,.5);
  box-shadow: 0 0 18px rgba(255,107,74,.12);
}
.ctm-card-head { display: flex; align-items: center; gap: 6px; }
.ctm-team-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.ctm-team-dot.ctm-a { background: #4a9eff; box-shadow: 0 0 5px #4a9eff99; }
.ctm-team-dot.ctm-b { background: #ff6b4a; box-shadow: 0 0 5px #ff6b4a99; }
.ctm-team-name {
  font-size: .72rem; font-weight: 800; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ctm-team-name.ctm-a { color: #4a9eff; }
.ctm-team-name.ctm-b { color: #ff6b4a; }
.ctm-team-count { font-size: .62rem; color: #8b949e; flex-shrink: 0; }
.ctm-slots { display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 56px; }
.ctm-slot {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 6px; border-radius: 7px;
  background: rgba(255,255,255,.03); font-size: .72rem; color: #e6edf3;
}
.ctm-slot.ctm-ready { background: rgba(43,170,158,.08); }
.ctm-slot-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ctm-slot-name {
  flex: 1; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ctm-slot-check { font-size: .62rem; color: #2baa9e; margin-left: auto; flex-shrink: 0; }
.ctm-slot-empty {
  display: flex; align-items: center; justify-content: center;
  padding: 4px 6px; border-radius: 7px; border: 1px dashed rgba(255,255,255,.08);
  font-size: .6rem; color: #30363d; font-weight: 600;
  letter-spacing: .04em; min-height: 26px;
}
.ctm-join-btn {
  width: 100%; padding: 7px 4px; border-radius: 8px;
  font-size: .75rem; font-weight: 800; cursor: pointer;
  transition: filter .15s; letter-spacing: .02em; margin-top: 2px;
}
.ctm-join-btn.ctm-join-a {
  background: rgba(74,158,255,.12); border: 1.5px solid rgba(74,158,255,.35); color: #4a9eff;
}
.ctm-join-btn.ctm-join-b {
  background: rgba(255,107,74,.12); border: 1.5px solid rgba(255,107,74,.35); color: #ff6b4a;
}
.ctm-join-btn:hover { filter: brightness(1.2); }
.ctm-mine-badge {
  text-align: center; padding: 6px 4px; margin-top: 2px;
  font-size: .68rem; font-weight: 800; letter-spacing: .03em;
}
.ctm-mine-badge.ctm-a { color: #4a9eff; }
.ctm-mine-badge.ctm-b { color: #ff6b4a; }
.ctm-full-label {
  text-align: center; padding: 6px 4px; margin-top: 2px;
  font-size: .68rem; color: #8b949e;
}

/* ── Retained for football lobby ────────────────────────── */
.comp-team-unassigned { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #30363d; }
.comp-team-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.comp-team-col { display: flex; flex-direction: column; gap: 4px; background: #0d1117; border: 1px solid #21262d; border-radius: 10px; padding: 8px; }
.comp-team-col-title { font-size: .82rem; font-weight: 800; text-align: center; margin-bottom: 4px; }
.comp-team-players { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.comp-team-join-btn { width: 100%; padding: 5px 0; border-radius: 7px; font-size: .78rem; font-weight: 700; cursor: pointer; background: transparent; border: 1px solid; transition: opacity .2s; margin-top: 4px; }
.comp-team-join-btn:hover { opacity: .75; }
.comp-team-switch-btn { width: auto !important; margin: 0 0 0 auto !important; padding: 2px 8px !important; font-size: .72rem !important; flex-shrink: 0; }
.comp-team-btns { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.comp-team-btn { padding: 2px 8px; border-radius: 5px; font-size: .75rem; font-weight: 800; cursor: pointer; background: transparent; border: 1px solid; transition: opacity .2s; }
.comp-team-btn:hover { opacity: .7; }
.comp-result-team-players { font-size: .75rem; color: #8b949e; margin-top: 2px; }

/* ── Referral section ────────────────────────────────────────── */
.referral-section {
  padding: 14px; border-radius: 12px;
  background: #0d1117; border: 1px solid #21262d;
}
.referral-title { font-size: .9rem; font-weight: 800; color: #e6edf3; margin-bottom: 6px; }
.referral-desc { font-size: .78rem; color: #8b949e; margin: 0 0 10px; line-height: 1.5; }
.referral-desc strong { color: #2baa9e; }
.referral-link-row { display: flex; gap: 6px; margin-bottom: 8px; }
.referral-link-input {
  flex: 1; background: #010409; border: 1px solid #30363d; border-radius: 8px;
  color: #58a6ff; font-size: .72rem; padding: 6px 8px; font-family: monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.referral-copy-btn {
  padding: 6px 10px; border-radius: 8px; font-size: .78rem; font-weight: 700;
  background: #21262d; border: 1px solid #30363d; color: #e6edf3; cursor: pointer;
  white-space: nowrap; transition: background .15s;
}
.referral-copy-btn:hover { background: #30363d; }
.promo-result { font-size: .82rem; line-height: 1.6; border-radius: 6px; padding: 8px 10px; }
.promo-result.success { background: #0d2a0d; color: #58e673; border: 1px solid #1a5c1a; }
.promo-result.error { background: #2a0d0d; color: #e65858; border: 1px solid #5c1a1a; }
.referral-share-btn {
  width: 100%; padding: 8px 0; border-radius: 8px; font-size: .82rem; font-weight: 700;
  background: #161b22; border: 1px solid #30363d; color: #e6edf3; cursor: pointer;
  transition: background .15s; margin-bottom: 10px;
}
.referral-share-btn:hover { background: #21262d; }
.referral-stats { font-size: .78rem; color: #2baa9e; font-weight: 600; }
.referral-feedback { font-size: .75rem; margin-top: 4px; padding: 4px 8px; border-radius: 6px; }
.referral-feedback.valid { color: #2baa9e; background: #0d2620; }
.referral-feedback.invalid { color: #e74c3c; background: #1e0a0a; }
.referral-feedback.hidden { display: none; }

/* ── Comp mode selector (Coupe / Time Attack) ────────────────── */
.comp-mode-selector {
  display: flex; gap: 4px; margin-bottom: 4px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 4px;
}
.comp-mode-btn {
  flex: 1; padding: 9px 10px;
  background: transparent; border: none;
  border-radius: 7px; color: #6e7681;
  font-size: .79rem; font-weight: 800;
  font-family: inherit; cursor: pointer;
  text-transform: uppercase; letter-spacing: .05em;
  transition: background .15s, color .15s, box-shadow .15s;
}
.comp-mode-btn.active {
  background: linear-gradient(135deg, rgba(43,170,158,.3) 0%, rgba(28,120,112,.22) 100%);
  color: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
.comp-mode-btn:hover:not(.active) { background: rgba(255,255,255,.07); color: #c9d1d9; }

/* ── Pills generiques (best-of / durée TA) ───────────────────── */
.opt-pills {
  display: flex; gap: 4px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 4px;
}
.opt-pill {
  flex: 1; padding: 8px 4px;
  background: transparent; border: none;
  border-radius: 7px; color: #6e7681;
  font-size: .75rem; font-weight: 800;
  font-family: inherit; cursor: pointer;
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.opt-pill.active {
  background: linear-gradient(135deg, rgba(43,170,158,.3) 0%, rgba(28,120,112,.22) 100%);
  color: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
.opt-pill:hover:not(.active) { background: rgba(255,255,255,.07); color: #c9d1d9; }

/* Label section compétition */
.comp-section-label {
  font-size: .7rem; font-weight: 800; color: #6e7681;
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 2px;
}

/* ── Time Attack live overlay ────────────────────────────────── */
.ta-live-overlay {
  position: absolute; top: 12px; right: 12px;
  background: rgba(13,17,23,.9); border: 1px solid #30363d;
  border-radius: 12px; padding: 10px 14px; min-width: 200px; max-width: 240px;
  z-index: 150; backdrop-filter: blur(6px);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.ta-live-overlay.hidden { display: none; }
.ta-live-header { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.ta-live-title { font-size: .78rem; font-weight: 700; color: #2baa9e; }
.ta-live-round { font-size: .72rem; color: #8b949e; }
.ta-live-countdown {
  font-size: .9rem; font-weight: 800; color: #f0b429;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.ta-live-countdown.urgent { color: #e74c3c; }
.ta-live-list { display: flex; flex-direction: column; gap: 4px; }
.ta-live-entry {
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; color: #c9d1d9;
}
.ta-live-entry.me { color: #2baa9e; font-weight: 700; }
.ta-live-pos { min-width: 16px; text-align: center; font-size: .7rem; color: #8b949e; }
.ta-live-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ta-live-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-live-time { font-variant-numeric: tabular-nums; font-size: .72rem; color: #8b949e; white-space: nowrap; }
.ta-live-entry.me .ta-live-time { color: #2baa9e; }
.ta-live-waiting { font-size: .72rem; color: #484f58; font-style: italic; }

/* ── Écran résultats compétition (plein écran) ───────────────── */
.crf-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: #05080d;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.crf-overlay.hidden { display: none; }

/* Voitures animées en arrière-plan */
.crf-bg-strips { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.crf-bg-car {
  position: absolute; height: 5px; border-radius: 3px;
  opacity: 0; will-change: transform;
  animation: crf-car-fly linear infinite;
}
@keyframes crf-car-fly {
  0%   { transform: translateX(-10%);  opacity: 0; }
  5%   { opacity: .18; }
  90%  { opacity: .18; }
  100% { transform: translateX(110vw); opacity: 0; }
}

/* Scanlines légères */
.crf-scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent 0px, transparent 3px,
    rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 4px
  );
}
/* Vignette radiale */
.crf-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 30%, rgba(0,0,0,.75) 100%);
}

/* Contenu principal */
.crf-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  width: 100%; max-width: 680px; padding: 40px 24px;
}

/* Zone vainqueur */
.crf-winner-section {
  text-align: center; position: relative;
  animation: crf-fade-in .45s ease both;
}
@keyframes crf-fade-in { from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:none; } }

.crf-event-label {
  font-size: .65rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .25em; color: #2baa9e; margin-bottom: 10px;
}
.crf-winner-eyebrow {
  font-family: 'Orbitron', sans-serif;
  font-size: .75rem; font-weight: 700; letter-spacing: .5em;
  text-transform: uppercase; color: #484f58; margin-bottom: 6px;
}
.crf-winner-name {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 7vw, 3.8rem); font-weight: 900;
  color: #e6edf3; text-transform: uppercase; letter-spacing: .04em;
  text-shadow: 0 0 80px rgba(43,170,158,.45), 0 2px 24px rgba(0,0,0,.9);
  animation: crf-name-pop .55s cubic-bezier(.22,1,.36,1) .2s both;
}
@keyframes crf-name-pop {
  from { opacity:0; transform: scale(.8); }
  to   { opacity:1; transform: scale(1); }
}
/* Ligne décorative sous le nom */
.crf-winner-name::after {
  content: ''; display: block; height: 3px; width: 60%; margin: 10px auto 0;
  background: linear-gradient(to right, transparent, #2baa9e, transparent);
  border-radius: 2px;
}

/* Classement */
.crf-standings {
  width: 100%; display: flex; flex-direction: column; gap: 7px;
}
.crf-row {
  display: flex; align-items: stretch; border-radius: 10px;
  overflow: hidden; min-height: 54px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
  animation: crf-row-in .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes crf-row-in {
  from { opacity:0; transform: translateX(36px); }
  to   { opacity:1; transform: none; }
}
.crf-row:nth-child(1) { animation-delay: .25s; }
.crf-row:nth-child(2) { animation-delay: .35s; }
.crf-row:nth-child(3) { animation-delay: .45s; }
.crf-row:nth-child(n+4) { animation-delay: .52s; }

/* Bande position */
.crf-pos-band {
  width: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif; font-size: 1.05rem; font-weight: 900; color: #fff;
}
.crf-row.rank-1 .crf-pos-band { background: linear-gradient(160deg, #e67e00, #f59e0b); }
.crf-row.rank-2 .crf-pos-band { background: linear-gradient(160deg, #4b5563, #6b7280); }
.crf-row.rank-3 .crf-pos-band { background: linear-gradient(160deg, #6b3e24, #92522d); }
.crf-row:not(.rank-1):not(.rank-2):not(.rank-3) .crf-pos-band {
  background: rgba(255,255,255,.06); color: #484f58;
}

/* Barre couleur joueur */
.crf-color-bar { width: 4px; flex-shrink: 0; }

/* Corps de la ligne */
.crf-row-body {
  flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  min-width: 0;
}
.crf-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  filter: drop-shadow(0 0 5px var(--pcolor, #2baa9e));
}
.crf-row-name {
  flex: 1; font-size: .95rem; font-weight: 700; color: #e6edf3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crf-row.rank-1 .crf-row-name { color: #fde68a; }

.crf-row-score {
  font-size: .84rem; font-weight: 700; color: #2baa9e;
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}

/* Bouton fermer */
.crf-close-btn {
  padding: 10px 36px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: #6e7681; font-size: .82rem; font-weight: 700; cursor: pointer;
  transition: background .12s, color .12s; margin-top: 4px;
  animation: crf-fade-in .4s ease .6s both;
}
.crf-close-btn:hover { background: rgba(255,255,255,.1); color: #c9d1d9; }

/* ── Compat — anciens sélecteurs conservés pour d'éventuelles références JS ── */
.comp-results-overlay.hidden { display: none; }
.comp-result-entry { display: none; } /* remplacé par .crf-row */

/* ── Modal Modes Fun ──────────────────────────────────────────── */
.fun-mode-modal-box {
  width: min(540px, calc(100vw - 24px));
  padding: 0;
  overflow: hidden;
  background: #0b0e14;
}

/* Bandeau header gradient */
.fun-mode-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 22px 20px 20px;
  background: linear-gradient(135deg, #0c2a1a 0%, #0f2d40 55%, #0c1e35 100%);
  position: relative; overflow: hidden;
}
.fun-mode-modal-header::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.09) 0%, transparent 55%),
    repeating-linear-gradient(
      -62deg,
      transparent 0px, transparent 14px,
      rgba(255,255,255,.032) 14px, rgba(255,255,255,.032) 15px
    );
}
/* Trait décoratif bas du header */
.fun-mode-modal-header::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(43,200,158,.4) 30%, rgba(43,200,158,.4) 70%, transparent);
}
.fun-mode-modal-header-left {
  display: flex; flex-direction: column; gap: 5px;
  position: relative; z-index: 1;
}
.fun-mode-modal-title {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.18rem; font-weight: 900; color: #fff;
  text-transform: uppercase; letter-spacing: .08em;
}
.fun-mode-modal-icon {
  width: 40px; height: 40px; object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(43,200,158,.7));
}
.fun-mode-modal-sub {
  font-size: .73rem; color: rgba(255,255,255,.45);
  margin: 0; padding-left: 52px; /* aligne sous l'icône */
}
.fun-mode-modal-header .close-modal-x {
  position: relative; z-index: 1;
  flex-shrink: 0; margin-top: 2px;
}

/* Wrapper cartes */
.fun-mode-cards-wrap {
  padding: 16px;
}

/* ── Grille des cartes de mode ────────────────────────────────── */
.fun-mode-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.fun-mode-card {
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.1);
  position: relative; text-align: left; font-family: inherit;
  cursor: pointer; min-height: 210px;
  transition: filter .15s, transform .13s, box-shadow .15s;
  background: none;
}
/* Speed lines overlay */
.fun-mode-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.11) 0%, transparent 42%),
    repeating-linear-gradient(
      -62deg,
      transparent 0px, transparent 14px,
      rgba(255,255,255,.032) 14px, rgba(255,255,255,.032) 15px
    );
}
.fun-mode-card:hover { filter: brightness(1.13); transform: translateY(-4px); }
.fun-mode-card:active { transform: scale(.97); filter: brightness(.96); }

/* Zone visuelle — prend la majeure partie de la carte */
.fmc-visual {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; line-height: 1;
  padding: 26px 18px 14px;
  position: relative; z-index: 2;
}
/* Halo radial derrière l'emoji */
.fmc-visual::after {
  content: ''; position: absolute;
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 70%);
  pointer-events: none; z-index: -1;
}

/* Zone infos */
.fmc-info {
  padding: 0 14px 12px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative; z-index: 2;
}
.fmc-badge {
  display: inline-block; font-size: .56rem; font-weight: 900;
  padding: 2px 9px; border-radius: 4px;
  letter-spacing: .1em; text-transform: uppercase;
  align-self: flex-start; margin-bottom: 3px;
}
.fmc-name {
  display: block; font-size: .9rem; font-weight: 900;
  color: #fff; text-transform: uppercase; letter-spacing: .05em;
}
.fmc-desc {
  display: block; font-size: .69rem;
  color: rgba(255,255,255,.58); line-height: 1.4;
}

/* Barre CTA bas de carte */
.fmc-cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: rgba(0,0,0,.32);
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .79rem; font-weight: 800;
  color: rgba(255,255,255,.9);
  letter-spacing: .04em;
  position: relative; z-index: 2;
}

/* ── Variante Football ────────────────────────────────────────── */
.fmc--football {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(70,210,100,.28) 0%, transparent 60%),
    linear-gradient(160deg, #061610 0%, #0e3a1c 40%, #1a6030 100%);
  border-color: rgba(70,210,100,.28);
}
.fmc--football:hover { box-shadow: 0 12px 36px rgba(46,200,80,.35); }
.fmc-badge--beta {
  background: rgba(70,210,100,.2); color: #a8f5c0;
  border: 1px solid rgba(70,210,100,.35);
}

/* ── Variante Bientôt ─────────────────────────────────────────── */
.fmc--soon {
  background: linear-gradient(160deg, #0d1117 0%, #111720 100%);
  border: 1.5px dashed rgba(255,255,255,.13);
  cursor: default;
}
.fmc--soon .fmc-visual { opacity: .3; filter: grayscale(1); }
.fmc--soon .fmc-info  { opacity: .38; }
.fmc--soon .fmc-cta   { opacity: .38; }
/* Hachures subtiles sur la carte "bientôt" */
.fmc--soon::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(
    45deg,
    transparent 0px, transparent 10px,
    rgba(255,255,255,.012) 10px, rgba(255,255,255,.012) 11px
  );
}
.fmc--soon:hover { filter: none; transform: none; box-shadow: none; }
.fmc-badge--soon {
  background: rgba(255,255,255,.05); color: #555d66;
  border: 1px solid rgba(255,255,255,.1);
}

@media (max-width: 480px) {
  .fun-mode-cards { grid-template-columns: 1fr; }
  .fun-mode-modal-sub { padding-left: 0; }
}

/* ── Football ─────────────────────────────────────────────────── */
/* ── Mode Fun wrapper ─────────────────────────────────────────── */
.fun-mode-wrap { position: relative; flex: 1; display: flex; flex-direction: column; }
.fun-mode-btn  { flex: 1; } /* remplit la hauteur du wrapper pour matcher createRoomBtn */

.fun-mode-btn {
  width: 100%; display: flex; align-items: center; gap: 0;
  background: linear-gradient(to right, #b88a18 0%, #dfc84a 100%);
  border: 1.5px solid rgba(255,255,255,.20);
  border-radius: 11px; cursor: pointer; overflow: hidden;
  position: relative; text-align: left; font-family: inherit;
  box-shadow: inset 3px 0 0 rgba(255,255,255,.28);
  transition: filter .15s;
}
.fun-mode-btn::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 45%),
    repeating-linear-gradient(
      -62deg,
      transparent 0px, transparent 14px,
      rgba(255,255,255,.045) 14px, rgba(255,255,255,.045) 15px
    );
  pointer-events: none; z-index: 1;
}
.fun-mode-btn:hover { filter: brightness(1.1); }
.fmb-icon {
  width: 54px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 0; position: relative; z-index: 1;
}
.fmb-img { width: 32px; height: 32px; object-fit: contain; display: block; }
.fmb-text {
  flex: 1; padding: 14px 8px 14px 0;
  display: flex; flex-direction: column; gap: 2px;
  position: relative; z-index: 1;
}
.fmb-text strong {
  display: block; font-size: .85rem; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap;
}
.fmb-text span {
  display: block; font-size: .66rem; color: rgba(255,255,255,.58);
}
.fmb-caret {
  color: rgba(255,255,255,.45); margin-right: 12px;
  font-size: .95rem; flex-shrink: 0;
  position: relative; z-index: 1;
  transition: transform .2s ease;
}
.fun-mode-btn.open .fmb-caret { transform: rotate(180deg); }

/* ── Bouton Mode Classé ──────────────────────────────────────── */
.ranked-home-btn {
  width: 100%; display: flex; align-items: center; gap: 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--rhb-color, #a78bfa) 10%, #0e0d1c),
    color-mix(in srgb, var(--rhb-color, #a78bfa) 14%, #14112a));
  border: 1.5px solid color-mix(in srgb, var(--rhb-color, #a78bfa) 30%, transparent);
  border-radius: 14px; padding: 0; cursor: pointer;
  color: #e3e3e3; text-align: left;
  transition: border-color .25s, box-shadow .25s, transform .12s, background .4s;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 18px color-mix(in srgb, var(--rhb-color, #a78bfa) 14%, transparent);
}
.ranked-home-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--rhb-color, #a78bfa) 11%, transparent) 0%,
    transparent 55%);
  pointer-events: none;
}
.ranked-home-btn:hover {
  border-color: color-mix(in srgb, var(--rhb-color, #a78bfa) 60%, transparent);
  box-shadow: 0 4px 26px color-mix(in srgb, var(--rhb-color, #a78bfa) 24%, transparent);
  transform: translateY(-1px);
}

/* Partie gauche : icône ranked.svg + texte */
.rhb-left {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0; padding: 13px 14px;
}
.rhb-icon { flex-shrink: 0; line-height: 0; }
.rhb-ranked-svg { width: 2.6rem; height: 2.6rem; display: block; }
.rhb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rhb-title-row { display: flex; align-items: center; gap: 7px; }
.rhb-text strong { font-size: .85rem; font-weight: 700; color: color-mix(in srgb, var(--rhb-color, #a78bfa) 75%, #e3e3e3); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.rhb-text span    { font-size: .72rem; color: #6b7280; }
.rhb-beta {
  font-size: .5rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; line-height: 1;
  padding: 1px 4px; border-radius: 3px;
  color: #f59e0b;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.28);
  flex-shrink: 0;
}

/* Badge rang — séparateur vertical + carte compacte */
.rhb-badge {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex-shrink: 0; padding: 10px 14px;
  border-left: 1px solid color-mix(in srgb, var(--rhb-color, #a78bfa) 18%, transparent);
  background: color-mix(in srgb, var(--rhb-color, #a78bfa) 8%, transparent);
  white-space: nowrap; min-width: 68px;
}
.rhb-badge .rhb-badge-icon {
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.rhb-badge #rankedBtnLabel {
  font-size: .7rem; font-weight: 700; color: currentColor;
  letter-spacing: .03em; opacity: .9;
}

/* Chevron */
.rhb-chevron {
  color: color-mix(in srgb, var(--rhb-color, #a78bfa) 45%, transparent);
  font-size: .9rem; flex-shrink: 0; padding-right: 12px;
}

/* ── Modal Mode Classé ────────────────────────────────────────── */
.ranked-modal-box {
  width: 360px; max-width: 96vw; overflow: hidden;
  padding: 0; border-radius: 18px; position: relative;
  background: #161b22;
  border: 1px solid rgba(167,139,250,.22);
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
}
/* Croix de fermeture positionnée en absolu sur le header */
#closeRankedModalBtn {
  position: absolute; top: 13px; right: 13px; z-index: 10;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: #9ca3af; font-size: .85rem; cursor: pointer;
  transition: background .15s, color .15s;
}
#closeRankedModalBtn:hover { background: rgba(255,255,255,.14); color: #e6edf3; }
.ranked-modal-header {
  padding: 36px 24px 22px; text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, var(--rank-glow-bg, rgba(124,58,237,.14)) 0%, transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, transparent 100%),
    #161b22;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.rmh-glow { display: none; }   /* remplacé par le radial-gradient du header */
.ranked-modal-big-icon {
  font-size: 3.2rem; line-height: 1; margin-bottom: 10px;
  display: flex; justify-content: center;
  filter: drop-shadow(0 0 6px var(--rank-glow, rgba(167,139,250,.35)));
}
.ranked-modal-tier-name {
  font-size: 1.35rem; font-weight: 800; margin-bottom: 4px;
  font-family: 'Orbitron', sans-serif; letter-spacing: .05em;
}
.ranked-modal-elo {
  font-size: .8rem; color: #6b7280; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
}
/* Chemin des tiers */
.ranked-tier-path {
  display: flex; align-items: flex-start;
  padding: 14px 16px 12px; gap: 0;
  background: rgba(255,255,255,.025);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.rtp-stop {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  flex: 1; min-width: 0; opacity: .3; transition: opacity .25s;
}
.rtp-stop.passed { opacity: .65; }
.rtp-stop.active { opacity: 1; }
.rtp-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.1);
  color: var(--rtp-color,#8b949e);
  transition: background .25s, box-shadow .25s, border-color .25s;
  overflow: hidden;
}
.rtp-stop.passed .rtp-icon {
  border-color: var(--rtp-color,#8b949e);
  background: rgba(255,255,255,.07);
}
.rtp-stop.active .rtp-icon {
  border-color: var(--rtp-color,#8b949e);
  background: color-mix(in srgb, var(--rtp-color,#8b949e) 18%, transparent);
  box-shadow: 0 0 12px var(--rtp-color,#8b949e);
}
.rtp-lbl {
  font-size: .62rem; color: #6b7280;
  text-align: center; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.rtp-stop.active .rtp-lbl { color: var(--rtp-color,#8b949e); font-weight: 700; }
.rtp-line {
  height: 1px; flex: 1; background: rgba(255,255,255,.07);
  align-self: center; margin-bottom: 22px;
}
/* Corps modal */
.ranked-modal-body { padding: 14px 18px 18px; }
.ranked-progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rp-from, .rp-to { font-size: .7rem; color: #8b949e; white-space: nowrap; }
.rp-bar-wrap {
  flex: 1; height: 5px; background: rgba(255,255,255,.07);
  border-radius: 3px; overflow: hidden;
}
.rp-bar-fill { height: 100%; border-radius: 3px; transition: width .4s ease; background: #f59e0b; }
.ranked-stats-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-bottom: 10px;
}
/* Bannière "Meilleur classement" */
.ranked-peak-banner {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 14px;
}
.rpb-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.rpb-icon .rank-img { width: 42px; height: 42px; object-fit: contain; }
.rpb-text { display: flex; flex-direction: column; gap: 2px; }
.rpb-sublabel { font-size: .60rem; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; }
.rpb-rank-name { font-size: .95rem; font-weight: 800; color: #e3e3e3; }
.rsg-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px; padding: 9px 4px;
}
.rsg-val { font-size: 1.05rem; font-weight: 800; color: #e3e3e3; }
.rsg-win { color: #5cd68c; }
.rsg-loss { color: #f85149; }
.rsg-lbl { font-size: .62rem; color: #6b7280; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.ranked-search-btn {
  width: 100%; padding: 13px; border-radius: 12px; font-size: .92rem; font-weight: 700;
  background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: filter .15s, transform .12s; letter-spacing: .03em;
  box-shadow: 0 4px 18px rgba(124,58,237,.35);
}
.ranked-search-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.ranked-search-sub { text-align: center; font-size: .7rem; color: #6b7280; margin-top: 7px; margin-bottom: 0; }
.ranked-queue-state { text-align: center; padding: 6px 0 2px; }

/* Radar sonar */
.rqs-radar {
  position: relative; width: 72px; height: 72px; margin: 0 auto 12px;
}
.rqs-radar-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(167,139,250,.55);
  animation: rqs-pulse 2s ease-out infinite;
}
.rqs-ring-1 { animation-delay: 0s; }
.rqs-ring-2 { animation-delay: .65s; }
.rqs-ring-3 { animation-delay: 1.3s; }
@keyframes rqs-pulse {
  0%   { transform: scale(.3); opacity: .9; }
  100% { transform: scale(1.1); opacity: 0; }
}
.rqs-radar-dot {
  position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: #a78bfa;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 10px #a78bfa, 0 0 20px rgba(167,139,250,.4);
}
.rqs-radar-sweep {
  position: absolute; inset: 4px; border-radius: 50%; overflow: hidden;
  animation: rqs-sweep 2s linear infinite;
  transform-origin: center center;
}
.rqs-radar-sweep::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 50%; height: 2px; transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(167,139,250,.5));
  transform: rotate(0deg) translateY(-1px);
}
@keyframes rqs-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ranked-queue-msg { font-size: .83rem; color: #8b949e; margin-bottom: 6px; }
.rqs-count {
  display: inline-block; font-size: .7rem; font-weight: 700;
  color: #3d4550; letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 10px;
}
.rqs-count:not(:empty) { color: #2baa9e; }
.ranked-cancel-btn {
  background: none; border: 1px solid #30363d; color: #8b949e; border-radius: 8px;
  padding: 6px 16px; font-size: .8rem; cursor: pointer; transition: border-color .15s, color .15s;
}
.ranked-cancel-btn:hover { border-color: #f85149; color: #f85149; }
.ranked-unranked-notice {
  text-align: center; font-size: .8rem; color: #8b949e;
  background: rgba(255,255,255,.04); border-radius: 10px; padding: 11px; margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,.06);
}
.ranked-unranked-notice span { color: #a78bfa; font-weight: 700; }

/* Icônes de rang — SVG inline (unranked) */
.rank-svg {
  width: 1em; height: 1em; display: inline-block;
  vertical-align: -.12em; overflow: visible;
}
.ranked-modal-big-icon .rank-svg { width: 3.2rem; height: 3.2rem; vertical-align: 0; }
.rhb-badge-icon .rank-svg        { width: 1.3rem; height: 1.3rem; vertical-align: -.15em; }
.ri-rank-icon .rank-svg          { width: 2.1rem; height: 2.1rem; vertical-align: -.15em; }
.rtp-icon .rank-svg              { width: 1rem; height: 1rem; vertical-align: 0; }

/* Icônes de rang — fichiers image (bitmap SVG) */
.rank-img {
  display: block; object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.ranked-modal-big-icon .rank-img { width: 72px; height: 72px; }
.rhb-badge-icon .rank-img        { width: 2.2rem; height: 2.2rem; }
.ri-rank-icon .rank-img          { width: 2.8rem; height: 2.8rem; }
.rtp-icon .rank-img              { width: 1.6rem; height: 1.6rem; }

/* Outcome label agrandi dans l'écran de résultat classé */
.rrf-outcome-label {
  font-size: 2.2rem !important; font-weight: 900 !important;
  font-family: 'Orbitron', sans-serif; letter-spacing: .08em;
}

.fun-mode-panel {
  margin-top: 5px;
  background: #0d1117;
  border: 1px solid rgba(223,200,74,.25);
  border-radius: 11px;
  overflow: hidden;
}
.fun-mode-panel.hidden { display: none; }

.fun-mode-item {
  display: block; width: 100%; padding: 8px 12px;
  background: none; border: none; border-bottom: 1px solid #21262d;
  color: #7ee787; font-size: .82rem; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: background .12s;
}
.fun-mode-item:last-child { border-bottom: none; }
.fun-mode-item:hover { background: rgba(45,158,58,.12); }
.fun-mode-beta {
  display: inline-block; margin-left: 6px;
  padding: 1px 5px; border-radius: 4px;
  background: #b45309; color: #fef3c7;
  font-size: .6rem; font-weight: 700; letter-spacing: .5px;
  vertical-align: middle; line-height: 1.4;
}

/* ── Backdrop commun football ─────────────────────────────────── */
.football-create-panel,
.football-lobby-overlay,
.football-matchend-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
}
.football-create-panel   { z-index: 900; }
.football-lobby-overlay  { z-index: 800; }
.football-matchend-overlay { z-index: 700; }
.football-create-panel.hidden,
.football-lobby-overlay.hidden,
.football-matchend-overlay.hidden { display: none; }

/* ── Box commun football (reprend le style .modal-box de l'app) ─ */
.football-create-box,
.football-lobby-box,
.football-matchend-box {
  background:
    linear-gradient(155deg, rgba(43,170,158,.17) 0%, rgba(43,170,158,.05) 40%, transparent 65%),
    #161b22;
  border: 1px solid rgba(43,170,158,.30);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}

/* Watermark décoratif ⚽ en fond */
.football-create-box::after,
.football-lobby-box::after,
.football-matchend-box::after {
  content: '⚽'; position: absolute; right: -14px; bottom: -18px;
  font-size: 7rem; opacity: .05; pointer-events: none; user-select: none;
  filter: grayscale(1);
}

/* Panneau création */
.football-create-box {
  padding: 28px 32px; min-width: 300px; gap: 14px;
}
.football-create-title {
  font-size: 1.25rem; font-weight: 800; text-align: center;
  color: #e6edf3; letter-spacing: .5px;
}
.football-format-row { display: flex; gap: 8px; justify-content: center; }
.football-format-btn {
  flex: 1; padding: 10px 0; border-radius: 8px; border: 2px solid #30363d;
  background: #21262d; color: #e6edf3; font-weight: 700; cursor: pointer; transition: .15s;
}
.football-format-btn.active { border-color: #2baa9e; background: rgba(43,170,158,.15); color: #2baa9e; }
.football-confirm-btn {
  padding: 11px 0; border-radius: 10px; background: #2baa9e; border: none;
  color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.football-confirm-btn:hover { opacity: .88; }
.football-cancel-btn {
  padding: 8px 0; border-radius: 8px; background: transparent;
  border: 1px solid #30363d; color: #8b949e; cursor: pointer;
}
.football-cancel-btn:hover { background: rgba(255,255,255,.04); }

/* Lobby football */
.football-lobby-box {
  padding: 28px 32px; min-width: 360px; max-width: 520px; width: 90%; gap: 16px;
}
.football-lobby-title {
  font-size: 1.25rem; font-weight: 800; text-align: center;
  color: #e6edf3; letter-spacing: .5px;
}
.football-lobby-format { text-align: center; color: #8b949e; font-size: .9rem; }
.football-lobby-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.football-lobby-code { text-align: center; font-size: .8rem; color: #8b949e; }

/* HUD score en jeu — masqué sur desktop (score dessiné sur le canvas) */
.football-score-hud { display: none !important; }
.football-score-hud.hidden { display: none !important; }
.football-hud-inner { display: flex; align-items: center; gap: 10px; }
.fhud-team { font-size: 1.1rem; }
.fhud-score { font-size: 1.6rem; font-weight: 900; color: #e6edf3; min-width: 22px; text-align: center; }
.fhud-sep { font-size: 1.2rem; color: #8b949e; }
.fhud-timer { font-size: .9rem; color: #8b949e; margin-left: 12px; font-variant-numeric: tabular-nums; }

/* Célébration but */
.football-goal-overlay {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; z-index: 600;
  pointer-events: none;
}
.football-goal-overlay.hidden { display: none; }
.football-goal-text {
  font-size: 4rem; font-weight: 900; color: #fff;
  text-shadow: 0 0 30px #2baa9e, 0 2px 8px rgba(0,0,0,.8);
  animation: goalPop .4s cubic-bezier(.175,.885,.32,1.275);
}
.football-goal-team { font-size: 1.4rem; color: #e6edf3; margin-top: 8px; font-weight: 700; }
@keyframes goalPop {
  0%   { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Fin de match */
.football-matchend-box {
  padding: 32px 40px; min-width: 300px; align-items: center; gap: 16px;
}
.football-matchend-title { font-size: 1.6rem; font-weight: 900; color: #e6edf3; letter-spacing: .5px; }
.football-matchend-score { font-size: 2.8rem; font-weight: 900; color: #2baa9e; }
.football-matchend-teams { font-size: .9rem; color: #8b949e; text-align: center; }
.football-matchend-close {
  padding: 10px 32px; border-radius: 10px; background: #2baa9e;
  border: none; color: #fff; font-weight: 700; cursor: pointer;
}
.football-matchend-close:hover { opacity: .88; }

/* Sidebar — mode football : desktop, masque uniquement les éléments non pertinents */
#sidebar.football-active #sidebarLeaderboard,
#sidebar.football-active #changeTrackBtn,
#sidebar.football-active #voteTrackBtn,
#sidebar.football-active #ghostToggleBtn,
#sidebar.football-active #remoteToggleBtn,
#sidebar.football-active #raceBtn,
#sidebar.football-active #restartBtn { display: none !important; }

/* Décompte football */
.football-countdown-overlay {
  position: fixed; inset: 0; display: flex;
  align-items: center; justify-content: center;
  z-index: 610; pointer-events: none;
  background: rgba(0,0,0,.25);
}
.football-countdown-overlay.hidden { display: none; }
.football-countdown-num {
  font-size: 9rem; font-weight: 900; color: #fff;
  text-shadow: 0 0 40px rgba(0,0,0,.9), 0 4px 16px rgba(0,0,0,.7);
  line-height: 1;
}
@keyframes cdPulse {
  0%   { transform: scale(1.4); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.cd-pulse { animation: cdPulse .45s cubic-bezier(.175,.885,.32,1.275) both; }

/* ── Phosphor Icons sizing ───────────────────────────────── */
i[class^="ph"] {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; line-height: 1;
}

/* ════════════════════════════════════════════════════════════
   RANKED INTRO OVERLAY
   ════════════════════════════════════════════════════════════ */
#rankedIntroOverlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  overflow: hidden; background: #07070e;
}
#rankedIntroOverlay.hidden { display: none !important; }

/* Animated background beams */
.ri-beams { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ri-beam {
  position: absolute; top: -100%; width: 80px; height: 300%;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.025) 50%, transparent 65%);
  animation: ri-sweep 3s linear infinite;
}
.ri-beam:nth-child(1) { left: 12%; animation-duration: 2.4s; }
.ri-beam:nth-child(2) { left: 38%; animation-duration: 3.2s; animation-delay: .7s; width: 40px; }
.ri-beam:nth-child(3) { left: 63%; animation-duration: 2.7s; animation-delay: 1.3s; }
.ri-beam:nth-child(4) { left: 85%; animation-duration: 3.6s; animation-delay: .4s; width: 30px; }
@keyframes ri-sweep {
  from { transform: skewX(-15deg) translateY(0); }
  to   { transform: skewX(-15deg) translateY(60%); }
}

/* Tiny header bar */
.ri-header {
  position: absolute; top: 0; left: 0; right: 0; height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: .62rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.06); z-index: 2;
}

/* Two halves */
.ri-side {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 32px 32px; gap: 4px; position: relative; z-index: 2;
}
.ri-side-you {
  background: linear-gradient(180deg, rgba(43,170,158,.14) 0%, transparent 100%);
  animation: ri-from-top .5s cubic-bezier(.22,1,.36,1) both .1s;
}
.ri-side-opp {
  background: linear-gradient(0deg, rgba(231,76,60,.14) 0%, transparent 100%);
  animation: ri-from-bot .5s cubic-bezier(.22,1,.36,1) both .2s;
}
@keyframes ri-from-top {
  from { transform: translateY(-70px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes ri-from-bot {
  from { transform: translateY(70px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* VS section */
.ri-vs-wrap {
  display: flex; align-items: center; padding: 0 20px; gap: 12px;
  position: relative; z-index: 3;
  animation: ri-vs-pop .45s cubic-bezier(.34,1.56,.64,1) both .4s;
}
@keyframes ri-vs-pop {
  from { transform: scale(0) rotate(-12deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}
.ri-vs-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22)); }
.ri-vs-line-r { background: linear-gradient(90deg, rgba(255,255,255,.22), transparent); }
.ri-vs-badge {
  font-family: 'Orbitron', sans-serif; font-size: 2.2rem; font-weight: 900;
  color: #fff; letter-spacing: 4px; padding: 6px 22px;
  border: 2px solid rgba(255,255,255,.22); border-radius: 10px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(8px);
  box-shadow: 0 0 40px rgba(255,255,255,.12), inset 0 0 20px rgba(255,255,255,.04);
  text-shadow: 0 0 24px rgba(255,255,255,.6);
}

/* Rank row */
.ri-rank-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; margin-top: 6px; }
.ri-rank-row-opp { flex-direction: row-reverse; }
.ri-rank-icon { font-size: 1.8rem; line-height: 1; }
.ri-rank-name { font-size: .78rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.72); }

/* Player name */
.ri-name {
  font-family: 'Orbitron', sans-serif; font-size: 1.85rem; font-weight: 900;
  color: #fff; letter-spacing: .5px; max-width: 320px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ri-side-you .ri-name { text-shadow: 0 0 36px rgba(43,170,158,.8); }
.ri-side-opp .ri-name { text-shadow: 0 0 36px rgba(231,76,60,.8); }

/* ELO */
.ri-elo {
  font-family: 'Orbitron', sans-serif; font-size: 1.05rem; font-weight: 700;
  color: rgba(255,255,255,.82); letter-spacing: 1.5px; margin-top: 6px;
}

/* Color dot */
.ri-color-dot { width: 16px; height: 16px; border-radius: 50%; margin: 12px auto; border: 2px solid rgba(255,255,255,.25); }

/* Bot tag */
.ri-bot-tag {
  display: inline-block; margin-top: 6px;
  font-size: .62rem; font-weight: 600; letter-spacing: 2px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: 4px; padding: 2px 8px; color: rgba(255,255,255,.5);
}

/* Timer bar */
.ri-timer-bar { height: 3px; background: rgba(255,255,255,.07); position: relative; z-index: 2; overflow: hidden; }
.ri-timer-fill {
  height: 100%;
  background: linear-gradient(90deg, #2baa9e, #f59e0b, #e74c3c);
  transform-origin: left; transform: scaleX(1);
  transition: transform 3s linear;
}
.ri-timer-fill.depleting { transform: scaleX(0); }

/* ════════════════════════════════════════════════════════════
   RANKED RESULT OVERLAY  (extends .crf-overlay)
   ════════════════════════════════════════════════════════════ */
.rrf-content { gap: 14px; }

/* Outcome name (VICTOIRE / DÉFAITE) — reprend .crf-winner-name mais coloré */
.rrf-outcome-name { font-size: clamp(1.8rem, 6vw, 3rem) !important; }

/* Délta ELO dans les lignes du classement */
.rrf-elo-badge {
  font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 900;
  flex-shrink: 0;
  animation: rrf-elo-in .5s cubic-bezier(.34,1.56,.64,1) both .55s;
}
.rrf-elo-badge.positive { color: #2baa9e; }
.rrf-elo-badge.negative { color: #e74c3c; }
@keyframes rrf-elo-in {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Total ELO sous le delta */
.rrf-elo-total-inline {
  font-size: .7rem; color: rgba(255,255,255,.35); font-weight: 600;
  margin-left: 6px;
}

/* Badge "VOUS" dans la ligne */
.rrf-you-badge {
  font-size: .55rem; font-weight: 800; letter-spacing: .1em;
  background: rgba(43,170,158,.18); color: #2baa9e;
  border: 1px solid rgba(43,170,158,.3); border-radius: 4px;
  padding: 1px 5px; margin-left: 6px; vertical-align: middle;
}

/* Section rang actuel */
.rrf-new-rank {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  animation: crf-fade-in .4s ease both .75s;
}
.rrf-new-rank-icon { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.rrf-new-rank-icon .rank-img { width: 38px; height: 38px; object-fit: contain; }
.rrf-new-rank-text { display: flex; flex-direction: column; gap: 2px; }
.rrf-new-rank-lbl  { font-size: .58rem; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; }
.rrf-new-rank-name { font-size: .9rem; font-weight: 800; color: #e3e3e3; }

/* Home button */
.rrf-home-btn { margin-top: 2px; }

/* ════════════════════════════════════════════════════════════
   CREATOR CUP
   ════════════════════════════════════════════════════════════ */

/* ── Page overlay ─────────────────────────────────────────── */
.cup-page-box {
  max-width: 780px; width: 94vw; max-height: 92vh;
  overflow-y: hidden; display: flex; flex-direction: column; gap: 0;
  padding: 0;
}
/* Le contenu des onglets scrolle, pas toute la box */
.cup-tab-content { overflow-y: auto; flex: 1; }
/* L'onglet Circuits a une barre de lancement sticky en bas */
#cupTabCircuits {
  display: flex; flex-direction: column;
  overflow-y: hidden; /* scroll géré par la grille */
}
.cup-circuit-cards-wrap { flex: 1; overflow-y: auto; padding: 16px 18px 8px; }
/* Barre sticky Play */
.cup-play-bar-sticky {
  flex-shrink: 0;
  padding: 10px 18px 14px;
  background: rgba(13,15,23,.96); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ── Onglets ──────────────────────────────────────────────── */
.cup-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.02);
  flex-shrink: 0;
}
.cup-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 11px 8px; font-size: .78rem; font-weight: 700;
  color: rgba(255,255,255,.4); background: none; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: color .15s, border-color .15s;
  letter-spacing: .04em;
}
.cup-tab:hover  { color: rgba(255,255,255,.7); }
.cup-tab.active { color: #f59e0b; border-bottom-color: #f59e0b; }
.cup-tab-content { padding: 16px 18px; }
.cup-tab-content.hidden { display: none; }

/* ── Header ───────────────────────────────────────────────── */
.cup-page-header {
  position: relative;
  padding: 22px 22px 14px;
  background: linear-gradient(155deg, rgba(245,158,11,.12) 0%, rgba(245,158,11,.04) 100%);
  border-bottom: 1px solid rgba(245,158,11,.18);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
/* Bannière image en fond */
.cup-page-banner {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block;
}
/* Overlay dégradé pour lisibilité du texte */
.cup-page-header-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(10,5,20,.15) 0%,
    rgba(10,5,20,.5)  50%,
    rgba(10,5,20,.88) 100%);
}
/* Quand bannière active : header plus haut, texte au bas */
.cup-page-header--banner {
  background: transparent;
  border-bottom-color: rgba(255,255,255,.1);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 48px; /* espace libre pour la bannière au-dessus */
}
/* Close button ancré en haut à droite */
.cup-page-header--banner .close-modal-x {
  position: absolute; top: 12px; right: 14px; z-index: 3;
  background: rgba(0,0,0,.45); border-radius: 8px; color: #e6edf3;
}
/* Texte au-dessus de l'overlay */
.cup-page-header--banner .cup-page-badge,
.cup-page-header--banner .cup-page-title,
.cup-page-header--banner .cup-page-dates {
  position: relative; z-index: 2;
}
.cup-page-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #f59e0b; background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.3); border-radius: 6px;
  padding: 3px 10px; margin-bottom: 8px;
}
.cup-page-title {
  font-family: 'Orbitron', sans-serif; font-size: 1.3rem; font-weight: 900;
  color: #f0f0f0; margin: 0 0 4px; line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.cup-page-dates {
  font-size: .78rem; color: rgba(255,255,255,.5);
}

/* ── Sections ─────────────────────────────────────────────── */
.cup-page-section {
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cup-page-section:last-child { border-bottom: none; }
.cup-section-title {
  font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin: 0 0 12px;
}

/* ── Classement équipes ───────────────────────────────────── */
.cup-team-lb { display: flex; flex-direction: column; gap: 6px; }
.cup-team-lb-entry { display: flex; flex-direction: column; }
.cup-team-lb-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px; padding: 8px 12px;
  cursor: pointer; user-select: none;
  transition: background .15s;
}
.cup-team-lb-row:hover { background: rgba(255,255,255,.07); }
.cup-team-lb-rank {
  font-family: 'Orbitron', sans-serif; font-size: .9rem; font-weight: 900;
  color: rgba(255,255,255,.35); min-width: 22px; text-align: center;
}
.cup-team-lb-rank.r1 { color: #f59e0b; }
.cup-team-lb-rank.r2 { color: #9ca3af; }
.cup-team-lb-rank.r3 { color: #b45309; }
.cup-team-lb-logo {
  width: 28px; height: 28px; border-radius: 4px; object-fit: contain;
  background: rgba(255,255,255,.06); flex-shrink: 0;
}
.cup-team-lb-logo-ph {
  width: 28px; height: 28px; border-radius: 4px; flex-shrink: 0;
  background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
}
.cup-team-lb-name { flex: 1; font-weight: 700; font-size: .9rem; color: #e3e3e3; }
.cup-team-lb-chevron {
  font-size: 1rem; color: rgba(255,255,255,.3);
  transition: transform .2s;
}
.cup-team-lb-chevron.open { transform: rotate(180deg); }
.cup-team-lb-empty { font-size: .78rem; color: rgba(255,255,255,.25); font-style: italic; }

/* Panneau détail équipe */
.cup-team-lb-detail {
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.07); border-top: none;
  border-radius: 0 0 8px 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px;
}
.cup-team-detail-circuit { display: flex; flex-direction: column; gap: 3px; }
.cup-team-detail-circuit-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 2px;
}
.cup-team-detail-circuit-name { font-size: .78rem; font-weight: 700; color: #c9d1d9; }
.cup-team-detail-circuit-sub {
  font-family: 'Consolas', monospace; font-size: .72rem; color: #2baa9e; font-weight: 700;
}
.cup-team-detail-player {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 4px; font-size: .72rem;
}
.cup-team-detail-pos { color: rgba(255,255,255,.3); min-width: 18px; }
.cup-team-detail-name { flex: 1; color: #8b949e; }
.cup-team-detail-time { font-family: 'Consolas', monospace; color: #e6edf3; }
.cup-team-detail-circuit--dns .cup-team-detail-circuit-header {
  border-bottom-color: rgba(239,68,68,.2);
}
.cup-team-detail-circuit--dns .cup-team-detail-circuit-name { color: rgba(255,255,255,.4); }
.cup-team-detail-dns {
  font-family: 'Consolas', monospace; font-size: .72rem;
  color: #ef4444; font-weight: 700;
}
.cup-team-detail-player--pad { opacity: .6; }
.cup-team-detail-dns-slot { color: #ef4444; font-style: italic; } /* DNF slot */
.cup-team-detail-total {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 8px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: .75rem; color: rgba(255,255,255,.4);
}
.cup-team-detail-total-val {
  font-family: 'Consolas', monospace; font-size: .8rem; font-weight: 700; color: #e6edf3;
}
.cup-team-detail-empty { font-size: .75rem; color: rgba(255,255,255,.25); font-style: italic; margin: 0; }

/* ── Bandeau résultats finaux ─────────────────────────────── */
.cup-finished-banner {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 2px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(245,158,11,.12) 0%, rgba(139,92,246,.1) 100%);
  border-bottom: 1px solid rgba(245,158,11,.2);
}
.cup-finished-trophy { font-size: 2rem; line-height: 1; }
.cup-finished-text { display: flex; flex-direction: column; gap: 2px; }
.cup-finished-tag {
  font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #f59e0b; opacity: .8;
}
.cup-finished-winner {
  font-size: .95rem; font-weight: 800; color: #e6edf3;
}
/* Vainqueur dans l'event panel */
.cup-event-winner {
  font-size: .78rem; font-weight: 700; color: #f59e0b;
  margin-top: 6px; padding: 4px 8px;
  background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2);
  border-radius: 6px; text-align: center;
}

/* ── Avertissement choix équipe ───────────────────────────── */
.cup-warning {
  font-size: .78rem; color: #f59e0b;
  background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2);
  border-radius: 6px; padding: 8px 12px; margin-bottom: 12px;
}

/* ── Team picker ──────────────────────────────────────────── */
.cup-team-picker {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.cup-team-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 12px 16px; cursor: pointer;
  transition: border-color .15s, background .15s;
  min-width: 90px;
}
.cup-team-card:hover { background: rgba(255,255,255,.08); border-color: rgba(245,158,11,.5); }
.cup-team-card.selected { border-color: #f59e0b; background: rgba(245,158,11,.1); }
.cup-team-card img { width: 44px; height: 44px; object-fit: contain; border-radius: 4px; }
.cup-team-card-name { font-size: .78rem; font-weight: 700; color: #e3e3e3; text-align: center; }

.cup-confirm-btn {
  margin-top: 12px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000; border: none; border-radius: 8px;
  padding: 10px 24px; font-size: .88rem; font-weight: 800; cursor: pointer;
  transition: filter .15s;
}
.cup-confirm-btn:hover   { filter: brightness(1.1); }
.cup-confirm-btn:disabled { opacity: .4; cursor: default; }

/* ── Équipe actuelle (carte) ──────────────────────────────── */
.cup-my-team-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(245,158,11,.08); border: 1.5px solid rgba(245,158,11,.3);
  border-radius: 10px; padding: 12px 16px;
}
.cup-my-team-card img { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; }
.cup-my-team-card-name { font-size: 1.05rem; font-weight: 800; color: #f59e0b; }
.cup-my-team-card-label { font-size: .72rem; color: rgba(255,255,255,.4); }

/* ── Circuit picker (legacy, kept for fallback) ───────────── */
.cup-circuit-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

/* ── Grille cartes circuit ────────────────────────────────── */
.cup-circuit-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
/* Identique à .track-card */
.cup-circuit-card {
  background: linear-gradient(160deg, #121b24 0%, #0d1117 60%);
  border: 1.5px solid #1c2731;
  border-radius: 12px; overflow: hidden; cursor: pointer;
  transition: border-color .18s, transform .1s, box-shadow .18s;
  display: flex; flex-direction: column;
  position: relative; user-select: none;
}
.cup-circuit-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; width: 2px; height: 100%;
  background: linear-gradient(to bottom, #2baa9e 0%, transparent 70%);
  opacity: 0; transition: opacity .2s;
}
.cup-circuit-card:hover {
  border-color: #2a3a4a;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.cup-circuit-card:hover::before { opacity: .65; }
.cup-circuit-card.selected {
  border-color: rgba(43,170,158,.5);
  box-shadow: 0 0 0 1px rgba(43,170,158,.2), 0 4px 20px rgba(43,170,158,.15);
}
.cup-circuit-card.selected::before { opacity: 1; }

.cup-circuit-canvas { width: 100%; display: block; }

/* Identique à .track-card-info */
.cup-circuit-card-body {
  padding: 7px 10px 10px;
  border-top: 1px solid rgba(255,255,255,.04);
  background: rgba(0,0,0,.2);
  display: flex; flex-direction: column; gap: 5px;
}
.cup-circuit-card.selected .cup-circuit-card-body { border-top-color: rgba(43,170,158,.12); }

/* Identique à .track-card-name */
.cup-circuit-card-name {
  font-size: .8rem; font-weight: 700; color: #e6edf3;
  display: flex; align-items: center; justify-content: space-between;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;
}
.cup-circuit-card.selected .cup-circuit-card-name > span:first-child { color: #2baa9e; }

.cup-circuit-selected-badge {
  font-size: .6rem; font-weight: 800; letter-spacing: .08em; flex-shrink: 0;
  color: #2baa9e; background: rgba(43,170,158,.12);
  border: 1px solid rgba(43,170,158,.3); border-radius: 4px; padding: 1px 5px;
}

/* Identique à .card-lb-row */
.cup-circuit-lb { display: flex; flex-direction: column; gap: 0; }
.cup-circuit-lb-row {
  display: flex; align-items: center; gap: 4px;
  font-size: .65rem; line-height: 1.5;
}
.cup-circuit-lb-rank { width: 16px; flex-shrink: 0; font-size: .65rem; }
.cup-circuit-lb-name {
  flex: 1; color: #8b949e;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cup-circuit-lb-name.is-me { color: #2baa9e; font-weight: 700; }
.cup-circuit-lb-time {
  font-family: 'Consolas', monospace;
  font-size: .65rem; color: #8b949e; white-space: nowrap;
}
.cup-circuit-lb-time.is-me { color: #2baa9e; }

/* Mon rang — style identique à .card-lb-sep + ligne me */
.cup-circuit-my-rank {
  margin-top: 2px; padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  font-size: .65rem; line-height: 1.5;
}
.cup-circuit-my-rank-label { color: #484f58; }
.cup-circuit-my-rank-val {
  font-family: 'Consolas', monospace;
  font-size: .65rem; color: #2baa9e;
}
.cup-circuit-no-time { font-size: .67rem; color: #484f58; }

/* ── Barre de lancement (legacy, remplacée par sticky) ─────── */
.cup-play-bar { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); }
.cup-play-bar.hidden { display: none; }

/* ── Teams dans panneau événement ──────────────────────────── */
.cup-event-teams {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px;
}
.cup-event-team-pill {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; padding: 3px 10px 3px 5px;
  font-size: .75rem; color: #c0c0c0; font-weight: 600;
}
/* Top 3 */
.cup-event-team-pill.pill-gold   { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.45); color: #fbbf24; }
.cup-event-team-pill.pill-silver { background: rgba(156,163,175,.1);  border-color: rgba(156,163,175,.4);  color: #d1d5db; }
.cup-event-team-pill.pill-bronze { background: rgba(180,83,9,.12);   border-color: rgba(180,83,9,.4);    color: #cd7f32; }
.cup-event-team-rank {
  font-size: .68rem; font-weight: 800; opacity: .7;
  min-width: 13px; text-align: right; flex-shrink: 0;
}
.cup-event-team-pill.pill-gold   .cup-event-team-rank { opacity: 1; }
.cup-event-team-logo {
  width: 20px; height: 20px; border-radius: 50%; object-fit: contain;
  background: rgba(255,255,255,.08); flex-shrink: 0;
}
.cup-event-team-logo-ph {
  width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.08); flex-shrink: 0;
}

/* ── Upload logo équipe (admin) ───────────────────────────── */
.cup-logo-drop {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 54px; height: 34px; flex-shrink: 0;
  border: 1.5px dashed rgba(255,255,255,.2); border-radius: 8px;
  cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s;
}
.cup-logo-drop:hover, .cup-logo-drag { border-color: #2baa9e; background: rgba(43,170,158,.07); }
.cup-logo-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.cup-logo-preview { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; display: block; }
.cup-logo-drop-hint { font-size: .65rem; color: rgba(255,255,255,.35); pointer-events: none; white-space: nowrap; }

/* ── Bannière cup (création + édition admin) ─────────────── */
.cup-banner-drop {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 80px;
  border: 1.5px dashed rgba(139,92,246,.35);
  border-radius: 10px; background: rgba(46,16,86,.2);
  cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s;
}
.cup-banner-drop--sm { height: 52px; }
.cup-banner-drop:hover, .cup-banner-drop.cup-logo-drag {
  border-color: #8b5cf6; background: rgba(139,92,246,.1);
}
.cup-banner-drop-hint {
  font-size: .72rem; color: rgba(255,255,255,.35); pointer-events: none;
  display: flex; align-items: center; gap: 6px;
}
.cup-banner-preview {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cup-admin-banner-row {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 4px;
}
.cup-admin-banner-row > span { flex-shrink: 0; }
.cup-admin-banner-row .cup-banner-drop--sm { flex: 1; }

/* ── Bannière dans la modal événement ────────────────────── */
.cup-event-banner-wrap {
  position: relative; width: 100%; overflow: hidden;
}
.cup-event-banner-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgba(13,10,22,.75));
  pointer-events: none;
}
.cup-event-banner {
  width: 100%; height: 100px; object-fit: cover; display: block;
}

/* ── Admin Creator Cup — Récompenses ─────────────────────── */
.cup-admin-rewards-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin: 6px 0 4px;
  background: rgba(139,92,246,.07); border: 1px solid rgba(139,92,246,.2); border-radius: 8px;
}
.cup-admin-badge-preview { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cup-admin-badge-gem {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; border: 1px solid rgba(168,85,247,.3);
}
.cup-admin-badge-name { font-size: .8rem; font-weight: 600; color: #d8b4fe; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cup-admin-badge-sub  { font-size: .7rem; color: rgba(255,255,255,.35); margin-top: 1px; }
.cup-admin-rewards-given-pill {
  font-size: .7rem; font-weight: 600; color: #4ade80;
  background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.25); border-radius: 20px;
  padding: 3px 9px; display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
/* Panneau membres gagnants */
.cup-admin-members-panel {
  padding: 10px 12px; background: rgba(139,92,246,.05);
  border: 1px solid rgba(139,92,246,.15); border-top: none; border-radius: 0 0 8px 8px;
  margin-bottom: 6px;
}
.cup-members-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.cup-members-team-label { font-size: .78rem; font-weight: 700; color: #a855f7; display: flex; align-items: center; gap: 6px; }
.cup-members-count { font-size: .72rem; color: rgba(255,255,255,.4); }
.cup-member-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.cup-member-row:last-child { border-bottom: none; }
.cup-member-name { flex: 1; font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.85); }
.cup-member-badge-ok {
  font-size: .72rem; color: #4ade80; display: flex; align-items: center; gap: 4px;
}
.cup-member-badge-missing {
  font-size: .72rem; color: rgba(255,255,255,.3); display: flex; align-items: center; gap: 4px;
}
/* Séparateur Creator Cup dans le picker de badges */
.color-section-label--cup { color: #a855f7; }

/* ── Badge Creator Cup animé ────────────────────────────────── */
.cup-badge-animated {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  overflow: hidden;
  padding: 3px 8px 3px 23px; /* 5px bord + 13px icône + 5px gap */
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.85);
  white-space: nowrap;
  gap: 5px;
  border: 1.5px solid rgba(168,85,247,.45);
  min-width: 0;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(168,85,247,.3);
}
.cup-badge-animated--lg {
  font-size: .85rem;
  padding: 4px 10px 4px 28px; /* 7px bord + 16px icône + 5px gap */
  gap: 6px;
}
.cup-badge-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.cup-badge-layer.active { opacity: 1; }
.cup-badge-icon {
  width: 13px; height: 13px;
  object-fit: contain;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.cup-badge-animated--lg .cup-badge-icon { width: 16px; height: 16px; left: 7px; }
.cup-badge-label-text {
  position: relative; z-index: 2;
  pointer-events: none;
}

/* ── Mes meilleurs temps ──────────────────────────────────── */
.cup-my-times-wrap { margin-top: 14px; }
.cup-my-times-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin: 0 0 8px;
}
.cup-my-times-list { display: flex; flex-direction: column; gap: 4px; }
.cup-my-time-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .82rem; padding: 5px 10px;
  background: rgba(255,255,255,.03); border-radius: 6px;
}
.cup-my-time-circuit { color: #c0c0c0; }
.cup-my-time-ms { font-family: 'Orbitron', sans-serif; font-size: .78rem; color: #2baa9e; font-weight: 700; }
.cup-my-time-none { color: rgba(255,255,255,.2); font-style: italic; }

/* ── Bannière in-game ─────────────────────────────────────── */
.cup-ingame-banner {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 600;
  display: flex; align-items: center; gap: 6px;
  background: rgba(245,158,11,.18); backdrop-filter: blur(6px);
  border: 1px solid rgba(245,158,11,.4); border-radius: 20px;
  padding: 4px 14px;
  font-size: .78rem; font-weight: 800; color: #f59e0b;
  letter-spacing: .06em; text-transform: uppercase;
  pointer-events: none;
}
.cup-ingame-banner.hidden { display: none !important; }

/* ── Admin Creator Cup ───────────────────────────────────── */
.cup-admin-circuit-list {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.cup-admin-circuit-check {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: .78rem; color: #c0c0c0;
}
.cup-admin-circuit-check input { accent-color: #f59e0b; }
.cup-admin-circuit-check.checked { border-color: rgba(245,158,11,.4); color: #f59e0b; background: rgba(245,158,11,.07); }

.cup-admin-list { display: flex; flex-direction: column; gap: 10px; }
.cup-admin-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px; padding: 12px 16px;
}
.cup-admin-card-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.cup-admin-card-name { font-weight: 700; font-size: .92rem; color: #e3e3e3; flex: 1; }
.cup-admin-card-status {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px;
}
.cup-admin-card-status.active   { color: #2baa9e; background: rgba(43,170,158,.12); border: 1px solid rgba(43,170,158,.25); }
.cup-admin-card-status.finished { color: #6b7280; background: rgba(107,114,128,.1);  border: 1px solid rgba(107,114,128,.2); }
.cup-admin-card-status.upcoming { color: #f59e0b; background: rgba(245,158,11,.1);   border: 1px solid rgba(245,158,11,.25); }
.cup-admin-card-dates { font-size: .75rem; color: rgba(255,255,255,.4); margin-bottom: 8px; }
.cup-admin-card-teams {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.cup-admin-team-pill {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.06); border-radius: 6px; padding: 3px 8px;
  font-size: .75rem; color: #c0c0c0;
}
.cup-admin-team-pill img { width: 18px; height: 18px; object-fit: contain; border-radius: 2px; }
.cup-admin-card-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.cup-admin-add-team-form { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; align-items: center; }

@media (max-width: 500px) {
  .cup-page-box { max-height: 95vh; }
  .cup-team-picker { gap: 7px; }
  .cup-team-card { min-width: 75px; padding: 9px 10px; }
  /* Mobile : garder la taille banner comme elle était */
  .cup-page-header--banner { min-height: 220px; }
}