:root {
  --ink-0: #110d1f;
  --ink-1: #1b1530;
  --ink-2: #251d42;
  --ink-3: #312654;
  --gold: #d4af37;
  --gold-dim: #9c7f2a;
  --violet: #6c4fd1;
  --violet-bright: #8a6ae8;
  --text-main: #ece7f7;
  --text-dim: #aa9dc8;
  --border-gold: rgba(212, 175, 55, 0.35);

  /* Identité visuelle (24/09/2026) : les six encres de Lorcana servent
     d'accents, reprises du logo (logo.svg). */
  --ink-amber: #f4b223;
  --ink-amethyst: #8b5cf6;
  --ink-emerald: #22a36b;
  --ink-ruby: #d6334b;
  --ink-sapphire: #2e86de;
  --ink-steel: #9aa5b1;
  --ink-spectrum: linear-gradient(90deg, var(--ink-amber), var(--ink-ruby), var(--ink-amethyst), var(--ink-sapphire), var(--ink-emerald));
  --font-display: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #221a3d 0%, var(--ink-0) 65%);
  color: var(--text-main);
  font-family: "Spectral", Georgia, serif;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  letter-spacing: 0.04em;
  margin: 0;
}

.topbar {
  padding: 1.75rem 1rem 1.25rem;
  border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(180deg, rgba(108, 79, 209, 0.22), transparent);
}

.topbar-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

.brand-block {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

@media (max-width: 640px) {
  .brand-block {
    position: static;
    transform: none;
    width: 100%;
  }
}

/* ===== USER INFO CHIP ===== */
.user-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(49, 38, 84, 0.5);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 999px;
  padding: 0.35rem 0.75rem 0.35rem 0.45rem;
  position: relative;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-name {
  font-size: 0.82rem;
  color: var(--text-main);
  font-weight: 500;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signout-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 0.72rem;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.signout-btn:hover {
  border-color: rgba(248, 113, 113, 0.5);
  color: #f87171;
}

/* ===== BOUTON PROFIL ===== */
.profile-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
  border-radius: 999px;
  transition: opacity 0.15s;
}
.profile-btn:hover { opacity: 0.8; }

.profile-chevron {
  font-size: 0.7rem;
  color: var(--text-dim);
  opacity: 0.7;
}

/* ===== PANNEAU PROFIL ===== */
.profile-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 500;
  background: rgba(25, 18, 50, 0.97);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1rem;
  width: 280px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 20px rgba(108,79,209,0.12);
  backdrop-filter: blur(8px);
}

.profile-panel-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(212,175,55,0.15);
}

.profile-panel-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-panel-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
}

.profile-panel-email {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 2px;
  word-break: break-all;
}

.profile-panel-field {
  margin-bottom: 0.85rem;
}

.profile-panel-label {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
}

.profile-panel-input {
  width: 100%;
  background: rgba(49, 38, 84, 0.6);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 8px;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.88rem;
  padding: 0.45rem 0.75rem;
  transition: border-color 0.2s;
}
.profile-panel-input:focus {
  outline: none;
  border-color: var(--gold);
}

.profile-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.profile-save-btn {
  padding: 7px 18px;
  font-size: 0.82rem;
}

/* ===== SIGN-IN OVERLAY ===== */
.signin-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: radial-gradient(circle at top, #221a3d 0%, #110d1f 65%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.signin-card {
  background: rgba(37, 29, 66, 0.85);
  border: 1px solid var(--border-gold);
  border-radius: 18px;
  padding: 2.5rem 2rem;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 40px rgba(108, 79, 209, 0.15);
}

.signin-logo {
  display: block;
  margin: 0 auto 0.75rem;
}

.signin-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0;
  margin-bottom: 0.4rem;
}

.signin-subtitle {
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}

.signin-desc {
  font-size: 0.85rem;
  color: rgba(236, 231, 247, 0.65);
  margin: 0 0 1.75rem;
  line-height: 1.6;
}

.google-signin-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #1f1f1f;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: "Spectral", Georgia, serif;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.google-signin-btn:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  transform: translateY(-1px);
}
.google-signin-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--gold);
}

.brand-logo { flex-shrink: 0; }

@media (max-width: 640px) {
  .brand { font-size: 1.6rem; }
  .brand-logo { width: 32px; height: 32px; }
}

.brand-shimmer {
  background: linear-gradient(100deg, var(--gold) 40%, #fdf3c8 50%, var(--gold) 60%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brandShimmer 3.5s ease-in-out infinite;
}

@keyframes brandShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.subbrand {
  margin-top: 0.5rem;
  color: var(--text-dim);
  font-style: italic;
  letter-spacing: 0.03em;
}

.tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 1.25rem 1rem 0;
}

.tab {
  font-family: "Fraunces", Georgia, serif;
  background: var(--ink-2);
  border: 1px solid var(--border-gold);
  color: var(--text-dim);
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}

.tab:hover {
  border-color: var(--gold);
  color: var(--text-main);
}

.tab.active {
  background: linear-gradient(135deg, var(--gold-dim), var(--gold));
  color: #1f1530;
  border-color: var(--gold);
  font-weight: 700;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

.view { display: none; }
.view.active { display: block; animation: fadein 0.25s ease; }

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

.card {
  background: linear-gradient(160deg, var(--ink-2), var(--ink-1));
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

.card h2 {
  color: var(--gold);
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-gold);
  padding-bottom: 0.75rem;
}

.hint {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-top: -0.5rem;
  margin-bottom: 1.25rem;
}

.field-row {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.field-row[hidden] {
  display: none;
}

.field {
  flex: 1;
  min-width: 200px;
  margin-bottom: 1.1rem;
}

label {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
}

select, input[type="date"], input[type="url"], input[type="text"], input[type="number"], textarea {
  width: 100%;
  background: var(--ink-0);
  border: 1px solid var(--border-gold);
  color: var(--text-main);
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  font-family: "Spectral", serif;
  font-size: 0.95rem;
}

select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

textarea { resize: vertical; }

.result-toggle {
  display: flex;
  gap: 0.6rem;
}

.result-toggle input[type="radio"] {
  display: none;
}

.pill {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border-gold);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-dim);
  transition: all 0.15s ease;
}

.pill-win:hover { border-color: var(--gold); }
.pill-loss:hover { border-color: var(--violet-bright); }

/* Checked states génériques — s'applique à tous les toggles du formulaire */
input[type="radio"]:checked + .pill {
  background: linear-gradient(135deg, rgba(212,175,55,0.25), rgba(212,175,55,0.45));
  color: #f3e6ff;
  border-color: var(--gold);
}

input[type="radio"]:checked + .pill-win {
  background: linear-gradient(135deg, var(--gold-dim), var(--gold));
  color: #1f1530;
  border-color: var(--gold);
}

input[type="radio"]:checked + .pill-loss {
  background: linear-gradient(135deg, var(--violet), var(--violet-bright));
  color: #f3e6ff;
  border-color: var(--violet-bright);
}

input[type="radio"]:checked + .pill-first {
  background: rgba(56, 130, 220, 0.55);
  color: #fff;
  border-color: #60a5fa;
}

input[type="radio"]:checked + .pill-second {
  background: rgba(168, 85, 247, 0.55);
  color: #fff;
  border-color: #c084fc;
}

/* Bannière de mode édition (formulaire) */
.edit-banner {
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--text-main);
  padding: 0.65rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
}

.link-btn {
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  font-weight: 700;
  text-decoration: underline;
  font-size: 0.85rem;
  padding: 0;
}
.link-btn:hover { color: var(--gold-dim); }

/* Sélecteur de couleurs d'encre (jusqu'à 2 par deck) */
.ink-picker {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

.ink-pill {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 2px solid var(--border-gold);
  cursor: pointer;
  background: var(--ink-0);
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.15s ease;
}

.ink-pill input { display: none; }

.ink-pill:hover { border-color: var(--gold); }

.ink-pill:has(input:checked) {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.12);
  color: var(--text-main);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.25);
}

.ink-pill-dot {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ink-pill-dot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Petites pastilles utilisées dans la matrice, le classement et l'historique */
.ink-dot {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ink-dot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ink-dot-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Note du matchup (étoiles) */
.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 0.25rem;
}

.star-rating input {
  display: none;
}

.star-rating label {
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.12s ease;
}

.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
  color: var(--gold);
}

.star-hint {
  margin-top: 0.4rem;
  margin-bottom: 0;
}

.static-stars {
  color: var(--gold);
  letter-spacing: 0.05em;
  font-size: 0.85rem;
}

.rating-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--ink-3);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.rating-summary .static-stars {
  font-size: 1.2rem;
}

.rating-summary-text {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.btn-primary {
  font-family: "Fraunces", Georgia, serif;
  background-image: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.85) 50%, transparent 100%), linear-gradient(135deg, var(--gold-dim), var(--gold));
  background-size: 50% 100%, 100% 100%;
  background-position: -100% 0, 0 0;
  background-repeat: no-repeat;
  color: #1f1530;
  border: none;
  padding: 0.75rem 1.75rem;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 0.9rem;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.25);
  transition: transform 0.15s ease;
  animation: btnShimmer 3.2s ease-in-out infinite;
}

.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

@keyframes btnShimmer {
  0% { background-position: -100% 0, 0 0; }
  100% { background-position: 200% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-shimmer, .btn-primary, .view.active {
    animation: none;
  }
}

.form-status {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--gold);
  min-height: 1.2em;
}
.form-status.error { color: var(--violet-bright); }

.empty-state {
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  padding: 2rem 0;
}

.empty-state-card {
  text-align: center;
  padding: 3rem 1.5rem;
  background: rgba(212, 175, 55, 0.04);
  border: 1px dashed rgba(212, 175, 55, 0.25);
  border-radius: 12px;
}
.empty-state-icon {
  font-size: 2.4rem;
  margin-bottom: 0.75rem;
  opacity: 0.75;
}
.empty-state-title {
  font-family: "Fraunces", Georgia, serif;
  color: var(--gold);
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}
.empty-state-sub {
  color: var(--text-dim);
  font-size: 0.85rem;
  max-width: 380px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Sous-titres à l'intérieur d'une carte */
.subhead {
  color: var(--gold);
  font-size: 1rem;
  margin: 1.75rem 0 0.9rem;
}

.subhead:first-of-type { margin-top: 0; }

/* Classement / bilan par couleur */
table.leaderboard {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
  margin-bottom: 0.5rem;
}

table.leaderboard th, table.leaderboard td {
  border: 1px solid var(--border-gold);
  padding: 0.55rem 0.7rem;
  text-align: center;
}

table.leaderboard th {
  font-family: "Fraunces", Georgia, serif;
  background: var(--ink-3);
  color: var(--gold);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

table.leaderboard td.deck-name-cell {
  text-align: left;
  font-weight: 600;
}

/* Matrice */
.matrix-wrapper {
  overflow-x: auto;
}

/* Barre de scroll horizontal dupliquée en haut du tableau (la matrice peut
   être haute, on évite d'avoir à descendre tout en bas de la page pour
   attraper la scrollbar native). Ne sert qu'à piloter le scroll du wrapper
   réel via JS (cf. renderMatrix()) ; masquée automatiquement quand le
   tableau tient déjà entièrement dans la largeur visible. */
.matrix-top-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  height: 16px;
  margin-bottom: 2px;
}
.matrix-top-scroll-inner {
  height: 1px;
}
.matrix-top-scroll.is-hidden {
  display: none;
}

table.matrix {
  border-collapse: separate;
  border-spacing: 3px;
  width: 100%;
  font-size: 0.82rem;
}

table.matrix th, table.matrix td {
  padding: 0.5rem 0.6rem;
  text-align: center;
  white-space: nowrap;
  border-radius: 6px;
}

table.matrix th {
  font-family: "Fraunces", Georgia, serif;
  background: var(--ink-3);
  color: var(--gold);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  padding: 0.4rem;
}

table.matrix th.corner {
  background: transparent;
}

table.matrix th.row-header.pinned-header {
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.5);
  /* Pas de `position: relative` ici : ça écrasait le `position: sticky` de la
     colonne figée (sélecteur plus spécifique), donc l'en-tête d'une ligne
     ÉPINGLÉE défilait au scroll horizontal au lieu de rester collé à gauche
     (coin vide + chevauchement). `sticky` est déjà un élément positionné, il
     ancre très bien le 📌 ci-dessous. */
}
table.matrix th.row-header.pinned-header::after {
  content: "📌";
  font-size: 0.65rem;
  position: absolute;
  top: 2px;
  right: 3px;
  opacity: 0.85;
}
table.matrix th.row-header {
  cursor: pointer;
  transition: background 0.15s ease;
}
table.matrix th.row-header:hover {
  background: rgba(212, 175, 55, 0.12);
}
table.matrix th.row-header.pinned-header {
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.4);
}

table.matrix td.cell {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 8px;
  transition: transform 0.12s ease, filter 0.12s ease;
}

table.matrix td.cell:hover {
  filter: brightness(1.15);
  transform: scale(1.04);
}

table.matrix td.cell .record {
  display: block;
  font-size: 0.65rem;
  font-weight: 400;
  opacity: 0.65;
  margin-top: 2px;
  letter-spacing: 0.02em;
}

table.matrix td.cell.mirror-cell {
  box-shadow: 0 0 0 2px rgba(138, 106, 232, 0.5);
}

.matrix-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
}

.matrix-legend-bar {
  width: 220px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e0473e, var(--gold) 50%, #2ecc71);
}

.matrix-legend-label {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

table.matrix td.empty-cell {
  background: rgba(49, 38, 84, 0.35);
  color: var(--text-dim);
  cursor: default;
  font-weight: 400;
  border-radius: 8px;
  opacity: 0.5;
}


/* Panneaux matchup inline (matrice) */
#matchup-panels {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.matchup-panel {
  background: var(--ink-0);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  overflow: hidden;
  animation: fadein 0.2s ease;
}

.matchup-panel-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: rgba(212, 175, 55, 0.07);
  border-bottom: 1px solid var(--border-gold);
  flex-wrap: wrap;
}

.matchup-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  flex: 1;
}

.vs-sep { opacity: 0.45; font-weight: 400; }

.matchup-panel-stats {
  font-size: 0.78rem;
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}

.matchup-panel-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.1rem;
  transition: color 0.1s;
}
.matchup-panel-close:hover { color: var(--text-main); }

.matchup-panel-matches {
  padding: 0.6rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 220px;
  overflow-y: auto;
}

.matchup-panel-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.83rem;
  flex-wrap: wrap;
}

.matchup-panel-vs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.matchup-panel-date {
  color: var(--text-dim);
  font-size: 0.76rem;
}

.matchup-panel-notes {
  color: var(--text-dim);
  font-size: 0.8rem;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

/* Filtres Historique */
.filter-bar {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.filter-label {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.ink-filter-row {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.ink-filter-btn {
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 2px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ink-filter-btn img {
  width: 34px;
  height: 34px;
  display: block;
}

.ink-filter-btn:hover {
  opacity: 0.8;
  transform: scale(1.08);
}

.ink-filter-btn.active {
  opacity: 1;
  border-color: var(--gold);
  border-radius: 8px;
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

/* En-têtes de la matrice en mode Archétypes (badges + nom court) */
.arch-header {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.arch-header-name {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

.set-filter-row {
  display: flex;
  flex-wrap: wrap; /* la liste des joueurs peut dépasser une ligne désormais */
  gap: 0.4rem;
  row-gap: 0.35rem;
}

.set-filter-btn {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.75rem;
  background: var(--ink-2);
  border: 1px solid var(--border-gold);
  color: var(--text-dim);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.04em;
}

.set-filter-btn:hover {
  border-color: var(--gold);
  color: var(--text-main);
}

.set-filter-btn.active {
  background: linear-gradient(135deg, var(--gold-dim), var(--gold));
  color: #1f1530;
  border-color: var(--gold);
  font-weight: 700;
}

/* Historique */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.history-item {
  border: 1px solid var(--border-gold);
  border-left: 4px solid var(--border-gold);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  background: var(--ink-1);
  transition: border-left-color 0.2s;
}
.history-item.result-win {
  border-left-color: #4caf7d;
}
.history-item.result-loss {
  border-left-color: #e05050;
}

.history-item .meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}

.history-item .matchup {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  color: var(--text-main);
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.history-item .date {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-win {
  background: rgba(212, 175, 55, 0.18);
  color: var(--gold);
  border: 1px solid var(--gold);
}

.badge-loss {
  background: rgba(108, 79, 209, 0.25);
  color: #c9b6ff;
  border: 1px solid var(--violet-bright);
}

.history-item .notes {
  color: var(--text-dim);
  font-size: 0.88rem;
  white-space: pre-wrap;
}

.history-item .notes:empty::before {
  content: "Pas de notes.";
  font-style: italic;
  opacity: 0.6;
}

.delete-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.75rem;
  text-decoration: underline;
  padding: 0;
}
.delete-btn:hover { color: var(--violet-bright); }

.edit-btn { margin-right: 1.1rem; }
.edit-btn:hover { color: var(--gold); }

/* ===== ORDRE DE JEU (1er / 2ème joueur) ===== */
.pill-first  { background: rgba(56, 130, 220, 0.18); color: #93c5fd; border-color: rgba(56,130,220,0.4); }
.pill-second { background: rgba(168, 85, 247, 0.18); color: #d8b4fe; border-color: rgba(168,85,247,0.4); }


.badge-fp {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.fp-first  { background: rgba(56, 130, 220, 0.25); color: #93c5fd; }
.fp-second { background: rgba(168, 85, 247, 0.25); color: #d8b4fe; }

.player-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  color: var(--text-dim);
  vertical-align: middle;
}
.opponent-badge {
  background: rgba(212, 175, 55, 0.1);
  color: #e6c96a;
}
.opponent-badge.opponent-member {
  background: rgba(76, 175, 125, 0.15);
  color: #8fe0b8;
  border: 1px solid rgba(76, 175, 125, 0.4);
}

/* ===== BANDEAU RÉSUMÉ RAPIDE (sous les onglets, toujours visible) ===== */
.quick-stats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0.75rem auto 0;
  padding: 0.55rem 1rem;
  max-width: 980px;
  background: rgba(49, 38, 84, 0.45);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
}
.quick-stat {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.quick-stat-num {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
}
.quick-stat-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.quick-stat-matchup {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  padding-left: 0.9rem;
  border-left: 1px solid rgba(255,255,255,0.12);
}
.quick-stat-matchup-label {
  color: var(--text-dim);
  font-size: 0.75rem;
}
.quick-stat-matchup-wr {
  font-weight: 700;
}
.quick-stat-matchup-n {
  color: var(--text-dim);
  font-size: 0.75rem;
}
.quick-stat-hint {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-style: italic;
}
@media (max-width: 640px) {
  .quick-stats-bar { gap: 0.6rem; padding: 0.5rem 0.75rem; }
  .quick-stat-matchup { padding-left: 0.6rem; }
}

/* ===== STATS 1ER / 2ÈME JOUEUR dans bilan ===== */
.fp-stats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 1rem;
}
.fp-stat-card {
  flex: 1;
  background: rgba(49, 38, 84, 0.45);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fp-stat-label { font-size: 0.75rem; color: rgba(243,230,255,0.55); text-transform: uppercase; letter-spacing: 0.06em; }
.fp-stat-val   { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.fp-stat-count { font-size: 0.78rem; color: rgba(243,230,255,0.4); }

/* ===== TOOLTIP MATRICE ===== */
#matrix-tooltip {
  position: fixed;
  z-index: 9999;
  display: none;
  background: rgba(14, 8, 36, 0.97);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  pointer-events: none;
  min-width: 175px;
  max-width: 255px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55);
}
.tt-header { font-size: 0.78rem; color: rgba(243,230,255,0.5); margin-bottom: 7px; line-height: 1.3; }
.tt-vs     { opacity: 0.45; }
.tt-stats  { display: flex; gap: 14px; margin-bottom: 6px; align-items: baseline; }
.tt-win    { font-size: 1.15rem; font-weight: 700; color: #4ade80; }
.tt-loss   { font-size: 1.15rem; font-weight: 700; color: #f87171; }
.tt-pct    { font-size: 1.15rem; font-weight: 700; color: #f3e6ff; margin-left: auto; }
.tt-rating { font-size: 0.82rem; color: #fbbf24; margin-bottom: 4px; }
.tt-avg    { color: rgba(243,230,255,0.6); font-size: 0.75rem; margin-left: 3px; }
.tt-note {
  font-size: 0.76rem;
  color: rgba(243,230,255,0.45);
  font-style: italic;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 6px;
  margin-top: 4px;
  line-height: 1.4;
}

/* ===== INFINITE SCROLL SENTINEL ===== */
#history-sentinel { height: 1px; }

/* ===== LIENS DANS LES NOTES ===== */
.note-link {
  color: #38bdf8;
  text-decoration: underline;
  word-break: break-all;
  font-weight: 500;
  transition: color 0.15s;
}
.note-link:hover { color: #7dd3fc; text-decoration: none; }

/* ===== BO3 FORMULAIRE ===== */
.bo3-games {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0.75rem;
}
.bo3-game-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bo3-game-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(243,230,255,0.5);
  width: 22px;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}
.bo3-score-display {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(49,38,84,0.5);
  color: rgba(243,230,255,0.55);
  display: inline-block;
  margin-top: 4px;
}
.bo3-score-display.bo3-win  { color: #4ade80; background: rgba(74,222,128,0.12); }
.bo3-score-display.bo3-loss { color: #f87171; background: rgba(248,113,113,0.12); }

/* ===== BO3 HISTORIQUE ===== */
.bo3-history-games {
  display: flex;
  gap: 10px;
  margin: 4px 0 2px;
  flex-wrap: wrap;
}
.bo3-history-game {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(49,38,84,0.45);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.78rem;
}
.bo3-g-num  { color: rgba(243,230,255,0.4); font-weight: 600; }
.bo3-g-win  { color: #4ade80; font-weight: 700; }
.bo3-g-loss { color: #f87171; font-weight: 700; }
.bo3-g-fp   { color: rgba(243,230,255,0.45); font-size: 0.72rem; }

/* ===== BOUTON REPLAY ===== */
.replay-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(212,175,55,0.85);
  border: 1px solid #d4af37;
  color: #1a0f2e;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: all 0.15s;
}
.replay-btn:hover {
  background: #d4af37;
  color: #0e0824;
}

/* ===== TOOLTIP 1ER / 2ÈME JOUEUR ===== */
.tt-fp-row {
  display: flex;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 6px;
  margin: 4px 0 2px;
}
.tt-fp-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.tt-fp-label { font-size: 0.72rem; color: rgba(243,230,255,0.4); }
.tt-fp-val   { font-size: 0.95rem; font-weight: 700; }
.tt-fp-count { font-size: 0.68rem; color: rgba(243,230,255,0.35); }
.tt-fp-item-wide {
  justify-content: space-between;
  width: 170px;
  padding: 2px 4px;
  border-radius: 5px;
}
.tt-fp-item-active {
  background: rgba(255,255,255,0.08);
}

/* ===== IMPORT DUELS.INK ===== */
.import-card {
  margin-top: 1.5rem;
}
.import-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.5rem;
  letter-spacing: 0.03em;
}
.import-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0.75rem 0;
}
.import-file-btn {
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(212,175,55,0.2);
  border: 1px solid rgba(212,175,55,0.45);
  color: #f3e6ff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.import-file-btn:hover {
  background: rgba(212,175,55,0.35);
}
.import-file-name {
  font-size: 0.8rem;
  color: rgba(243,230,255,0.45);
  font-style: italic;
}
.import-summary {
  font-size: 0.88rem;
  color: rgba(243,230,255,0.75);
  margin: 0.25rem 0;
}

/* Sections internes de la carte import */
.import-section {
  padding: 1rem 0;
  border-top: 1px solid rgba(212,175,55,0.15);
}
.import-section:first-child {
  border-top: none;
  padding-top: 0.25rem;
}
.import-section-csv {
  opacity: 0.85;
}
.import-section-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.import-badge-new {
  background: rgba(108,79,209,0.35);
  border: 1px solid rgba(138,106,232,0.5);
  color: #c8b8ff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.import-token-row {
  display: flex;
  gap: 8px;
  margin: 0.6rem 0 0.5rem;
}
.import-token-row input[type="password"] {
  flex: 1;
  min-width: 0;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(212,175,55,0.3);
  background: rgba(17,13,31,0.6);
  color: var(--text-main);
  font-size: 0.85rem;
  font-family: monospace;
}
.import-token-row input[type="password"]:focus {
  outline: none;
  border-color: var(--gold);
}
/* Bouton secondaire — sélecteur orphelin corrigé (fusionnait silencieusement
   avec la règle suivante depuis un edit précédent, donc jamais stylé). */
.btn-secondary {
  font-family: "Fraunces", Georgia, serif;
  background: rgba(255,255,255,0.06);
  color: var(--text-main);
  border: 1px solid rgba(212, 175, 55, 0.35);
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s, border-color 0.15s;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.11);
  border-color: var(--gold);
}

.btn-danger {
  font-family: "Fraunces", Georgia, serif;
  background: linear-gradient(135deg, #7a2a2a, #a83a3a);
  color: #ffe8e8;
  border: 1px solid #c85050;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s, border-color 0.15s;
}
.btn-danger:hover {
  background: linear-gradient(135deg, #8a3232, #b84545);
  border-color: #e07070;
}

/* Modal confirm()/alert() maison : réutilise .deck-modal-overlay/-box mais
   centrée verticalement et plus étroite (dialogue court, pas de contenu long). */
.confirm-modal-overlay {
  align-items: center;
}
.confirm-modal-box {
  max-width: 420px;
  text-align: center;
}
.confirm-modal-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  color: #e0d4f7;
  margin: 0 0 0.75rem;
}
.confirm-modal-message {
  font-size: 0.9rem;
  color: #c4b0e8;
  line-height: 1.5;
  margin: 0 0 1.25rem;
  white-space: pre-line;
}
.confirm-modal-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

/* ===== ONGLET JOUEURS ===== */
.players-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.players-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
@media (max-width: 640px) {
  .players-table { font-size: 0.78rem; }
  .players-table th, .players-table td { padding: 0.45rem 0.5rem; white-space: nowrap; }
  .sync-player-status { max-width: 140px; white-space: normal; }
}
.players-table th {
  text-align: left;
  padding: 0.5rem 0.8rem;
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.players-table td {
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: middle;
}
.players-table tr:last-child td { border-bottom: none; }
.players-me td { background: rgba(212,175,55,0.06); }
.player-pseudo { font-weight: 600; }
.me-tag { font-size: 0.72rem; font-weight: 400; opacity: 0.55; }
.api-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 700;
}
.api-linked  { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.35); }
.api-missing { background: rgba(255,255,255,0.06); color: var(--text-dim); border: 1px solid rgba(255,255,255,0.1); }
.last-seen { color: var(--text-dim); font-size: 0.8rem; }
.sync-player-btn {
  background: rgba(108, 79, 209, 0.18);
  color: var(--violet-bright);
  border: 1px solid rgba(108, 79, 209, 0.5);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.sync-player-btn:hover { background: rgba(108, 79, 209, 0.32); }
.sync-player-btn:disabled { opacity: 0.6; cursor: default; }
.remove-player-btn {
  background: rgba(224, 71, 62, 0.15);
  color: #f0a0a0;
  border: 1px solid rgba(224, 71, 62, 0.4);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  margin-left: 0.4rem;
}
.remove-player-btn:hover { background: rgba(224, 71, 62, 0.3); }
.remove-player-btn:disabled { opacity: 0.6; cursor: default; }
.sync-player-status {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 0.3rem;
  max-width: 220px;
}

/* ===== PANNEAUX ADMIN REPLIABLES (Joueurs) ===== */
.admin-details-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  color: var(--gold);
  letter-spacing: 0.02em;
  user-select: none;
}
/* Titre (et éventuel badge) groupés à gauche, flèche à droite ; un peu d'air
   entre deux panneaux repliés. */
.admin-details { margin-bottom: 0.9rem; }
.admin-details-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.2rem; }
.admin-details-summary::-webkit-details-marker { display: none; }
.admin-details-summary::marker { content: ''; }
.admin-details-summary::after {
  content: '▾';
  font-size: 0.85rem;
  opacity: 0.55;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.admin-details:not([open]) .admin-details-summary::after {
  transform: rotate(-90deg);
}
.admin-details:not([open]) .admin-details-summary {
  margin-bottom: 0;
}
.admin-details-body {
  margin-top: 0.85rem;
  animation: adminPanelReveal 0.18s ease;
}
@keyframes adminPanelReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== VALIDATION DES INSCRIPTIONS (ADMIN) ===== */
.pending-panel {
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
}
.pending-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.pending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  background: var(--ink-2);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
}
.pending-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.pending-name {
  font-weight: 600;
  color: var(--text-main);
  font-size: 0.9rem;
}
.pending-email {
  font-size: 0.75rem;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pending-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.pending-approve-btn {
  background: rgba(76,175,125,0.18);
  color: #8fe0b8;
  border: 1px solid rgba(76,175,125,0.5);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.pending-approve-btn:hover { background: rgba(76,175,125,0.3); }
.pending-approve-btn:disabled { opacity: 0.6; cursor: default; }
.pending-reject-btn {
  background: rgba(224,71,62,0.15);
  color: #f0a0a0;
  border: 1px solid rgba(224,71,62,0.4);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.pending-reject-btn:hover { background: rgba(224,71,62,0.28); }
.pending-reject-btn:disabled { opacity: 0.6; cursor: default; }

/* ===== TABLEAU DE BORD ADMIN ===== */
.admin-stats-panel {
  border-color: rgba(108, 79, 209, 0.35);
  background: rgba(108, 79, 209, 0.06);
}
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.admin-stat-card {
  background: var(--ink-2);
  border: 1px solid rgba(108, 79, 209, 0.3);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.admin-stat-label {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-stat-value {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.3rem;
  color: var(--text-main);
}
.admin-stat-value-sm {
  font-family: inherit;
  font-size: 0.85rem;
}
.admin-stats-note {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin: 0.75rem 0 0;
  line-height: 1.5;
}

/* ===== ANOMALIES DÉTECTÉES (ADMIN) ===== */
.anomalies-panel {
  border-color: rgba(224, 160, 55, 0.35);
  background: rgba(224, 160, 55, 0.06);
}
.anomalies-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.anomaly-item {
  background: var(--ink-2);
  border: 1px solid rgba(224, 160, 55, 0.3);
  border-radius: 8px;
  padding: 0.6rem 0.75rem 0.85rem;
}
.anomaly-reason-badge {
  display: inline-block;
  background: rgba(224, 160, 55, 0.16);
  color: #f0c878;
  border: 1px solid rgba(224, 160, 55, 0.4);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.anomaly-item .history-item {
  margin: 0;
  border-width: 1px;
}

/* ===== ZONE DANGER (ADMIN) ===== */
.danger-zone {
  background: rgba(224, 71, 62, 0.06);
  border: 1px solid rgba(224, 71, 62, 0.35);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-top: 1.5rem;
}
.danger-zone-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0.4rem 0 0.9rem;
}
.danger-zone-confirm {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
#danger-confirm-input {
  background: var(--ink-0);
  border: 1px solid rgba(224, 71, 62, 0.4);
  color: var(--text-main);
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  font-size: 0.85rem;
  flex: 1;
  min-width: 180px;
}
#danger-confirm-input:focus {
  outline: none;
  border-color: #e0473e;
}
.danger-delete-btn {
  background: rgba(224, 71, 62, 0.18);
  color: #f0a0a0;
  border: 1px solid rgba(224, 71, 62, 0.6);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.danger-delete-btn:hover:not(:disabled) { background: rgba(224, 71, 62, 0.32); }
.danger-delete-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.danger-zone-status {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 0.6rem 0 0;
}

/* ===== ONGLET COMMUNAUTÉ ===== */
.community-desc {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}
.community-subtitle {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}
.community-matrix .pvp-header {
  font-size: 0.75rem;
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pvp-row-header {
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  padding: 0.4rem 0.7rem;
  white-space: nowrap;
}
.pvp-me {
  color: var(--gold) !important;
}
.matrix-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Sur mobile, un balayage horizontal qui atteint le bord d'un conteneur
     scrollable est transmis à la page, où Chrome Android l'interprète comme un
     geste « page précédente ». On perd le défilement du tableau et on quitte
     l'onglet. `contain` garde le geste dans le tableau. */
  overscroll-behavior-x: contain;
}

/* ===== Matrice des archétypes : largeur de la colonne figée ================
   Les en-têtes de cette matrice portent le NOM COMPLET de l'archétype, en
   `white-space: nowrap` (cf. .arch-header). La première colonne étant FIGÉE,
   elle pouvait occuper la moitié d'un écran de téléphone : il ne restait qu'une
   fente pour faire défiler les cellules, d'où un défilement horizontal pénible
   et l'impression que la colonne figée chevauche le tableau.
   Les autres matrices n'ont pas le problème : leurs en-têtes sont des pastilles
   d'encre, de largeur fixe.
   Le nom est donc tronqué ; le nom complet reste en infobulle sur .arch-header,
   qui le porte déjà. */
.arch-header-name {
  display: inline-block;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}


/* ===== MATRICE — RESPONSIVE MOBILE ===== */

/* Ombre indicatrice "encore du contenu à droite". Portée par une COQUILLE
   NON-scrollante autour du wrapper : mise sur .matrix-wrapper (qui scrolle),
   le ::after en position:absolute est ancré en coordonnées de contenu et
   "voyageait" en travers du tableau pendant le scroll horizontal — d'où la
   marque verticale qui se déplaçait puis disparaissait au bout. Sur la
   coquille fixe, elle reste collée au bord droit visible. */
.matrix-scroll-shell {
  position: relative;
}
.matrix-wrapper {
  position: relative;
}
.matrix-scroll-shell::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 32px;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(15,10,35,0.7));
  pointer-events: none;
  border-radius: 0 8px 8px 0;
  transition: opacity 0.2s;
}
.matrix-scroll-shell.scrolled-right::after { opacity: 0; }

/* Sticky première colonne (row headers) */
table.matrix th.row-header,
table.matrix th.corner {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #1a1040;
}
/* Séparateur/ombre de la colonne figée via un pseudo-élément à bords définis
   plutôt qu'un box-shadow : sur un élément position:sticky, box-shadow laissait
   une traînée verticale ("marque" qui reste) pendant le scroll horizontal
   (invalidation de repeinte incomplète sous Chromium). Un ::before se recompose
   avec la cellule, sans smear. */
table.matrix th.row-header::before,
table.matrix th.corner::before {
  content: "";
  position: absolute;
  top: 0;
  /* Le `border-spacing` de 3px laisse une bande que la colonne figée ne couvre
     PAS : les cellules qui défilent dessous y restaient visibles, ce qui se lit
     comme une superposition. L'ombre démarre donc par 3px opaques, qui bouchent
     exactement cet interstice, avant le dégradé de séparation. */
  right: -11px;
  width: 11px;
  height: 100%;
  background: linear-gradient(to right,
    #1a1040 0, #1a1040 3px,
    rgba(0,0,0,0.38) 3px, transparent 11px);
  pointer-events: none;
}
table.matrix th.row-header.pinned-header {
  background: rgba(30,18,70,0.98);
}

@media (max-width: 640px) {
  /* Réduire les icônes dans la matrice */
  .matrix-wrapper .ink-dot,
  .matrix-scroll .ink-dot {
    width: 18px;
    height: 18px;
  }

  /* Cellules plus compactes */
  table.matrix th, table.matrix td {
    padding: 0.3rem 0.2rem;
  }

  table.matrix {
    font-size: 0.72rem;
    border-spacing: 2px;
  }

  /* Colonne figée encore plus courte sur téléphone : c'est là que la place
     manque le plus, et donc là que le tableau devenait impraticable. */
  .arch-header-name { max-width: 62px; }

  /* Winrate + record plus petits */
  table.matrix td.cell {
    font-size: 0.82rem;
    border-radius: 6px;
    min-width: 44px;
  }

  table.matrix td.cell .record {
    font-size: 0.58rem;
  }

  /* Headers de colonne : icônes seules, pas de texte */
  table.matrix th:not(.row-header):not(.corner) {
    padding: 0.25rem;
  }

  /* Désactiver hover scale (mauvais sur touch) */
  table.matrix td.cell:hover {
    transform: none;
    filter: none;
  }
  table.matrix td.cell:active {
    filter: brightness(1.2);
  }
}

/* ===== RESPONSIVE MOBILE GLOBAL ===== */

/* Empêcher le débordement horizontal global.
   ⚠️ `overflow-x: hidden` faisait du <body> un conteneur de défilement, ce qui
   NEUTRALISE `position: sticky` sur ses descendants (barre d'onglets qui ne
   collait pas). `overflow-x: clip` coupe le débordement SANS créer de
   conteneur de défilement : le sticky redevient fonctionnel. */
html, body {
  overflow-x: clip;
}
.card, .section-card {
  min-width: 0;
  box-sizing: border-box;
}

/* Leaderboard : scroll horizontal propre */
.leaderboard-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
table.leaderboard {
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
}

/* (Colonne figée + ombre de scroll de la matrice : définies plus haut — le
   doublon qui existait ici a été retiré le 21/07/2026, il réappliquait le
   box-shadow smearing sur la colonne sticky.) */

@media (max-width: 640px) {

  /* ---- Conteneur principal ---- */
  main { padding: 0.75rem 0.5rem 4rem; }
  .card { padding: 1rem 0.75rem; border-radius: 10px; }
  .section-card { padding: 1rem 0.75rem; border-radius: 10px; }

  /* ---- ONGLETS scrollables ---- */
  .tabs {
    /* flex-start = scroll démarre depuis le premier onglet (center crée du débordement symétrique) */
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.4rem;
    padding: 0.75rem 0.75rem 0;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    white-space: nowrap;
    flex-shrink: 0;
    /* Taille réduite mais lisible — la police de titre a besoin d'un peu d'espace */
    font-size: 0.78rem;
    padding: 0.5rem 0.9rem;
    letter-spacing: 0.03em;
  }

  /* ---- MATRICE DES MATCHUPS ---- */
  .matrix-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.matrix {
    font-size: 0.72rem;
    border-spacing: 2px;
  }
  table.matrix th, table.matrix td {
    padding: 0.28rem 0.18rem;
  }
  table.matrix td.cell {
    font-size: 0.8rem;
    min-width: 40px;
    border-radius: 6px;
    /* Empêcher le texte de déborder la cellule */
    overflow: hidden;
  }
  table.matrix td.cell .record {
    font-size: 0.57rem;
    white-space: nowrap;
  }
  .matrix-wrapper .ink-dot,
  .matrix-scroll .ink-dot {
    width: 18px;
    height: 18px;
  }
  /* Désactiver hover scale sur touch */
  table.matrix td.cell:hover { transform: none; filter: none; }
  table.matrix td.cell:active { filter: brightness(1.2); }

  /* ---- BILAN ENCRES (leaderboard) ---- */
  .leaderboard-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Ombre droite indicatrice */
    background:
      linear-gradient(to right, transparent, transparent),
      linear-gradient(to left, rgba(15,10,35,0.6) 0%, transparent 40px);
    background-attachment: local, scroll;
  }
  table.leaderboard {
    font-size: 0.78rem;
    white-space: nowrap;
  }
  table.leaderboard th, table.leaderboard td {
    padding: 0.35rem 0.4rem;
  }
  /* Abréger V / D / % */
  table.leaderboard thead th:nth-child(3) { font-size: 0; }
  table.leaderboard thead th:nth-child(3)::after { content: "V"; font-size: 0.72rem; }
  table.leaderboard thead th:nth-child(4) { font-size: 0; }
  table.leaderboard thead th:nth-child(4)::after { content: "D"; font-size: 0.72rem; }
  table.leaderboard thead th:nth-child(5) { font-size: 0; }
  table.leaderboard thead th:nth-child(5)::after { content: "%"; font-size: 0.72rem; }
  /* Icônes plus petites */
  #ink-performance .ink-dot { width: 18px; height: 18px; }

  /* ---- STATS 1ER / 2ÈME ---- */
  .fp-stats-row { gap: 8px; }
  .fp-stat-card { padding: 8px 10px; }
  .fp-stat-val { font-size: 1.3rem; }

  /* ---- HISTORIQUE ---- */
  .history-item {
    padding: 0.7rem 0.75rem;
    /* Empêcher le contenu de déborder le rectangle */
    overflow: hidden;
  }
  .history-item .meta {
    gap: 0.35rem;
    /* Wrap permet aux badges d'aller à la ligne */
    flex-wrap: wrap;
    align-items: flex-start;
  }
  /* Matchup : icônes + texte peuvent wrapper */
  .history-item .matchup {
    font-size: 0.78rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
  .history-item .matchup .ink-dot { width: 18px; height: 18px; }

  /* Notes longues */
  .history-item .notes {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* ---- FILTRES ---- */
  .set-filter-row { flex-wrap: wrap; gap: 4px; }
  .set-filter-btn { font-size: 0.7rem; padding: 3px 8px; }
  .date-preset-btn { font-size: 0.7rem; padding: 3px 7px; }
  .date-filter-input { font-size: 0.72rem; padding: 3px 5px; }

  /* ---- FORMULAIRE ---- */
  .field-row { flex-direction: column; gap: 0.5rem; }
  .field-row .field { width: 100%; }

  /* ---- RÉCAP NOTE ---- */
  .rating-summary { font-size: 0.82rem; flex-wrap: wrap; gap: 4px; }
}

/* ===== DECK VIEWER MODAL ===== */
.deck-view-btn {
  background: linear-gradient(135deg, #2a1a5e, #4a1a8e);
  border: 1px solid #7b5ea7;
  color: #e0d4f7;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  white-space: nowrap;
}
.deck-view-btn:hover {
  background: linear-gradient(135deg, #3b2475, #5a1faa);
  transform: scale(1.03);
}

.deck-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 999;
  justify-content: center;
  align-items: flex-start;
  padding: 1rem;
  overflow-y: auto;
}
.deck-modal-overlay.active {
  display: flex;
}
.deck-modal-box {
  background: #1a1040;
  border: 1px solid #4a3a8a;
  border-radius: 12px;
  width: 100%;
  max-width: 1100px;
  margin: auto;
  padding: 1.25rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}
.deck-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}
.deck-modal-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  color: #e0d4f7;
  margin-bottom: 0.25rem;
}
.deck-modal-sub {
  font-size: 0.78rem;
  color: #a090c8;
  margin-bottom: 0.2rem;
}
.deck-modal-opp {
  font-size: 0.8rem;
  color: #c4b0e8;
}
.deck-modal-close {
  background: transparent;
  border: 1px solid #4a3a8a;
  color: #a090c8;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.9rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.deck-modal-close:hover {
  background: #2a1a5e;
  color: #e0d4f7;
}

.deck-cards-grid {
  display: grid;
  /* Largeur de colonne FIXE (pas de 1fr) : avec auto-fill + 1fr, la dernière
     rangée incomplète s'étire pour combler l'espace restant, ce qui donne
     des cartes de tailles différentes d'une rangée à l'autre (visible
     surtout avec beaucoup de cartes, ex: Decks & Archétypes) — repro
     signalée par un membre. Largeur fixe = cartes toujours identiques et
     alignées à gauche, quel que soit le nombre de cartes dans la rangée. */
  grid-template-columns: repeat(auto-fill, 104px);
  gap: 0.7rem;
}

/* ===== SKELETONS DE CHARGEMENT ===== */
.skeleton-card {
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(100deg,
    rgba(120,80,200,0.08) 30%, rgba(212,175,55,0.14) 50%, rgba(120,80,200,0.08) 70%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
.skeleton-recap-bar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.skeleton-bar {
  flex: 1;
  height: 2.2rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(100deg,
    rgba(120,80,200,0.08) 30%, rgba(212,175,55,0.14) 50%, rgba(120,80,200,0.08) 70%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-card, .skeleton-bar, .deck-card-placeholder, .stats-skeleton-row { animation: none; }
}
.deck-card-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: #110a30;
  border: 1px solid #2a1a6a;
  border-radius: 6px;
  padding: 0.35rem 0.25rem 0.3rem;
  min-height: 148px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.15s ease;
}
.deck-card-item:hover {
  border-color: #7b5ea7;
  transform: scale(1.08);
  box-shadow: 0 10px 26px rgba(120,80,200,0.5);
  z-index: 2;
}
.deck-card-img {
  transition: box-shadow 0.18s ease;
}
.deck-card-count {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.75rem;
  font-weight: bold;
  color: #f0e6ff;
  background: rgba(60,30,120,0.85);
  border-radius: 4px;
  padding: 0 4px;
  line-height: 1.4;
}
.deck-card-img {
  width: 92px;
  height: 129px;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}
/* ===== Grille éditable (édition deck/archétype) : +/- pour ajuster les
   exemplaires, recherche pour ajouter de nouvelles cartes ===== */
.deck-card-item.editable {
  cursor: default;
}
.deck-card-adj {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #7b5ea7;
  background: rgba(30,15,70,0.9);
  color: #f0e6ff;
  font-weight: bold;
  font-size: 0.85rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s, background 0.15s;
  z-index: 3;
}
.deck-card-item:hover .deck-card-adj {
  opacity: 1;
}
.deck-card-adj:hover {
  background: #4a2a9e;
}
.deck-card-minus { left: 2px; }
.deck-card-plus  { right: 2px; }

.card-search-wrap {
  position: relative;
}
.card-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: #1a1040;
  border: 1px solid #4a3a8a;
  border-radius: 8px;
  margin-top: 4px;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
}
.card-search-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 76px;
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 6px;
  transition: background 0.15s;
}
.card-search-item:hover {
  background: #2a1a6e;
}
.card-search-item img {
  width: 68px;
  height: 95px;
  object-fit: cover;
  border-radius: 4px;
}
.card-search-item span {
  font-size: 0.62rem;
  color: #c4b0e8;
  text-align: center;
  line-height: 1.15;
}
.card-search-empty {
  font-size: 0.75rem;
  color: #6050a0;
  padding: 0.4rem;
}
/* Recherche restreinte au périmètre filtré (module Combinaison de cartes) :
   compteur de manches sur chaque carte, et échappée vers la bibliothèque
   complète en pied de liste. Le lien occupe toute la largeur pour ne pas se
   faire prendre pour une carte de plus. */
.card-search-n {
  font-size: 0.6rem !important;
  color: #8878b0 !important;
  font-variant-numeric: tabular-nums;
}
.card-search-global {
  flex: 1 0 100%;
  font-size: 0.72rem;
  color: #a090c8;
  padding: 0.35rem 0.4rem 0.1rem;
  border-top: 1px solid #2a1a6e;
  cursor: pointer;
}
.card-search-global:hover { color: #e0d4f7; }

.deck-card-item.img-error {
  justify-content: center;
  min-height: 80px;
}
.deck-card-id {
  font-size: 0.62rem;
  color: #9080b8;
  text-align: center;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 98px;
}
.deck-card-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 129px;
  border-radius: 5px;
  overflow: hidden;
  background: linear-gradient(90deg, #1a1050 25%, #251565 50%, #1a1050 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.deck-card-spinner { display: none; }
.deck-card-id-loading {
  font-size: 0.6rem;
  color: #5040a0;
  text-align: center;
  padding: 0 4px;
  margin-top: auto;
  opacity: .7;
}
.deck-no-img {
  font-size: 2rem;
}

/* Type de partie (Ladder / Privé) dans l'historique */
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.mode-ladder {
  background: rgba(212, 175, 55, 0.14);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #e0c878;
}
.mode-private {
  background: rgba(108, 79, 209, 0.16);
  border: 1px solid rgba(138, 106, 232, 0.4);
  color: #c8b8ff;
}
.mode-ranked {
  background: rgba(230, 150, 30, 0.18);
  border: 1px solid rgba(240, 180, 60, 0.55);
  color: #f5c96a;
}

/* bandeau du mode Archives (Historique) */
.archive-banner {
  background: rgba(212, 175, 55, 0.08);
  border: 1px dashed rgba(212, 175, 55, 0.45);
  color: #e0c878;
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  margin-bottom: 0.8rem;
}

/* badge MMR (matchs ranked) dans l'historique */
.mmr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.72rem;
  font-weight: 700;
}
.mmr-up {
  background: rgba(46, 204, 113, 0.14);
  border: 1px solid rgba(46, 204, 113, 0.45);
  color: #6fe3a0;
}
.mmr-down {
  background: rgba(231, 76, 60, 0.14);
  border: 1px solid rgba(231, 76, 60, 0.45);
  color: #f0837a;
}

/* vainqueur (match + manches BO3) dans l'historique */
.badge-winner {
  border-color: rgba(212, 175, 55, 0.65) !important;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25);
}
.bo3-g-winner {
  font-size: 0.68rem;
  opacity: 0.9;
  margin: 0 0.15rem;
}

/* lore badge in history */
.lore-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(120,80,200,0.18);
  border: 1px solid #5a3a9a;
  color: #c8b0e8;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Mobile deck grid */
@media (max-width: 640px) {
  .deck-modal-box {
    padding: 0.85rem;
  }
  .deck-modal-title {
    font-size: 0.9rem;
  }
  .deck-cards-grid {
    grid-template-columns: repeat(auto-fill, 72px);
    gap: 0.4rem;
  }
  .deck-card-img {
    width: 64px;
    height: 90px;
  }
  .deck-card-item {
    min-height: 105px;
  }
}



/* ===== GAMELOG PROGRESS BAR ===== */
.gamelog-progress-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 80px;
}
.gamelog-progress-bar {
  flex: 1;
  height: 6px;
  background: #1a1050;
  border-radius: 3px;
  overflow: hidden;
}
.gamelog-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #5a3a9a, #a070e0);
  transition: width 0.4s ease;
}
.gamelog-progress-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e0d4f7;
  white-space: nowrap;
}
/* ===== GAMELOG RECAP BAR ===== */
.gamelog-recap-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  background: rgba(20, 10, 55, 0.7);
  border: 1px solid #2a1a6a;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  color: #c8b8e8;
}
.gamelog-recap-side {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.gamelog-recap-side strong {
  color: #e0d4f7;
  font-size: 0.88rem;
}
.gamelog-recap-hint {
  color: #7060a0;
  font-size: 0.75rem;
}
.gamelog-recap-sep {
  color: #3a2a7a;
}
.gamelog-copy-btn {
  margin-left: auto;
  background: #1a1050;
  border: 1px solid #5a3a9a;
  color: #c4b0e8;
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  font-size: 0.77rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.gamelog-copy-btn:hover {
  background: #2a1a6e;
  border-color: #8060c0;
}
/* ===== DECK TWO-COLUMN LAYOUT ===== */
.deck-modal-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.95rem;
  color: #e0d4f7;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.deck-vs-sep {
  color: #6050a0;
  font-size: 0.8rem;
  padding: 0 0.15rem;
}
.deck-two-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
.deck-col {
  min-width: 0;
}
.deck-col-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #2a1a6a;
  margin-bottom: 0.6rem;
  font-size: 0.82rem;
  color: #c8b0e8;
  font-family: "Fraunces", Georgia, serif;
  flex-wrap: wrap;
}
/* Les boutons d'action (Copier / Copier en image) passent TOUJOURS sur leur
   propre ligne, des deux côtés (deck perso ET adverse) — même quand un seul
   bouton tiendrait sur la ligne du titre. Sans ça, le nombre de boutons
   diffère selon le côté (l'adversaire peut en avoir 2, "nous" toujours 1),
   et seul le côté avec le débordement passait à la ligne : les deux
   en-têtes n'avaient alors plus la même hauteur, ce qui décalait les deux
   grilles de cartes l'une par rapport à l'autre. */
.deck-col-actions {
  flex: 1 1 100%;
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}
.deck-col-actions .gamelog-copy-btn {
  margin-left: 0;
}
.deck-col-count {
  font-size: 0.72rem;
  color: #7060a0;
  font-family: inherit;
}
.deck-empty {
  color: #6050a0;
  font-size: 0.8rem;
  text-align: center;
  padding: 1.5rem 0.5rem;
  line-height: 1.6;
}
.deck-empty-sub {
  font-size: 0.72rem;
  color: #4a3a8a;
}
@media (max-width: 640px) {
  .deck-two-cols {
    grid-template-columns: 1fr;
  }
  .deck-col-opp {
    border-top: 1px solid #2a1a6a;
    padding-top: 0.75rem;
  }
}

/* ===== INK COLOR CODING ===== */
/* Bordure colorée selon l'encre Lorcana */
.deck-card-item.ink-amber    { border-color: #c8861a; box-shadow: 0 0 6px rgba(200,134,26,0.35); }
.deck-card-item.ink-amethyst { border-color: #8b5cbf; box-shadow: 0 0 6px rgba(139,92,191,0.35); }
.deck-card-item.ink-emerald  { border-color: #2e9e5b; box-shadow: 0 0 6px rgba(46,158,91,0.35); }
.deck-card-item.ink-ruby     { border-color: #c0392b; box-shadow: 0 0 6px rgba(192,57,43,0.35); }
.deck-card-item.ink-sapphire { border-color: #2471a3; box-shadow: 0 0 6px rgba(36,113,163,0.35); }
.deck-card-item.ink-steel    { border-color: #7f8c8d; box-shadow: 0 0 6px rgba(127,140,141,0.35); }


/* ===== DECK MODAL TABS ===== */
.deck-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #2a1a6a;
  padding-bottom: 0.5rem;
}
.deck-tab {
  background: transparent;
  border: 1px solid #3a2a7a;
  color: #a090c8;
  padding: 0.35rem 0.9rem;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.deck-tab.active, .deck-tab:hover {
  background: #2a1a6e;
  color: #e0d4f7;
  border-color: #6a4abf;
}
.deck-pane { display: none; }
.deck-pane.active { display: block; }

.game-subtabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.game-subtabs:empty { margin-bottom: 0; }
.game-subtab {
  background: transparent;
  border: 1px solid #3a2a7a;
  color: #a090c8;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: background 0.15s, color 0.15s;
}
.game-subtab.active {
  background: #2a1a6e;
  color: #e0d4f7;
  border-color: #6a4abf;
}
.game-subtab:hover:not(:disabled) {
  border-color: #6a4abf;
}
.game-subtab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.gamelog-section-title {
  font-size: 0.78rem;
  color: #c4b0e8;
  font-family: "Fraunces", Georgia, serif;
  margin: 0.75rem 0 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #2a1a6a;
}
.ink-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* ===== STATS CARTES TAB ===== */
.stats-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}
.stats-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  border: 1px solid #3a2a7a;
  background: transparent;
  color: #a090c8;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.stats-pill:hover {
  background: #1a0f40;
  color: #e0d4f7;
}
.stats-pill.active {
  background: #2a1a6e;
  border-color: #7b5ea7;
  color: #e0d4f7;
}
.stats-pill-count {
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 0 6px;
  font-size: 0.68rem;
  color: #8070b0;
}
.stats-section-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.82rem;
  color: #c8b0e8;
  margin: 0 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #2a1a6a;
}

/* ===== EVOLUTION DE LA META ===== */
.meta-seg-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}
.meta-seg-group {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.meta-seg-btn {
  padding: 0.25rem 0.65rem;
  border-radius: 14px;
  border: 1px solid #3a2a7a;
  background: transparent;
  color: #a090c8;
  font-size: 0.76rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.meta-seg-btn:hover { background: #1a0f40; color: #e0d4f7; }
.meta-seg-btn.active { background: #2a1a6e; border-color: #7b5ea7; color: #e0d4f7; }

.meta-chart-scroll {
  width: 100%;
  overflow-x: auto;
  margin-top: 0.8rem;
}
.meta-svg {
  width: 100%;
  min-width: 560px;
  height: auto;
  display: block;
}
.meta-point { cursor: pointer; }
.meta-series {
  transition: opacity 0.15s;
}
.meta-series.meta-dim {
  opacity: 0.15;
}
.meta-series.meta-highlight .meta-line {
  stroke-width: 4;
}
.meta-series.meta-highlight .meta-point {
  r: 4;
}
.meta-line {
  transition: stroke-width 0.15s;
}
.meta-crosshair {
  stroke: rgba(243,230,255,0.35);
  stroke-width: 1;
  stroke-dasharray: 3,3;
  display: none;
  pointer-events: none;
}
.meta-hover-capture {
  cursor: crosshair;
}
.meta-legend-item {
  transition: background 0.15s, opacity 0.15s;
  cursor: pointer;
}
.meta-legend-item.meta-legend-active {
  background: rgba(255,255,255,0.08);
}

.meta-legend {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 1rem;
}
.meta-legend-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  font-size: 0.82rem;
  flex-wrap: wrap;
}
.meta-legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.meta-legend-label { display: flex; align-items: center; gap: 0.3rem; color: #e0d4f7; }
.meta-legend-val { font-weight: 700; color: #f3e6ff; margin-left: auto; }
.meta-trend { font-size: 0.76rem; font-weight: 600; min-width: 68px; text-align: right; }
.meta-trend-up { color: #4ade80; }
.meta-trend-down { color: #f87171; }
.meta-trend-flat { color: #8070b0; }
.meta-legend-count { font-size: 0.72rem; color: rgba(243,230,255,0.4); white-space: nowrap; }

@media (max-width: 640px) {
  .meta-legend-item { font-size: 0.76rem; }
  .meta-legend-val { margin-left: 0; }
}

.stats-meta {
  font-size: 0.72rem;
  color: #7060a0;
  margin: 0 0 0.75rem;
}
.stats-empty {
  color: #7060a0;
  font-size: 0.82rem;
  padding: 1rem 0;
  text-align: center;
  line-height: 1.7;
}
.stats-loading-label {
  color: #9080c0;
  font-size: 0.78rem;
  text-align: center;
  margin: 0 0 1rem;
}
.stats-skeleton-row {
  height: 1.7rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(100deg,
    rgba(120,80,200,0.08) 30%, rgba(212,175,55,0.14) 50%, rgba(120,80,200,0.08) 70%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
.stats-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.stats-three-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
}
/* variante à 4 panneaux (Stats Cartes) : 2x2 par défaut ; sur grand écran
   l'onglet s'élargit au-delà des 1200px de <main> (débord centré) pour
   afficher les 4 panneaux sur une seule ligne sans scroll. */
.stats-four-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stats-four-cols > div {
  min-width: 0;
  overflow: hidden; /* jamais de barre de scroll : on découpe en silence si ça dépasse d'1px */
}
/* le nom nowrap fixe la largeur MINIMALE du tableau : sans plafond il fait
   déborder le panneau de quelques pixels -> barre de scroll parasite (et
   c'est aussi ce qui faisait se chevaucher les panneaux en 4 colonnes) */
.stats-four-cols .stats-card-name {
  max-width: 150px;
}
.stats-table .wr-badge {
  white-space: nowrap;
}

/* lisibilité Stats Cartes : panneaux encadrés, zébrures, top 10, barres */
.stats-four-cols > div {
  background: rgba(18, 11, 48, 0.6);
  border: 1px solid #2a1a6a;
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
}
.stats-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }
.stats-table tbody tr:hover { background: rgba(212, 175, 55, 0.08); }
.stats-extra-row { display: none; }
.stats-expanded .stats-extra-row { display: table-row; }
.stats-show-all {
  display: block;
  margin: 0.6rem auto 0;
  background: none;
  border: 1px solid #4a3a8a;
  color: #a090c8;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.75rem;
  cursor: pointer;
}
.stats-show-all:hover { border-color: #d4af37; color: #e0c878; }
.stats-bar-cell { position: relative; }
.stats-bar {
  position: absolute;
  left: 3px;
  top: 24%;
  bottom: 24%;
  background: linear-gradient(90deg, rgba(108, 79, 209, 0.5), rgba(108, 79, 209, 0.08));
  border-radius: 3px;
  pointer-events: none;
}
.stats-bar-val { position: relative; }
/* tableau unique fusionné (Stats Cartes) */
.stats-merged-panel {
  background: rgba(18, 11, 48, 0.6);
  border: 1px solid #2a1a6a;
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
}
.stats-merged-scroll {
  overflow-x: auto; /* sur écran étroit, le tableau large défile au lieu de casser */
}
.stats-sort-th,
.panel-sort-th {
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.stats-sort-th:hover,
.panel-sort-th:hover { color: #e0c878; }
.stats-sort-th.active,
.panel-sort-th.active { color: #d4af37; }
.stats-hint-sm {
  font-size: 0.7rem;
  color: #7060a0;
  margin: -0.3rem 0 0.5rem;
  line-height: 1.4;
}
@media (max-width: 1100px) {
  .stats-three-cols {
    grid-template-columns: 1fr 1fr;
  }
}
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.stats-table thead th {
  font-size: 0.7rem;
  color: #7060a0;
  font-weight: 500;
  text-align: left;
  padding: 0.2rem 0.4rem;
}
.stats-table tbody tr {
  border-top: 1px solid #1e1350;
  transition: background 0.1s;
}
.stats-table tbody tr:nth-child(even) {
  background: rgba(120,80,200,0.07);
}
.stats-table tbody tr:hover {
  background: rgba(120,80,200,0.16);
}
.stats-table tbody td {
  padding: 0.45rem 0.4rem;
  color: #e0d4f7;
  vertical-align: middle;
}
.wr-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.stats-card-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.stats-card-thumb {
  width: 30px;
  height: 42px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid #2a1a6a;
  flex-shrink: 0;
  display: none;
  background: #110a30;
}
.stats-card-name {
  color: #d4c4f0;
  font-size: 0.76rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
@media (max-width: 640px) {
  .stats-two-cols, .stats-three-cols {
    grid-template-columns: 1fr;
  }
  .stats-card-name {
    max-width: 100px;
  }
}

/* ===== DECKS TAB ===== */
.decks-section { }
.decks-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.decks-section-title {
  font-size: .95rem;
  font-weight: 700;
  color: #c4b0e8;
}

.deck-list-card {
  background: #0d0830;
  border: 1px solid #2a1a6e;
  border-radius: 8px;
  padding: .65rem .85rem;
  margin-bottom: .5rem;
  transition: border-color .15s;
}
.deck-list-card:hover { border-color: #5a3fa8; }
.archetype-card { border-left: 3px solid #d4af37; }
.archetype-card:hover { border-color: #5a3fa8; border-left-color: #f0c04c; }
.deck-list-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.deck-list-card-name {
  font-weight: 700;
  font-size: .9rem;
  color: #e0d4f7;
}
.deck-list-card-meta {
  font-size: .75rem;
  color: #7060a0;
  margin-top: .15rem;
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
}
.deck-list-card-actions {
  display: flex;
  gap: .4rem;
  flex-shrink: 0;
  align-items: center;
}
.deck-list-view-btn {
  background: #2a1a6e;
  border: 1px solid #5a3fa8;
  color: #c4b0e8;
  padding: .25rem .6rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .78rem;
}
.deck-list-view-btn:hover { background: #3a2a8e; }
.deck-list-del-btn {
  background: transparent;
  border: 1px solid #5a2030;
  color: #c06080;
  padding: .25rem .5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .78rem;
}
.deck-list-del-btn:hover { background: #3a0a18; }
.deck-view-btn {
  background: #2a1a6e;
  border: 1px solid #7b5ea7;
  color: #e0d4f7;
  padding: .35rem .75rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .82rem;
}
.deck-view-btn:hover { background: #3a2a8e; }

.deck-stat-wins  { color: #4caf7d; font-weight: 700; font-size: .8rem; }
.deck-stat-losses{ color: #e05050; font-weight: 700; font-size: .8rem; }
.deck-stat-sep   { color: #5a4a8a; font-size: .8rem; margin: 0 1px; }

.deck-list-toggle-btn {
  background: #1a1050;
  border: 1px solid #4a3a8a;
  color: #c4b0e8;
  padding: .25rem .65rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .78rem;
  white-space: nowrap;
}
.deck-list-toggle-btn:hover { background: #2a1a6e; border-color: #7b5ea7; }

.deck-expand-area { }


/* ===== TUTO SYNC DUELS.INK (icônes illustrées) ===== */
.tuto-details {
  margin: .75rem 0 1.1rem;
  border: 1px solid #3a2a7a;
  border-radius: 8px;
  background: rgba(42, 26, 110, 0.15);
  padding: .1rem .9rem;
}
.tuto-summary {
  cursor: pointer;
  padding: .6rem 0;
  color: #c4b0e8;
  font-size: .85rem;
  font-weight: 600;
  list-style: none;
}
.tuto-summary::-webkit-details-marker { display: none; }
.tuto-summary:hover { color: #e0d4f7; }
.tuto-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
  padding: .3rem 0 1rem;
}
@media (max-width: 800px) {
  .tuto-steps { grid-template-columns: repeat(2, 1fr); }
}
.tuto-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .3rem;
  padding: .7rem .5rem;
  background: #150a35;
  border: 1px solid #2a1a6e;
  border-radius: 8px;
  position: relative;
}
.tuto-icon { width: 44px; height: 44px; }
.tuto-step-num {
  position: absolute;
  top: .4rem;
  left: .5rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #d4af37;
  color: #150a35;
  font-size: .7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tuto-step-text {
  font-size: .74rem;
  color: #a090c8;
  line-height: 1.35;
  margin: 0;
}
.tuto-step-text strong { color: #e0d4f7; }

/* ===== "Cartes vues dans les logs" (deck-card-item avec badge nb parties) ===== */
.deck-card-seen-badge {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #150a35;
  background: #d4af37;
  border-radius: 4px;
  padding: 0 4px;
  line-height: 1.4;
}
.deck-log-cards { padding-top: .5rem; }

/* ===== REPLAY FUSIONNÉ (viewer 2 mains visibles) ===== */
.replay-modal-box { max-width: 860px; }
.merged-replay-btn {
  background: linear-gradient(135deg, #2a1a6e, #3a2a8a);
  border: 1px solid #6b4ea7;
  color: #e8dcff;
  padding: .32rem .7rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 600;
  transition: background .15s, border-color .15s;
}
.merged-replay-btn:hover { background: linear-gradient(135deg, #34208a, #4a36a8); border-color: #8f6ed0; }
.rp-intro { font-size: .82rem; color: #b8a6e0; line-height: 1.5; margin: 0 0 1rem; }
.rp-tabs { display: flex; gap: .4rem; margin-bottom: .9rem; flex-wrap: wrap; }
.rp-tab {
  background: rgba(255,255,255,0.05); border: 1px solid #4a3a8a; color: #c4b0e8;
  padding: .3rem .8rem; border-radius: 6px; cursor: pointer; font-size: .82rem; font-weight: 600;
}
.rp-tab.active { background: rgba(212,175,55,0.18); border-color: rgba(212,175,55,0.6); color: #f0e4c0; }
.rp-timeline { display: flex; flex-direction: column; gap: .7rem; }
.rp-turn { background: #150d38; border: 1px solid #33266e; border-radius: 10px; padding: .6rem .75rem; }
.rp-turn-head { font-family: "Fraunces", Georgia, serif; font-size: .82rem; color: #e0d4f7; margin-bottom: .45rem; letter-spacing: .02em; }
.rp-turn-who { color: var(--gold, #d4af37); }
.rp-actions { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .55rem; }
.rp-action { display: flex; align-items: center; gap: .5rem; font-size: .78rem; flex-wrap: wrap; }
.rp-act-who { color: #9a88c8; min-width: 90px; }
.rp-act-verb { color: #c4b0e8; white-space: nowrap; }
.rp-play .rp-act-verb { color: #8fe0b8; }
.rp-ink .rp-act-verb { color: #7fb0f0; }
.rp-discard .rp-act-verb { color: #f0a0a0; }
.rp-draw .rp-act-verb { color: #e0c878; }
.rp-idle { color: #6a5a9a; font-style: italic; }
.rp-card { display: inline-flex; align-items: center; gap: .35rem; }
.rp-thumb { width: 26px; height: 36px; border-radius: 3px; object-fit: cover; display: none; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.rp-card-name { font-size: .76rem; color: #d8ccf0; }
.rp-hands { display: flex; flex-direction: column; gap: .4rem; border-top: 1px dashed #33266e; padding-top: .5rem; }
.rp-hand { display: flex; gap: .5rem; align-items: flex-start; }
.rp-hand-label { font-size: .74rem; color: #a898d0; min-width: 96px; flex-shrink: 0; padding-top: .2rem; }
.rp-hand-count { display: inline-block; background: #2a1a6e; border-radius: 8px; padding: 0 .4rem; font-size: .68rem; color: #d8ccf0; }
.rp-hand-cards { display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.rp-empty { font-size: .74rem; color: #6a5a9a; font-style: italic; }
@media (max-width: 640px) {
  .rp-act-who, .rp-hand-label { min-width: 0; width: 100%; }
  .rp-hand { flex-direction: column; gap: .2rem; }
}

/* ===== REPLAY — PLATEAU VISUEL type duels.ink (rp2) ===== */
/* Plein écran pour le replay */
#replay-modal.rp2-fullscreen { align-items: center; padding: .5rem; }
#replay-modal.rp2-fullscreen .replay-modal-box {
  width: 98vw; max-width: 1500px; height: 95vh; margin: 0;
  display: flex; flex-direction: column; padding: .9rem 1rem;
}
#replay-modal.rp2-fullscreen #replay-modal-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rp2-wrap { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-height: 0; }
#rp2-board {
  flex: 1; min-height: 0; overflow: auto;
  border-radius: 12px; border: 1px solid #33266e;
  display: flex; flex-direction: column;
  background: radial-gradient(130% 90% at 50% 0%, #1b1450 0%, #130d38 55%, #0d0926 100%);
}
.rp2-half { padding: .5rem .8rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; justify-content: center; }
.rp2-top { background: linear-gradient(180deg, rgba(120,55,150,.16), transparent 70%); }
.rp2-bottom { background: linear-gradient(0deg, rgba(55,90,170,.16), transparent 70%); }
.rp2-divider { height: 0; border-top: 1px dashed #4a3a8a; opacity: .55; }
.rp2-namerow { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.rp2-pname { font-family: "Fraunces", Georgia, serif; color: var(--gold,#d4af37); font-weight: 700; }
.rp2-handn { color: #a898d0; font-size: .8rem; }
.rp2-field { display: flex; align-items: center; gap: .9rem; }
.rp2-lorebox { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 54px; }
.rp2-loren { font-size: 2.1rem; font-weight: 800; color: #fff; line-height: 1; text-shadow: 0 1px 5px rgba(0,0,0,.6); }
.rp2-lorel { font-size: .58rem; letter-spacing: .16em; color: #b39ddb; }
.rp2-ink { display: flex; align-items: center; gap: 3px; }
.rp2-inkslot { position: relative; display: inline-block; }
.rp2-inkback { width: 30px; height: 42px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.55); display: block; object-fit: cover; }
.rp2-inkface {
  position: absolute; bottom: 108%; left: 50%; transform: translateX(-50%);
  width: 130px; height: 182px; border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.75);
  display: none; z-index: 30; pointer-events: none; border: 1px solid #4a3a8a;
}
.rp2-inkslot:hover .rp2-inkface { display: block; }
.rp2-inkmore { font-size: .78rem; color: #9080c0; margin-left: 2px; }
.rp2-inkn { margin-left: .4rem; font-size: .9rem; font-weight: 700; color: #c9b6ff; }
.rp2-chars, .rp2-hand { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; min-height: 92px; }
.rp2-hand { min-height: 84px; }
.rp2-cardimg { width: 66px; height: 92px; object-fit: cover; border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,.55); background: #0c0722; }
.rp2-handcard { width: 60px; height: 84px; }
.rp2-perm { position: relative; transition: transform .15s; }
.rp2-perm.rp2-exerted { transform: rotate(20deg); filter: brightness(.72); }
.rp2-dmg { position: absolute; bottom: -5px; right: -5px; background: #d63b3b; color: #fff; font-size: .72rem; font-weight: 700; border-radius: 50%; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.rp2-empty { color: #5a4a8a; font-size: .8rem; font-style: italic; padding: 0 .3rem; }
.rp2-bar { background: #120a30; border-top: 1px solid #33266e; padding: .5rem .2rem .1rem; }
.rp2-actiontxt { text-align: center; font-size: .9rem; color: #e0d4f7; min-height: 1.3em; margin-bottom: .45rem; }
.rp2-actiontxt strong { color: var(--gold,#d4af37); }
.rp2-actiontxt em { color: #fff; font-style: normal; }
.rp2-controls { display: flex; align-items: center; gap: .35rem; justify-content: center; flex-wrap: wrap; }
.rp2-btn { background: rgba(255,255,255,0.06); border: 1px solid #4a3a8a; color: #e0d4f7; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.rp2-btn:hover { background: #2a1a6e; border-color: #7b5ea7; }
.rp2-btn.rp2-play { background: rgba(212,175,55,0.18); border-color: rgba(212,175,55,0.55); color: #f0e4c0; }
.rp2-slider { flex: 1; min-width: 160px; max-width: 480px; accent-color: var(--gold,#d4af37); cursor: pointer; }
.rp2-count { font-size: .78rem; color: #a898d0; min-width: 56px; text-align: right; }
@media (max-width: 700px) {
  #replay-modal.rp2-fullscreen .replay-modal-box { width: 100vw; height: 100vh; border-radius: 0; }
  .rp2-cardimg { width: 48px; height: 67px; }
  .rp2-handcard { width: 44px; height: 61px; }
  .rp2-loren { font-size: 1.5rem; }
  .rp2-inkback { width: 22px; height: 31px; }
  .rp2-inkface { width: 96px; height: 134px; }
  .rp2-chars, .rp2-hand { min-height: 70px; }
}

/* ===== STATS CARTES — vue "Courbe" visuelle (vignettes par tour) ===== */
.curve-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .68rem; color: #8878b0; letter-spacing: .06em; text-transform: uppercase;
  padding: 0 .4rem .35rem; border-bottom: 1px solid #2a1a5e; margin-bottom: .35rem;
}
.curve-head-turns { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; flex: 1; max-width: 560px; text-align: center; }
.curve-list { display: flex; flex-direction: column; gap: .3rem; }
.curve-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  background: rgba(255,255,255,0.03); border-radius: 7px; padding: .3rem .5rem .3rem .55rem;
}
.curve-row:hover { background: rgba(255,255,255,0.06); }
/* la règle générique passe les lignes "en plus" en display:table-row (tableaux) :
   ici ce sont des div flex, on rétablit le bon affichage à l'expansion. */
.stats-expanded .curve-row.stats-extra-row { display: flex; }
.curve-seq { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; flex: 1; max-width: 560px; align-items: center; }
.curve-turn { display: flex; align-items: center; gap: .12rem; justify-content: center; flex-wrap: wrap; min-height: 56px; }
.curve-card { display: inline-flex; position: relative; }
.curve-thumb {
  width: 40px; height: 56px; border-radius: 4px; border: 1px solid #3a2a7a;
  transition: transform .12s ease, box-shadow .12s ease;
}
.curve-card:hover .curve-thumb {
  transform: scale(1.9); z-index: 20; position: relative;
  box-shadow: 0 6px 20px rgba(0,0,0,.8); border-color: var(--gold,#d4af37);
}
.curve-none { color: #5a4a8a; font-size: .9rem; opacity: .7; }
.curve-arrow { display: none; } /* séparateur inutile : la grille aligne déjà les tours */
.curve-turn + .curve-turn { border-left: 1px dashed rgba(74,58,138,.5); }
.curve-stats { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.curve-games { font-size: .78rem; color: #a898d0; min-width: 26px; text-align: right; }
.curve-games small { font-size: .62rem; opacity: .6; margin-left: 1px; }
@media (max-width: 640px) {
  .curve-thumb { width: 30px; height: 42px; }
  .curve-head-turns { gap: 1rem; }
  .curve-row { flex-wrap: wrap; }
}

/* ===== Cartes clés d'archétype (Decks & Archétypes) ===== */
.arch-key-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; min-height: 1.2rem; }
.arch-key-empty { font-size: .72rem; color: #6a5a9a; font-style: italic; }
.arch-key-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.45);
  border-radius: 999px; padding: .18rem .5rem .18rem .28rem;
}
.arch-key-thumb { width: 22px; height: 31px; border-radius: 3px; object-fit: cover; display: none; }
.arch-key-name { font-size: .76rem; color: #f0e4c0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-key-del {
  background: transparent; border: none; color: #c9b6ff; cursor: pointer;
  font-size: .72rem; padding: 0 .1rem; line-height: 1; opacity: .7;
}
.arch-key-del:hover { opacity: 1; color: #fff; }
.arch-key-badge { color: #e0c878; font-size: .74rem; }

/* Carte clé mise en évidence dans la grille de l'archétype */
.deck-card-item.deck-card-key {
  position: relative;
  outline: 2px solid var(--gold, #d4af37);
  outline-offset: 1px;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
}
.deck-card-keystar {
  position: absolute;
  top: -7px; left: -7px;
  z-index: 4;
  font-size: .8rem;
  line-height: 1;
  background: #1a1040;
  border: 1px solid var(--gold, #d4af37);
  border-radius: 50%;
  width: 19px; height: 19px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* Compte sans profil (connexion incomplète) dans l'onglet Joueurs */
.ghost-tag {
  font-size: .66rem;
  color: #e0a860;
  background: rgba(224, 168, 96, 0.12);
  border: 1px solid rgba(224, 168, 96, 0.4);
  border-radius: 999px;
  padding: .05rem .4rem;
  margin-left: .3rem;
  white-space: nowrap;
}

/* ===== GRAND ÉCRAN : utiliser toute la largeur disponible =====
   Le contenu était plafonné à 1200px (main + topbar), ce qui laissait de
   grandes bandes vides sur un écran PC large. On libère la largeur à partir
   de 1000px seulement : mobile et tablette gardent leur mise en page. */
@media (min-width: 1000px) {
  main {
    max-width: none;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .topbar-content { max-width: none; }
  /* le bandeau de stats rapides reste lisible : on l'élargit sans le coller aux bords */
  .quick-stats-bar { max-width: 1500px; }
  /* place gagnée -> 3 panneaux de Stats Cartes par ligne au lieu de 2 */
  .stats-four-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-four-cols .stats-card-name { max-width: 210px; }
}
@media (min-width: 1750px) {
  /* très grand écran : les 4 panneaux tiennent sur une seule ligne */
  .stats-four-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Replay : main masquée (perspective adverse indisponible) + vitesse de lecture */
.rp2-hand-hidden { opacity: .85; }
.rp2-hiddencard { filter: brightness(.8) saturate(.7); }
.rp2-speed {
  background: rgba(255,255,255,0.06);
  border: 1px solid #4a3a8a;
  color: #e0d4f7;
  border-radius: 6px;
  padding: .18rem .3rem;
  font-size: .74rem;
  cursor: pointer;
}

/* ===== Barre de filtres : ligne "Période" ===== */
/* .date-filter-row n'avait aucun style : ses <input type="date"> héritaient de
   la règle générique width:100% et s'étiraient sur toute la largeur (effet très
   visible depuis le passage en pleine largeur — champs empilés et grand vide). */
.date-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.date-filter-row .date-filter-input {
  width: auto;
  min-width: 128px;
  padding: 0.3rem 0.45rem;
  font-size: 0.78rem;
  border-radius: 6px;
}
.date-filter-sep { color: #3a2a7a; margin: 0 0.15rem; }
.date-filter-arrow { color: #7060a0; font-size: 0.8rem; }
/* les groupes ne s'étirent pas au-delà de leur contenu : évite les grands vides */
.filter-bar > .filter-group { flex: 0 1 auto; min-width: 0; }

/* ===== Barre d'onglets collante (PC) =====
   Historique et Stats sont longs : sans ça, changer d'onglet obligeait à
   remonter tout en haut de la page. La barre reste accessible en scrollant. */
@media (min-width: 1000px) {
  .tabs {
    position: sticky;
    top: 0;
    z-index: 40;
    background: linear-gradient(180deg, var(--ink-0, #0d0926) 72%, rgba(13, 9, 38, 0));
    padding-bottom: 0.65rem;
    /* léger recul du padding haut : la barre ne doit pas manger l'écran */
    padding-top: 0.85rem;
  }
  /* le bandeau de stats rapides suit juste dessous, sans se superposer */
  .quick-stats-bar { position: relative; z-index: 1; }
}

/* ===== HISTORIQUE : lisibilité des lignes =====
   1) Les badges étaient étalés d'un bord à l'autre (space-between) : sur un
      écran large ils se dispersaient, rendant la ligne difficile à scanner.
      On les regroupe à gauche, dans leur ordre logique.
   2) Hiérarchie : le matchup et le résultat restent forts ; les informations
      de contexte (set/date, mode, lore, MMR, joueurs) passent en second plan. */
.history-item .meta {
  justify-content: flex-start;
  gap: 0.4rem 0.55rem;
  align-items: center;
}
/* le matchup garde la vedette et occupe sa propre place à gauche */
.history-item .matchup { margin-right: 0.15rem; }
/* résultat = information principale : on le laisse pleinement contrasté */
.history-item .badge { font-weight: 800; }
/* contexte = second plan : même taille, mais moins de poids visuel */
.history-item .date,
.history-item .mode-badge,
.history-item .lore-badge,
.history-item .mmr-badge,
.history-item .player-badge {
  font-weight: 600;
  opacity: 0.82;
  transition: opacity 0.15s;
}
/* au survol de la ligne, tout redevient parfaitement lisible */
.history-item:hover .date,
.history-item:hover .mode-badge,
.history-item:hover .lore-badge,
.history-item:hover .mmr-badge,
.history-item:hover .player-badge { opacity: 1; }
/* le vainqueur reste mis en avant malgré l'atténuation */
.history-item .player-badge.badge-winner { opacity: 1; font-weight: 700; }

/* ===== Détecteur de failles (Stats Cartes) ===== */
.leak-box {
  background: linear-gradient(160deg, rgba(224,80,80,0.10), rgba(18,11,48,0.7));
  border: 1px solid rgba(224, 120, 96, 0.45);
  border-left: 4px solid #e0785f;
  border-radius: 12px;
  padding: 0.8rem 1rem;
  margin: 0 0 1rem;
}
.leak-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.92rem;
  color: #f0b89a;
  margin-bottom: 0.5rem;
}
.leak-list { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.leak-list li { font-size: 0.84rem; color: #e0d4f7; line-height: 1.45; }
.leak-list strong { color: #fff; }
.leak-icon { margin-right: 0.35rem; }
.leak-note { font-size: 0.7rem; color: #8878b0; margin: 0.55rem 0 0; font-style: italic; }

/* Bouton d'export image d'un panneau de stats (partage Discord) */
.stats-img-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #3a2a7a;
  color: #c4b0e8;
  border-radius: 6px;
  padding: 0 0.32rem;
  font-size: 0.74rem;
  line-height: 1.5;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 0.35rem;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s;
}
.stats-img-btn:hover { opacity: 1; background: #2a1a6e; border-color: #7b5ea7; }

/* ===== Vue "Courbe" groupée par ouverture (T1) ===== */
.curve-group { margin-bottom: .3rem; }
.curve-group-head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  background: rgba(255,255,255,0.035);
  border: none; border-radius: 7px;
  padding: .38rem .55rem;
  cursor: pointer; text-align: left;
  transition: background .12s;
}
.curve-group-head:hover { background: rgba(255,255,255,0.075); }
.curve-group.open .curve-group-head { background: rgba(212,175,55,0.10); }
.curve-ghead-left { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.curve-gthumb { width: 30px; height: 42px; border-radius: 4px; border: 1px solid #3a2a7a; }
.curve-gnone { color: #5a4a8a; font-size: 1rem; width: 30px; text-align: center; }
.curve-glabel { font-size: .86rem; color: #e8dcff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.curve-chevron { color: #a898d0; font-size: .8rem; width: 12px; text-align: center; }
/* suites détaillées d'un groupe : légèrement en retrait et plus discrètes */
.curve-sub { margin: .25rem 0 .5rem 1.4rem; display: flex; flex-direction: column; gap: .25rem; }
.curve-subrow { background: rgba(255,255,255,0.02); }
.curve-subrow .curve-thumb { width: 34px; height: 48px; }
.curve-subrow .curve-turn { min-height: 48px; }

/* ===== Comptes duels.ink liés (multi-comptes) ===== */
.token-list { display: flex; flex-direction: column; gap: .3rem; margin: .45rem 0 .1rem; }
.token-item {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid #3a2a7a;
  border-radius: 7px;
  padding: .28rem .5rem;
  font-size: .78rem;
}
.token-item-label { color: #e0d4f7; font-weight: 600; }
.token-item-mask { color: #8878b0; font-family: monospace; font-size: .74rem; }
.token-item-main {
  font-size: .66rem; color: #f0e4c0;
  background: rgba(212,175,55,0.16); border: 1px solid rgba(212,175,55,0.45);
  border-radius: 999px; padding: 0 .4rem;
}
.token-item-del {
  margin-left: auto; background: transparent; border: none;
  color: #a898d0; cursor: pointer; font-size: .78rem; opacity: .7; padding: 0 .2rem;
}
.token-item-del:hover { opacity: 1; color: #f0a0a0; }

/* ===== Module "Combinaison de cartes" (Stats Cartes) ===== */
.combo-lab { font-size: .78rem; color: #a898d0; align-self: center; margin-right: .2rem; }
.combo-builder { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .5rem; }
.combo-group { background: rgba(255,255,255,0.035); border: 1px solid #33266e; border-radius: 8px; padding: .35rem .5rem; }
.combo-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; }
.combo-group-title { font-size: .72rem; color: #8878b0; text-transform: uppercase; letter-spacing: .05em; }
.combo-group-title em { font-style: normal; opacity: .75; text-transform: none; letter-spacing: 0; }
.combo-group-del { background: none; border: none; color: #a898d0; cursor: pointer; font-size: .72rem; opacity: .6; }
.combo-group-del:hover { opacity: 1; color: #f0a0a0; }
.combo-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.combo-chip { display: inline-flex; align-items: center; gap: .3rem; background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.4); border-radius: 999px; padding: .1rem .5rem; font-size: .78rem; color: #f0e4c0; }
.combo-chip-del { background: none; border: none; color: #c9b6ff; cursor: pointer; font-size: .68rem; opacity: .7; padding: 0; }
.combo-chip-del:hover { opacity: 1; color: #fff; }
.combo-or { font-size: .68rem; color: #7060a0; text-transform: uppercase; }
.combo-and { text-align: center; font-size: .7rem; color: var(--gold, #d4af37); letter-spacing: .12em; }
.combo-empty { font-size: .74rem; color: #5a4a8a; font-style: italic; }
.combo-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.combo-search { width: 100%; padding: .32rem .5rem; border-radius: 6px; border: 1px solid #4a3a8a; background: #110a30; color: #e0d4f7; font-size: .8rem; }
.combo-results { display: flex; flex-direction: column; gap: .35rem; }
.combo-res { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; border-radius: 7px; background: rgba(255,255,255,0.03); border-left: 3px solid #3a2a7a; }
.combo-res.combo-yes { border-left-color: #2ecc71; }
.combo-res.combo-no { border-left-color: #e0473e; }
.combo-res-lab { font-size: .82rem; color: #e0d4f7; min-width: 168px; }
.combo-res-n { font-size: .74rem; color: #8878b0; }
.combo-res-none { font-size: .76rem; color: #5a4a8a; font-style: italic; }
.combo-delta { font-size: .8rem; margin: .2rem 0 0; text-align: center; }
/* Ligne de référence (winrate global) du module Combinaison de cartes */
.combo-res.combo-ref { border-left-color: var(--gold, #d4af37); background: rgba(212,175,55,0.07); }
.combo-res.combo-ref .combo-res-lab { color: #f0e4c0; }

/* Combinaison de cartes : groupe d'exclusion (« aucune de ces cartes ») */
.combo-group-head { gap: .4rem; }
.combo-group-title { flex: 1; }
.combo-mode-btn { background: rgba(255,255,255,0.06); border: 1px solid #3a2a7a; border-radius: 999px; color: #c9b6ff; cursor: pointer; font-size: .66rem; padding: .05rem .45rem; white-space: nowrap; }
.combo-mode-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.combo-group-not { border-color: #6e2a3a; background: rgba(224,80,80,0.06); }
.combo-group-not .combo-mode-btn { border-color: #6e2a3a; color: #f0a0a0; }
.combo-group-not .combo-chip { background: rgba(224,80,80,0.12); border-color: rgba(240,160,160,0.45); color: #f6d0d0; text-decoration: line-through; text-decoration-color: rgba(240,160,160,0.6); }
.combo-chip-no { font-size: .62rem; color: #f0a0a0; text-decoration: none; }
.combo-group-not .combo-or { color: #b07080; }

/* ===== Onglet Plan de jeu — courbe de manacurve réelle ===== */
.plan-table { margin-top: .6rem; }
.plan-table th { white-space: nowrap; }
.plan-turn { font-weight: 700; color: var(--gold, #d4af37); width: 3rem; }
.plan-num { text-align: center; font-variant-numeric: tabular-nums; }
.plan-dim { color: var(--text-secondary, #a090c8); opacity: .7; }
.plan-alerte { color: #f0a0a0; font-weight: 700; }
/* Barre empilée : dépensé (plein) puis gâché (hachuré), sur la largeur de
   l'encre disponible du tour le plus riche — les tours restent comparables. */
.plan-bar-cell { width: 45%; min-width: 160px; }
.plan-bar { position: relative; display: flex; height: 16px; border-radius: 4px;
  background: rgba(255,255,255,0.05); overflow: hidden; }
.plan-bar-dep { background: linear-gradient(90deg, #4a8fd0, #6fb3e8); }
.plan-bar-gachis { background: repeating-linear-gradient(45deg,
  rgba(224,80,80,0.55) 0 5px, rgba(224,80,80,0.25) 5px 10px); }
.plan-legend { font-size: .72rem; color: var(--text-secondary, #a090c8); margin-top: .5rem; }
.plan-key { display: inline-block; width: 11px; height: 11px; border-radius: 2px;
  vertical-align: -1px; margin: 0 .25rem 0 .6rem; }
.plan-key-dep { background: #6fb3e8; }
.plan-key-gachis { background: repeating-linear-gradient(45deg,
  rgba(224,80,80,0.55) 0 4px, rgba(224,80,80,0.25) 4px 8px); }
/* Verdict global T3→T6 */
.plan-verdict { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  background: rgba(212,175,55,0.07); border-left: 3px solid var(--gold, #d4af37);
  border-radius: 6px; padding: .5rem .7rem; margin: .6rem 0; }
.plan-verdict-lab { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: #8878b0; }
.plan-verdict-val { font-size: 1.15rem; font-weight: 700; color: #f0e4c0; }
.plan-verdict-note { font-size: .78rem; color: var(--text-secondary, #a090c8); }

/* ===== Incertitude affichée =================================================
   Un badge en POINTILLÉS signifie que l'intervalle de confiance à 95 % contient
   50 % (ou, sur un écart, contient zéro) : le chiffre est affiché, mais il ne
   démontre rien. Le pointillé plutôt qu'un texte, parce que ces badges vivent
   dans des tableaux déjà denses et se lisent en balayage. */
.wr-flou { border: 1px dashed currentColor; opacity: .72; }
.mull-fragile { opacity: .68; }
.mull-flag { display: inline-block; font-weight: 700; color: #d0b060;
  border: 1px solid rgba(208,176,96,.5); border-radius: 3px;
  padding: 0 .22rem; font-size: .68rem; line-height: 1.25; vertical-align: 1px; }

/* --- Gâchis cumulé : winrate et son intervalle sur un axe 0–100 % ---------
   Une barre d'histogramme ne dirait rien de la précision. Ici le trait clair
   EST l'intervalle, le point la valeur mesurée, et le repère doré le winrate
   moyen : on voit d'un coup si la tranche s'en écarte vraiment. */
.gc-bar-cell { width: 42%; min-width: 170px; padding-right: .8rem; }
.gc-axe { position: relative; height: 16px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(224,80,80,.10), rgba(255,255,255,.04) 50%, rgba(76,175,125,.12)); }
.gc-ic { position: absolute; top: 6px; height: 4px; border-radius: 2px;
  background: rgba(200,184,232,.45); }
.gc-pt { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: #e0d4f7; box-shadow: 0 0 0 2px rgba(17,10,48,.85); }
.gc-ref { position: absolute; top: -2px; bottom: -2px; width: 1px;
  background: rgba(212,175,55,.65); }

/* --- Build reconstruit : jauge de présence -------------------------------- */
.build-sous-titre { font-size: .82rem; font-weight: 600; color: #e0d4f7;
  margin: 1rem 0 .1rem; }
.build-note { font-weight: 400; font-size: .74rem; color: var(--text-secondary, #a090c8); }
.build-pres-cell { width: 32%; min-width: 120px; }
.build-jauge { height: 10px; border-radius: 3px; background: rgba(255,255,255,.05); overflow: hidden; }
.build-jauge > span { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #6c4fd1, #a88fe8); }
.build-cout { display: inline-block; min-width: 1.1rem; font-variant-numeric: tabular-nums;
  color: var(--gold, #d4af37); font-weight: 600; }

/* ===== Barre de pastilles compacte (Stats cartes, Plan de jeu, Évolution meta) =====
   Le libellé textuel de la bicolore ("Ambre + Émeraude") passe en infobulle :
   il rendait chaque pastille si large que la barre débordait sur 3 lignes.
   Les icônes d'encre suffisent à reconnaître la bicolore d'un coup d'œil. */
.pill-selects { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-left: auto; }
.pill-select {
  background: #110a30; border: 1px solid #4a3a8a; color: #e0d4f7;
  padding: .3rem .6rem; border-radius: 6px; font-size: .82rem; max-width: 260px;
}
/* Un peu plus de respiration autour du badge d'encre, maintenant qu'il est seul. */
.stats-pill { padding: 0.3rem 0.6rem; }
.stats-pill .stats-pill-count { margin-left: .1rem; }
@media (max-width: 700px) {
  .pill-selects { margin-left: 0; width: 100%; }
  .pill-select { max-width: 100%; flex: 1 1 45%; }
}

/* ===== Plan de jeu — guide de mulligan ===== */
.mull-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: .7rem 0 1rem; }
.mull-col { background: rgba(255,255,255,0.03); border-radius: 8px; padding: .5rem .6rem; }
.mull-col-titre { font-size: .8rem; font-weight: 700; margin: 0 0 .45rem; letter-spacing: .02em; }
.mull-titre-garder { color: #8fe0b8; }
.mull-titre-jeter { color: #f0a0a0; }
.mull-carte { display: flex; align-items: center; gap: .5rem; padding: .25rem .35rem;
  border-radius: 6px; border-left: 3px solid transparent; margin-bottom: .25rem; }
.mull-garder { border-left-color: #2ecc71; background: rgba(46,204,113,0.07); }
.mull-jeter { border-left-color: #e0473e; background: rgba(224,80,80,0.07); }
.mull-carte .stats-card-thumb { width: 30px; border-radius: 3px; flex: 0 0 auto; }
.mull-carte-nom { flex: 1; font-size: .8rem; color: #e0d4f7; }
.mull-carte-ecart { font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mull-garder .mull-carte-ecart { color: #8fe0b8; }
.mull-jeter .mull-carte-ecart { color: #f0a0a0; }
@media (max-width: 700px) { .mull-verdict { grid-template-columns: 1fr; } }

/* Barre de filtres des onglets Stats cartes / Plan de jeu : depuis le retrait
   de la sélection par bicolore, il ne reste qu'un compteur et les sélecteurs. */
.pill-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.pill-bar-count { font-size: .78rem; color: var(--text-secondary, #a090c8); }

/* Étiquettes des sélecteurs de filtre : trois champs identiques côte à côte
   étaient indiscernables, au point qu'on prenait l'archétype ADVERSE pour le
   sien — et le périmètre restait alors complet, sans que rien ne l'indique. */
.pill-field { display: inline-flex; flex-direction: column; gap: .12rem; }
.pill-field-lab { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em;
  color: #8878b0; padding-left: .15rem; }

/* ===== Plan de jeu — fiche de matchup ===== */
/* Écart de lore par tour : une colonne par tour, hauteur proportionnelle à
   l'écart moyen. Vert vers le haut = on mène, rouge vers le bas = on est
   derrière. Le croisement des deux marque le tour de bascule. */
.mu-bars { white-space: nowrap; }
.mu-cell { display: inline-block; width: 12px; height: 26px; margin-right: 2px;
  position: relative; border-radius: 2px; background: rgba(255,255,255,0.05); vertical-align: middle; }
.mu-cell::after { content: ''; position: absolute; left: 0; right: 0; height: var(--h, 0%); border-radius: 2px; }
.mu-pos::after { bottom: 50%; background: #2ecc71; }
.mu-neg::after { top: 50%; background: #e0473e; }
.mu-vide { opacity: .35; }


/* ===================================================================== */
/* ===== PAGE D'ACCUEIL (visiteur non connecté) ======================== */
/* ===================================================================== */
/* Couvre toute la fenêtre et défile seule : l'application reste chargée
   derrière, masquée, jusqu'à la connexion (cf. showSignIn dans app.js). */
.landing {
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow-y: auto;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(139, 92, 246, 0.22), transparent 60%),
    radial-gradient(40rem 26rem at -10% 30%, rgba(46, 134, 222, 0.14), transparent 60%),
    var(--ink-0);
  color: var(--text-main);
}

.landing::before {
  /* Filet aux couleurs des encres en haut de page : la signature du logo. */
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 3px;
  background: var(--ink-spectrum);
  z-index: 2;
}

.landing-nav,
.landing main,
.landing-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-main);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}

.landing-nav-btn {
  background: transparent;
  color: var(--text-main);
  border: 1px solid rgba(236, 231, 247, 0.25);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.landing-nav-btn:hover { border-color: var(--gold); background: rgba(212, 175, 55, 0.08); }

.landing :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* --- Héros --- */
.landing-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
  padding: 3.5rem 0 4rem;
}

.landing-eyebrow {
  margin: 0 0 1rem;
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.landing-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

.landing-lead {
  font-size: 1.1rem;
  color: var(--text-dim);
  max-width: 34rem;
  margin: 0 0 2rem;
  text-wrap: pretty;
}

.landing-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.landing-cta-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.landing .google-signin-btn {
  padding: 12px 22px;
  font-size: 0.98rem;
  border-radius: 999px;
}

.landing-status {
  margin-top: 0.9rem;
  min-height: 1.2em;
}

/* --- Aperçu décoratif --- */
.landing-preview {
  display: grid;
  gap: 1rem;
}

.preview-card {
  background: linear-gradient(180deg, rgba(49, 38, 84, 0.75), rgba(27, 21, 48, 0.92));
  border: 1px solid rgba(236, 231, 247, 0.1);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.preview-card-small {
  width: 46%;
  justify-self: end;
  margin-top: -2.25rem;
  margin-right: -0.75rem;
  display: grid;
  gap: 0.7rem;
}

.preview-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.preview-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}

.preview-chip {
  font-size: 0.72rem;
  color: var(--text-dim);
  border: 1px solid rgba(236, 231, 247, 0.15);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  white-space: nowrap;
}

.preview-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.preview-bars li {
  display: grid;
  grid-template-columns: auto 8.5rem 1fr 2.8rem;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
}

.preview-bars b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.preview-label {
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(236, 231, 247, 0.08);
  overflow: hidden;
}
.bar > span {
  display: block;
  height: 100%;
  width: var(--v);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), var(--gold));
}

.ink-pair { display: inline-flex; }
.ink {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--ink-1);
}
.ink + .ink { margin-left: -5px; }
.ink-amber { background: var(--ink-amber); }
.ink-amethyst { background: var(--ink-amethyst); }
.ink-emerald { background: var(--ink-emerald); }
.ink-ruby { background: var(--ink-ruby); }
.ink-sapphire { background: var(--ink-sapphire); }
.ink-steel { background: var(--ink-steel); }

.preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.preview-grid i {
  aspect-ratio: 1;
  border-radius: 4px;
  /* Vert = matchup favorable, rouge = défavorable, comme dans la matrice. */
  background: color-mix(in oklab, var(--ink-emerald) calc(var(--h) * 100%), var(--ink-ruby));
  opacity: 0.85;
}

/* --- Fonctionnalités --- */
.landing-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 1.5rem;
}

.landing-features { padding: 1rem 0 3.5rem; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.feature {
  background: rgba(37, 29, 66, 0.55);
  border: 1px solid rgba(236, 231, 247, 0.08);
  border-radius: 14px;
  padding: 1.25rem;
}

.feature h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0;
  margin: 0.85rem 0 0.4rem;
}

.feature p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-dim);
}

.feature-icon {
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 10px;
  font-size: 1.1rem;
  color: #fff;
}
.ink-bg-sapphire { background: color-mix(in oklab, var(--ink-sapphire) 80%, black); }
.ink-bg-amber { background: color-mix(in oklab, var(--ink-amber) 70%, black); }
.ink-bg-amethyst { background: color-mix(in oklab, var(--ink-amethyst) 80%, black); }
.ink-bg-emerald { background: color-mix(in oklab, var(--ink-emerald) 80%, black); }

/* --- Étapes --- */
.landing-steps {
  padding: 2.5rem 0 4rem;
  border-top: 1px solid rgba(236, 231, 247, 0.08);
}

.steps {
  list-style: none;
  counter-reset: etape;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.steps li {
  counter-increment: etape;
  position: relative;
  padding-left: 3rem;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.steps li b { display: block; color: var(--text-main); font-weight: 600; }
.steps li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink-0);
  background: var(--gold);
}

/* --- Pied de page --- */
.landing-footer {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  border-top: 1px solid rgba(236, 231, 247, 0.08);
}
.landing-footer p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* --- Le meta du moment (stats publiques duels.ink, public-meta.js) --- */
.landing-meta {
  padding: 2.5rem 0 3.5rem;
  border-top: 1px solid rgba(236, 231, 247, 0.08);
}
.landing-meta .landing-h2 { margin-bottom: 0.35rem; }
.landing-meta-sub { margin: 0 0 1.5rem; color: var(--text-dim); font-size: 0.95rem; }

.meta-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.meta-kpi {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  background: rgba(37, 29, 66, 0.55);
  border: 1px solid rgba(236, 231, 247, 0.08);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  min-width: 0;
}
.meta-kpi-label { font-size: 0.8rem; color: var(--text-dim); }
.meta-kpi-value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.meta-kpi-value > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-kpi-hint { font-size: 0.82rem; color: var(--text-dim); }

.meta-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1rem;
}
.meta-card {
  background: linear-gradient(180deg, rgba(49, 38, 84, 0.6), rgba(27, 21, 48, 0.85));
  border: 1px solid rgba(236, 231, 247, 0.1);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  min-width: 0;
}
.meta-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}
.meta-card h3 { font-family: var(--font-display); font-size: 1rem; margin: 0; letter-spacing: 0; }
.meta-card-cols { display: flex; gap: 1.1rem; font-size: 0.75rem; color: var(--text-dim); }

.meta-decks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.meta-decks li {
  display: grid;
  grid-template-columns: 1.2rem auto minmax(0, 1fr) 5.5rem 3.4rem 3.8rem;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
}
.meta-rank { color: var(--text-dim); font-variant-numeric: tabular-nums; text-align: right; }
.meta-deck-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-share, .meta-wr { text-align: right; font-variant-numeric: tabular-nums; }
.meta-share { color: var(--text-dim); }
.meta-wr.is-up { color: #5fd49a; }
.meta-wr.is-down { color: #f07a8a; }

.meta-matrix-wrap { overflow-x: auto; }
.meta-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.meta-matrix th { font-weight: 400; padding: 0 0 0.2rem; text-align: center; }
.meta-matrix tbody th { padding: 0 0.3rem 0 0; }
.meta-matrix td {
  text-align: center;
  height: 2.2rem;
  min-width: 2.2rem;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  /* Vert = matchup favorable au deck en ligne, rouge = défavorable. */
  background: color-mix(in oklab, var(--ink-emerald) calc(var(--h, 0.5) * 100%), var(--ink-ruby));
}
.meta-matrix thead td { background: none; }
.meta-matrix td.is-mirror,
.meta-matrix td.is-thin { background: rgba(236, 231, 247, 0.06); color: var(--text-dim); font-weight: 400; }
.meta-legend { margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--text-dim); }

/* Évolution jour par jour */
.meta-evo { margin-top: 1rem; }
.evo-switch {
  display: inline-flex;
  border: 1px solid rgba(236, 231, 247, 0.15);
  border-radius: 999px;
  padding: 2px;
}
.evo-switch button {
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.25rem 0.8rem;
  cursor: pointer;
}
.evo-switch button[aria-pressed="true"] { background: rgba(212, 175, 55, 0.16); color: var(--text-main); }
.evo-wrap { overflow-x: auto; }
.evo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.evo-table th, .evo-table td {
  padding: 0.45rem 0.6rem;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid rgba(236, 231, 247, 0.06);
}
.evo-table thead th { font-weight: 400; color: var(--text-dim); vertical-align: bottom; }
.evo-table thead th .ink-pair { display: flex; justify-content: flex-end; margin-bottom: 0.2rem; }
.evo-col-name { display: block; font-size: 0.72rem; }
.evo-table tbody th {
  text-align: left;
  font-weight: 500;
  position: sticky;
  left: 0;
  background: #1f1838;
}
.evo-table td.evo-games, .evo-table th.evo-games { color: var(--text-dim); }
.evo-table td.is-up { color: #5fd49a; }
.evo-table td.is-down { color: #f07a8a; }
.evo-table td.is-thin { color: var(--text-dim); }
.evo-delta { font-size: 0.65rem; margin-left: 0.25rem; }
.evo-table .d-short { display: none; }
.evo-delta.is-up { color: #5fd49a; }
.evo-delta.is-down { color: #f07a8a; }

.landing-meta-credit { margin: 1rem 0 0; font-size: 0.8rem; color: var(--text-dim); }
.landing-meta-credit a { color: var(--gold); }

/* Squelette le temps de la requête : blocs vides mais à leur taille finale,
   pour que la page ne saute pas quand les chiffres arrivent. */
.landing-meta.is-loading .meta-kpi { min-height: 5.6rem; }
.landing-meta.is-loading .meta-decks,
.landing-meta.is-loading .meta-matrix-wrap { min-height: 14rem; }
.landing-meta.is-loading .meta-kpi,
.landing-meta.is-loading .meta-card { animation: meta-pulse 1.4s ease-in-out infinite; }
@keyframes meta-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .landing-meta.is-loading .meta-kpi,
  .landing-meta.is-loading .meta-card { animation: none; }
}

/* --- Écrans étroits --- */
@media (max-width: 900px) {
  .landing-hero { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 2rem; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .meta-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .landing-nav, .landing main, .landing-footer { padding-left: 1rem; padding-right: 1rem; }
  .landing-brand span { font-size: 1rem; }
  .feature-grid, .steps { grid-template-columns: 1fr; }
  .preview-bars li { grid-template-columns: auto 1fr 2.8rem; }
  .preview-bars .bar { display: none; }
  .preview-card-small { display: none; }
  .landing .google-signin-btn { width: 100%; justify-content: center; }
  .meta-kpis { grid-template-columns: 1fr; }
  .meta-decks li { grid-template-columns: 1.2rem auto minmax(0, 1fr) 3.2rem 3.6rem; }
  .meta-decks .bar { display: none; }
  .meta-card-cols { display: none; }
  .evo-col-name { display: none; }
  .evo-table .d-long { display: none; }
  .evo-table .d-short { display: inline; }
  .evo-table th, .evo-table td { padding: 0.45rem 0.4rem; }
  .meta-evo .meta-card-head { flex-wrap: wrap; }
}

/* ===================================================================== */
/* ===== ONGLET « MES GROUPES » (groups-ui.js) ========================= */
/* ===================================================================== */
.groups-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.groups-count {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.groups-intro {
  color: var(--text-dim);
  margin: 0.5rem 0 1.25rem;
  max-width: 48rem;
}
.groups-banner,
.landing-invite-note {
  border: 1px solid var(--border-gold);
  background: rgba(212, 175, 55, 0.08);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  color: var(--text-main);
  font-size: 0.92rem;
}
.landing-invite-note { margin: 1.25rem 0 0; max-width: 34rem; }

.groups-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.groups-empty { color: var(--text-dim); margin: 0; }
.groups-empty.error { color: var(--violet-bright); }

.group-card {
  background: rgba(17, 13, 31, 0.55);
  border: 1px solid rgba(236, 231, 247, 0.1);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  display: grid;
  gap: 0.85rem;
}
.group-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
}
.group-name {
  font-size: 1.1rem;
  letter-spacing: 0;
  margin-right: auto;
  overflow-wrap: anywhere;
}
.group-role {
  font-size: 0.72rem;
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
  border: 1px solid rgba(236, 231, 247, 0.2);
  color: var(--text-dim);
}
.group-role.is-owner {
  border-color: var(--border-gold);
  color: var(--gold);
}
.group-members { font-size: 0.8rem; color: var(--text-dim); }

.group-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.group-invite-label {
  width: 100%;
  font-size: 0.75rem;
  color: var(--text-dim);
}
.group-invite-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
  letter-spacing: 0.12em;
  background: rgba(236, 231, 247, 0.06);
  border: 1px dashed rgba(236, 231, 247, 0.25);
  border-radius: 8px;
  padding: 0.3rem 0.6rem;
}
.group-invite-none { margin: 0; font-size: 0.85rem; color: var(--text-dim); }
.group-btn { padding: 0.4rem 0.8rem; font-size: 0.8rem; }

.group-card-foot {
  border-top: 1px solid rgba(236, 231, 247, 0.08);
  padding-top: 0.7rem;
}
.group-leave {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.group-leave:hover { color: #f87171; }
.group-leave:disabled, .group-btn:disabled { opacity: 0.5; cursor: default; }

.groups-forms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.group-form {
  border: 1px solid rgba(236, 231, 247, 0.1);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  background: rgba(37, 29, 66, 0.35);
}
.group-form h3 {
  font-size: 1.05rem;
  letter-spacing: 0;
  margin: 0 0 0.7rem;
}
.group-form label {
  display: block;
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
}
.group-form-row {
  display: flex;
  gap: 0.5rem;
}
.group-form-row input { flex: 1; min-width: 0; }
.group-form-row .btn-primary { padding: 0.6rem 1.1rem; white-space: nowrap; }
.group-form-hint { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--text-dim); }

@media (max-width: 700px) {
  .groups-forms { grid-template-columns: 1fr; }
}

/* --- Membres d'un groupe --- */
.group-card-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.group-link,
.group-kick {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.group-link { color: var(--gold); }
.group-foot-actions { display: inline-flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.group-rename { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 1rem; }
.group-rename input { flex: 1 1 12rem; min-width: 0; }
.group-kick { color: var(--text-dim); }
.group-kick:hover { color: #f87171; }
.group-kick:disabled { opacity: 0.5; cursor: default; }

.group-members-panel {
  border-top: 1px solid rgba(236, 231, 247, 0.08);
  padding-top: 0.7rem;
}
.group-discord-panel {
  border-top: 1px solid rgba(236, 231, 247, 0.08);
  padding-top: 0.7rem;
  display: grid;
  gap: 0.6rem;
  font-size: 0.9rem;
}
.group-discord-panel p { margin: 0; }
.discord-intro, .discord-note { color: var(--text-dim); }
.discord-state.is-on { color: #86efac; }
.discord-state.is-error, .discord-msg.error { color: #f87171; }
.discord-state code { overflow-wrap: anywhere; }
.discord-help summary { cursor: pointer; color: var(--gold); }
.discord-help ol { margin: 0.4rem 0; padding-left: 1.3rem; display: grid; gap: 0.2rem; }
.discord-form, .discord-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.discord-url { flex: 1 1 14rem; min-width: 0; }
.discord-msg { color: var(--gold); }
.discord-replays { display: grid; gap: 0.4rem; padding-top: 0.5rem; border-top: 1px dashed rgba(236, 231, 247, 0.12); }
.discord-replays a.group-btn { display: inline-block; text-decoration: none; }
.admin-discord-checks { list-style: none; padding: 0; margin: 0.4rem 0; display: grid; gap: 0.25rem; font-size: 0.9rem; }

.member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.member-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  font-size: 0.9rem;
}
.member-name { margin-right: auto; overflow-wrap: anywhere; }
.member-name em { color: var(--text-dim); font-style: normal; font-size: 0.8rem; }
.member-actions { display: inline-flex; align-items: center; gap: 0.6rem; }

/* --- Accueil d'un joueur sans groupe (app.js : body.no-groups) --- */
/* `display: flex` l'emporterait sur l'attribut `hidden` : sans la règle
   [hidden] ci-dessous, le bandeau s'affichait aussi aux membres qui ont
   déjà des groupes. */
.groups-welcome[hidden] { display: none; }
.groups-welcome {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(236, 231, 247, 0.08);
}
.groups-welcome-title {
  font-size: 1.5rem;
  letter-spacing: 0;
  margin: 0 0 0.3rem;
}
.groups-welcome p { margin: 0; color: var(--text-dim); max-width: 44rem; }

/* Sans groupe, rien d'autre que l'onglet « Mes groupes » n'a de sens : les
   autres vues interrogeraient des données que les règles refusent. */
body.no-groups .tabs,
body.no-groups #quick-stats-bar,
body.no-groups .view:not(#view-groups) {
  display: none !important;
}
body.no-groups #view-groups { display: block; }
body.no-groups .groups-head,
body.no-groups .groups-intro,
body.no-groups #groups-list { display: none; }

/* --- Écran de chargement (avant la réponse de Firebase Auth) --- */
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  background: var(--ink-0);
}
.boot-splash img { animation: bootPulse 1.4s ease-in-out infinite; }
@keyframes bootPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .boot-splash img { animation: none; }
}

/* ===================================================================== */
/* ===== MODERNISATION DE L'INTERFACE (24/09/2026) ===================== */
/* ===================================================================== */
/* Couche posée par-dessus l'existant plutôt qu'une réécriture : elle ne
   touche que les éléments communs (en-tête, onglets, cartes, champs,
   boutons, pastilles), et chaque vue hérite du nouveau style sans qu'on ait
   à rouvrir ses propres règles. Principes : texte courant en Inter (plus
   lisible pour des chiffres et des tableaux qu'une police à empattements),
   titres en Fraunces, casse normale (plus de capitales espacées), surfaces
   sobres, l'or réservé aux accents et aux actions principales. */
:root {
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --surface-1: #161229;
  --surface-2: #1d1834;
  --surface-3: #262042;
  --line: rgba(236, 231, 247, 0.08);
  --line-strong: rgba(236, 231, 247, 0.16);
  --radius: 14px;
  --radius-sm: 10px;
  --focus: 0 0 0 3px rgba(138, 106, 232, 0.35);
}

/* Un élément marqué `hidden` reste caché, quel que soit le `display` que
   lui donne sa classe (la barre de stats vide sous les onglets, le bandeau
   Bienvenue… ont chacun eu ce défaut). */
[hidden] { display: none !important; }

body {
  font-family: var(--font-ui);
  font-size: 15px;
  background: radial-gradient(70rem 30rem at 50% -12rem, rgba(108, 79, 209, 0.18), transparent 70%), var(--ink-0);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; }

h1, h2, h3 { letter-spacing: -0.005em; }

/* --- En-tête : compact, marque à gauche --- */
.topbar {
  /* Au-dessus du contenu : le menu du profil déborde sur la page, et le flou
     (backdrop-filter) enferme son z-index dans l'en-tête. */
  position: relative;
  z-index: 60;
  padding: 0.85rem 1.25rem;
  background: rgba(15, 12, 30, 0.72);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.topbar-content { justify-content: space-between; max-width: 1280px; }
.brand-block {
  position: static;
  transform: none;
  text-align: left;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.brand { font-size: 1.35rem; color: var(--text-main); gap: 0.5rem; }
.brand-logo { width: 32px; height: 32px; }
.brand-shimmer {
  animation: none;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.subbrand {
  margin: 0;
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0;
  color: var(--text-dim);
}
.user-info {
  background: var(--surface-2);
  border-color: var(--line-strong);
}
.user-name, .signout-btn { font-family: var(--font-ui); }

@media (max-width: 640px) {
  .brand { font-size: 1.15rem; }
  .brand-logo { width: 28px; height: 28px; }
  .subbrand { display: none; }
  .brand-block { width: auto; }
}

/* --- Onglets : une seule ligne défilante, indicateur discret --- */
.tabs {
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0.25rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.85rem;
  white-space: nowrap;
}
.tab:hover {
  color: var(--text-main);
  background: rgba(236, 231, 247, 0.05);
  border-color: transparent;
}
.tab.active {
  color: var(--text-main);
  background: var(--surface-3);
  border-color: var(--line-strong);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--gold);
}
.tab:focus-visible { outline: none; box-shadow: var(--focus); }

/* Ordinateur : jamais d'onglet coupé. La barre passe sur deux lignes si la
   fenêtre est trop étroite, au lieu de défiler derrière un fondu. Le fondu et
   le défilement restent réservés au téléphone, où le geste est naturel. */
@media (min-width: 900px) {
  .tabs {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    gap: 0.35rem 0.1rem;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .tab { padding: 0.5rem 0.7rem; }
}

main { max-width: 1280px; padding: 1.5rem 1.25rem 4rem; }

/* --- Cartes et sections --- */
.card, .section-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px rgba(0, 0, 0, 0.25);
}
.card h2, .section-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-main);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1.25rem;
}
@media (max-width: 640px) {
  .card, .section-card { padding: 1.1rem 1rem; border-radius: 12px; }
}

/* --- Champs --- */
label {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
}
select, input[type="date"], input[type="url"], input[type="text"],
input[type="password"], input[type="number"], input[type="search"], textarea {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  background: rgba(236, 231, 247, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
select:hover, input:hover, textarea:hover { border-color: rgba(236, 231, 247, 0.26); }
select:focus, input:focus, textarea:focus {
  border-color: var(--violet-bright);
  box-shadow: var(--focus);
  background: rgba(236, 231, 247, 0.06);
}
select option { background: var(--surface-2); color: var(--text-main); }

/* --- Boutons --- */
.btn-primary {
  font-family: var(--font-ui);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 0.92rem;
  animation: none;
  background: var(--gold);
  background-image: none;
  color: #1a1330;
  border-radius: var(--radius-sm);
  padding: 0.7rem 1.35rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 18px rgba(212, 175, 55, 0.18);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn-primary:hover { background: #e2bf4f; }
.btn-primary:disabled { opacity: 0.55; cursor: default; transform: none; }
.btn-secondary, .btn-danger {
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0;
  border-radius: var(--radius-sm);
}
.btn-secondary {
  background: rgba(236, 231, 247, 0.05);
  border: 1px solid var(--line-strong);
}
.btn-secondary:hover { background: rgba(236, 231, 247, 0.09); border-color: rgba(236, 231, 247, 0.3); }
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-danger:focus-visible { outline: none; box-shadow: var(--focus); }

/* --- Pastilles (encres, résultat, format, ordre de jeu) --- */
.pill, .ink-pill {
  font-family: var(--font-ui);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  border-width: 1px;
  border-color: var(--line-strong);
  background: rgba(236, 231, 247, 0.03);
}
.ink-pill { padding: 0.4rem 0.8rem 0.4rem 0.45rem; }
.pill:hover, .ink-pill:hover { border-color: rgba(236, 231, 247, 0.32); }
.ink-pill:has(input:checked) {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.1);
  box-shadow: none;
}

/* Petits libellés de filtres, autrefois en capitales espacées */
.pill-field-lab { text-transform: none; letter-spacing: 0; font-size: 0.72rem; }

/* Le sélecteur de deck du formulaire portait ses couleurs en ligne. */
#formDeckSelect { max-width: 320px; }

/* --- Tableaux --- */
table { font-variant-numeric: tabular-nums; }
th { font-family: var(--font-ui); letter-spacing: 0; }

/* Intertitres et libellés de section : casse normale, même famille. Les
   en-têtes de tableaux et les étiquettes de chiffres gardent leurs petites
   capitales, qui restent lisibles à cette taille. */
.import-section-label, .filter-label, .profile-panel-label, .community-subtitle,
.combo-group-title, .plan-verdict-lab, .admin-stat-label {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-ui);
  font-weight: 600;
}
.import-section-label { font-size: 0.95rem; color: var(--text-main); }
.quick-stat-label, .fp-stat-label, table.leaderboard th, .players-table th, .curve-head {
  font-family: var(--font-ui);
  letter-spacing: 0.04em;
}
.google-signin-btn { font-family: var(--font-ui); }

/* --- Communauté : choix du groupe --- */
.community-group-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
}
.community-group-pick select { width: auto; min-width: 14rem; }

/* --- Groupe affiché (en-tête) et période chargée (Historique) --- */
.view-group-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0 auto;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.view-group-pick select {
  width: auto;
  min-width: 11rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}
@media (max-width: 640px) {
  .view-group-pick { order: 3; width: 100%; margin: 0; }
  .view-group-pick select { flex: 1; }
}
.history-window-note {
  margin: -0.5rem 0 1rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.history-window-note .link-btn { font-size: 0.85rem; margin-left: 0.35rem; }


/* ===================================================================== */
/* ===== PUBLICITÉ (ads.js) ============================================ */
/* ===================================================================== */
/* Encart sobre, toujours étiqueté, séparé du contenu. Masqué (hidden) tant
   qu'AdSense n'est pas configuré ; retiré s'il n'est pas servi. */
.ad-slot {
  display: block;
  margin: 1.5rem auto;
  max-width: 970px;
  padding: 0.5rem 0.75rem 0.75rem;
  border: 1px solid rgba(236, 231, 247, 0.08);
  border-radius: 12px;
  background: rgba(27, 21, 48, 0.4);
}
.ad-slot-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ad-slot-body { min-height: 90px; }
.landing .ad-slot { margin: 0 0 3rem; }

.landing-footer-links, .profile-panel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
}
.landing-footer-links a, .profile-panel-links a { color: var(--text-dim); }
.landing-footer-links a:hover, .profile-panel-links a:hover { color: var(--gold); }
.link-danger { background: none; border: 0; padding: 0; font: inherit; color: var(--text-dim); cursor: pointer; text-decoration: underline; }
.link-danger:hover, .link-danger:focus-visible { color: #e07070; }
.profile-panel-links { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid rgba(236, 231, 247, 0.08); }

/* --- Premiers pas (onboarding.js) --- */
.onboarding {
  width: calc(100% - 2rem);
  max-width: calc(1280px - 2.5rem);
  box-sizing: border-box;
  margin: 1rem auto 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  background: linear-gradient(160deg, var(--ink-2), var(--ink-1));
}
.onboarding-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.onboarding-title { font-size: 1.1rem; margin: 0; }
.onboarding-count { font-size: 0.85rem; color: var(--text-dim); font-weight: 500; margin-left: 0.4rem; }
.onboarding-hide { background: none; border: 0; padding: 0; font: inherit; font-size: 0.82rem; color: var(--text-dim); cursor: pointer; text-decoration: underline; }
.onboarding-steps { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.onboarding-step { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.7rem; border-radius: 10px; background: rgba(236, 231, 247, 0.04); font-size: 0.9rem; }
.onboarding-step p { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--text-dim); line-height: 1.4; }
.onboarding-step.is-done { opacity: 0.6; }
.onboarding-step.is-next { background: rgba(212, 175, 55, 0.08); outline: 1px solid rgba(212, 175, 55, 0.35); }
.onboarding-check { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: 0.8rem; font-weight: 700; border: 1px solid rgba(236, 231, 247, 0.25); }
.onboarding-step.is-done .onboarding-check { background: #22a36b; border-color: #22a36b; color: #fff; }
.onboarding-step.is-next .onboarding-check { border-color: var(--gold); color: var(--gold); }
.onboarding-cta { margin-top: 0.6rem; padding: 0.45rem 0.9rem; font-size: 0.82rem; }
.groups-welcome-next { margin-top: 0.4rem; font-size: 0.85rem; color: var(--text-dim); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { .onboarding-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  .onboarding-steps { grid-template-columns: 1fr; }
  .onboarding-step.is-done { display: none; }
}

/* --- Profil : export des données (export.js) --- */
.profile-panel-export { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin-top: 0.9rem; }
.profile-panel-export .profile-panel-label { width: 100%; margin: 0; }
.profile-export-btn { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
.profile-panel-export .form-status { width: 100%; }

/* --- Admin : sauvegardes --- */
.admin-badge { font-size: 0.72rem; padding: 0.1rem 0.45rem; border-radius: 999px; margin-left: 0.4rem; vertical-align: middle; }
.admin-badge-ok { background: rgba(34, 163, 107, 0.18); color: #5fd39d; }
.admin-badge-warn { background: rgba(244, 178, 35, 0.18); color: #f4b223; }
.admin-backups-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0.6rem 0; }
.admin-backups-table th, .admin-backups-table td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid rgba(236, 231, 247, 0.08); }
.admin-backups-table td:last-child { text-align: right; }
.admin-stats-note.error { color: #f87171; }
.admin-backups-panel .admin-details-body { overflow-x: auto; }

/* --- Premium (premium.js) --- */
.tab.is-locked::after { content: '🔒'; font-size: 0.7em; margin-left: 0.25rem; opacity: 0.8; }
.profile-panel-premium { margin-top: 0.9rem; font-size: 0.85rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.profile-panel-premium:empty { display: none; }
.premium-dim { color: var(--text-dim); font-size: 0.85em; }
.premium-cta-sm { padding: 0.35rem 0.8rem; font-size: 0.8rem; }
.premium-banner {
  width: calc(100% - 2rem); max-width: calc(1280px - 2.5rem); box-sizing: border-box;
  margin: 1rem auto 0; padding: 0.7rem 1rem; border-radius: 12px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
  background: rgba(212, 175, 55, 0.1); border: 1px solid rgba(212, 175, 55, 0.4); font-size: 0.9rem;
}
.premium-banner[hidden] { display: none; }
.premium-banner-actions { display: inline-flex; align-items: center; gap: 0.6rem; }
.premium-banner-close { background: none; border: 0; color: var(--text-dim); cursor: pointer; font-size: 1rem; padding: 0.2rem; }
.premium-lock { max-width: 640px; margin: 0 auto; text-align: center; }
.premium-lock h2 { margin-bottom: 0.6rem; }
.premium-tag { display: inline-block; font-size: 0.7rem; vertical-align: middle; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--gold); color: #1a1430; font-family: Inter, system-ui, sans-serif; font-weight: 700; letter-spacing: 0.03em; }
.premium-perks { list-style: none; padding: 0; margin: 1rem auto 1.4rem; display: grid; gap: 0.5rem; text-align: left; max-width: 480px; }
.premium-perks li { padding: 0.55rem 0.8rem; border-radius: 10px; background: rgba(236, 231, 247, 0.05); font-size: 0.92rem; }
.premium-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 0.8rem; }
.premium-plan { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1rem; border-radius: 12px; border: 1px solid rgba(236, 231, 247, 0.12); background: rgba(37, 29, 66, 0.4); }
.premium-plan.is-best { border-color: var(--gold); }
.premium-plan-name { font-size: 0.85rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.premium-plan-price { font-family: "Fraunces", Georgia, serif; font-size: 1.8rem; font-weight: 700; }
.premium-plan-price small { font-family: Inter, system-ui, sans-serif; font-size: 0.8rem; font-weight: 500; color: var(--text-dim); }
.premium-plan-note { font-size: 0.78rem; color: var(--gold); }
.premium-plan .btn-primary { margin-top: auto; width: 100%; }
.premium-plan-note + .btn-primary, .premium-plan-price + .btn-primary { margin-top: auto; }
.premium-plan > .premium-plan-price { margin-bottom: 0.5rem; }
.premium-plan .btn-primary:disabled { opacity: 0.55; cursor: default; }
@media (max-width: 520px) { .premium-plans { grid-template-columns: 1fr; } }

.premium-code-toggle { font-size: 0.8rem; }
.premium-redeem { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; margin-top: 0.3rem; }
.premium-redeem[hidden] { display: none; }
.premium-redeem input { flex: 1 1 8rem; min-width: 0; text-transform: uppercase; }
.premium-redeem .form-status { width: 100%; margin: 0; font-size: 0.8rem; }
.premium-redeem .form-status:empty { display: none; }
.premium-lock-code { margin: 1.2rem auto 0; max-width: 360px; display: grid; gap: 0.3rem; justify-items: center; }

/* --- Admin : codes Premium --- */
.promo-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0.8rem; }
.promo-form label { display: grid; gap: 0.25rem; font-size: 0.8rem; color: var(--text-dim); }
.promo-form input, .promo-form select { min-width: 0; width: 9rem; }
.promo-form .promo-note input { width: 14rem; }
.promo-code { font-size: 0.95rem; letter-spacing: 0.06em; color: var(--gold); }
.promo-table tr.is-off td { opacity: 0.5; }
.promo-actions { white-space: nowrap; }
.promo-actions .group-leave { margin-left: 0.5rem; }
.admin-promo-panel .admin-details-body { overflow-x: auto; }

/* Fenêtre « Premium » (premium.js) */
.premium-modal-box { position: relative; max-width: 640px; text-align: center; padding: 1.6rem 1.4rem 1.4rem; background: linear-gradient(160deg, var(--ink-2), var(--ink-1)); border-color: var(--border-gold); }
.premium-modal-box h2 { margin: 0 0 0.5rem; }
.premium-modal-close { position: absolute; top: 0.7rem; right: 0.8rem; background: none; border: 0; color: var(--text-dim); font-size: 1.1rem; cursor: pointer; padding: 0.3rem; }
.premium-modal-close:hover { color: var(--text); }

/* --- Bouton de langue FR / EN (i18n.js) --- */
.landing-nav-actions { display: inline-flex; align-items: center; gap: 0.6rem; }
.lang-switch {
  font: 600 0.75rem/1 Inter, system-ui, sans-serif; letter-spacing: 0.06em;
  padding: 0.4rem 0.55rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text-dim); border: 1px solid rgba(236, 231, 247, 0.22);
}
.lang-switch:hover, .lang-switch:focus-visible { color: var(--gold); border-color: var(--gold); }

/* --- Admin : erreurs du site --- */
.errors-table td { vertical-align: top; }
.errors-table summary { cursor: pointer; color: var(--text); }
.errors-stack { white-space: pre-wrap; font-size: 0.75rem; color: var(--text-dim); margin: 0.4rem 0 0; max-width: 520px; }
.admin-errors-panel .admin-details-body { overflow-x: auto; }

/* --- « Partager mes stats » (share-card.js) --- */
.quick-stat-share { background: rgba(212, 175, 55, 0.12); border: 1px solid rgba(212, 175, 55, 0.45); color: var(--gold); border-radius: 999px; padding: 0.3rem 0.8rem; font: 600 0.8rem Inter, system-ui, sans-serif; cursor: pointer; }
.quick-stat-share:hover { background: rgba(212, 175, 55, 0.22); }
.profile-share-btn { width: 100%; margin-top: 0.9rem; padding: 0.45rem 0.8rem; font-size: 0.85rem; }
.share-modal-box { position: relative; max-width: 760px; text-align: center; background: linear-gradient(160deg, var(--ink-2), var(--ink-1)); border-color: var(--border-gold); }
.share-modal-box h2 { margin: 0 0 0.8rem; }
.share-img { width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(236, 231, 247, 0.12); }
.share-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem; margin: 0.9rem 0 0.4rem; }
.share-actions .btn-secondary { text-decoration: none; }

/* Profil : lien Discord (/match) */
.profile-panel-discord { display: grid; gap: 0.4rem; padding-top: 0.6rem; border-top: 1px solid rgba(236, 231, 247, 0.08); font-size: 0.85rem; }
.profile-panel-discord p { margin: 0; }
.profile-discord-note { color: var(--text-dim); }
.profile-discord-note.error { color: #f87171; }
.profile-discord-state { color: #86efac; }
.profile-discord-code { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.profile-discord-code code { font-size: 1rem; letter-spacing: 0.05em; color: var(--gold); overflow-wrap: anywhere; }
.profile-panel-discord > button { justify-self: start; }