/* Les comptes du Skull King : le bandeau d'identité de l'accueil, les
   marques de cote au salon et au récap, et les deux pages qui leur sont
   propres (connexion.html, classement.html). Chargé APRÈS skullking.css, dont
   il reprend les couleurs (--sk-*), les polices et les boutons de laiton :
   rien ici ne redessine ce qui existe déjà, ça ne fait qu'ajouter. */

/* --- Le menu du compte, en haut à droite -----------------------------
   Le pendant de « ← Tous les jeux » en haut à gauche : posé en fixe, il ne
   pousse rien dans la colonne de l'accueil. Une plaque de bois cerclée de
   laiton (pièce, pseudo, cote en gros chiffres) et dessous, déroulés
   d'office, Profil, Classement et Déconnexion — un clic sur la plaque les
   replie. Il suit
   l'accueil, le salon, le récap de fin et le classement ; pendant la
   partie, la table a besoin de tout l'écran. */
.sk-compte {
  position: fixed;
  top: 10px;
  right: 14px;
  z-index: 40;
  max-width: calc(100vw - 28px);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--sk-cream);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

body:has(#sk-screen-game:not(.hidden)) .sk-compte {
  display: none;
}

.sk-compte-plaque {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  margin-left: auto;
  padding: 5px 10px 5px 10px;
  border: 0;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 236, 196, 0.07), rgba(0, 0, 0, 0.3)),
    rgba(20, 12, 6, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(214, 170, 82, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.55);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-shadow: inherit;
  cursor: pointer;
}

.sk-compte-plaque:hover,
.sk-compte-plaque:focus-visible,
.sk-compte--ouvert .sk-compte-plaque {
  background:
    linear-gradient(180deg, rgba(255, 236, 196, 0.12), rgba(0, 0, 0, 0.25)),
    rgba(30, 19, 9, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(232, 192, 108, 0.8),
    0 6px 18px rgba(0, 0, 0, 0.55);
  outline: none;
}

.sk-compte--ouvert .sk-compte-plaque {
  border-radius: 3px 3px 0 0;
}

.sk-compte-chevron {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin: -3px 1px 0 1px;
  border-right: 1.5px solid var(--sk-brass-hi);
  border-bottom: 1.5px solid var(--sk-brass-hi);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.sk-compte--ouvert .sk-compte-chevron {
  margin-top: 3px;
  transform: rotate(-135deg);
}

/* Au salon, sur un écran bas (téléphone en paysage), le pseudo s'efface :
   la plaque mordait sur le logo. */
@media (max-height: 520px) {
  body:has(#sk-screen-home.hidden) .sk-compte .sk-compte-nom {
    display: none;
  }
}

.sk-compte-nom {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sk-compte-elo {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
  padding: 2px 8px 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px rgba(214, 170, 82, 0.4);
  font-family: 'Bitter', Georgia, serif;
  color: var(--sk-brass-hi);
  letter-spacing: 0.02em;
}

.sk-compte-elo b {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sk-compte-elo small {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sk-brass);
}

/* Le menu, déroulé d'office : collé sous la plaque, aussi large qu'elle
   au moins. */
.sk-compte-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  padding: 3px;
  border-radius: 0 0 3px 3px;
  background: rgba(16, 10, 5, 0.97);
  box-shadow:
    inset 0 0 0 1px rgba(232, 192, 108, 0.8),
    0 14px 28px rgba(0, 0, 0, 0.6);
  animation: sk-compte-menu-entree 0.14s ease-out;
}

.sk-compte-menu[hidden] {
  display: none;
}

@keyframes sk-compte-menu-entree {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-compte-menu {
    animation: none;
  }
}

/* Des lignes serrées : déroulé d'office, le menu doit s'arrêter au-dessus
   du cadre « Code de la partie » du salon (à 124 px du haut). */
.sk-compte-item {
  display: block;
  width: 100%;
  padding: 5px 12px 4px;
  line-height: 1.2;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--sk-cream);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  cursor: pointer;
}

.sk-compte-item + .sk-compte-item {
  border-top: 1px solid rgba(184, 137, 53, 0.18);
}

.sk-compte-item:hover,
.sk-compte-item:focus-visible {
  background: linear-gradient(180deg, #e2bd6a, #b48530 55%, #8a6220);
  color: #2a1906;
  outline: none;
}

.sk-compte-item:hover + .sk-compte-item,
.sk-compte-item:focus-visible + .sk-compte-item {
  border-top-color: transparent;
}

.sk-compte-item--courant {
  color: var(--sk-brass-hi);
  cursor: default;
}

.sk-compte-item--courant::after {
  content: ' ·';
}

.sk-compte-item--courant:hover,
.sk-compte-item--courant:focus-visible {
  background: rgba(184, 137, 53, 0.14);
  color: var(--sk-brass-hi);
}

/* Les boutons de laiton (encore utilisés par le profil). */
.sk-compte-classement {
  flex-shrink: 0;
  padding: 6px 11px 5px;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #e2bd6a, #b48530 55%, #8a6220);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 210, 0.55),
    inset 0 0 0 1px rgba(60, 38, 10, 0.6),
    0 2px 0 rgba(0, 0, 0, 0.5);
  color: #2a1906;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 236, 190, 0.45);
  white-space: nowrap;
  cursor: pointer;
}

.sk-compte-classement:hover,
.sk-compte-classement:focus-visible {
  background: linear-gradient(180deg, #f0d083, #c4963b 55%, #9a6e25);
}

/* Le pseudo d'un compte ne se tape pas : le champ se lit comme une
   étiquette gravée plutôt que comme une case à remplir. */
input.sk-pseudo-compte {
  cursor: default;
  color: var(--sk-brass-hi);
  font-weight: 600;
}

/* --- Ce que la partie a fait à la cote, au récap ---------------------- */
.sk-end-elo {
  font-family: 'Bitter', Georgia, serif;
  font-size: 0.78em;
  font-weight: 700;
  white-space: nowrap;
}

.sk-end-parti {
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: 0.8em;
  color: var(--sk-cream-3);
}

.sk-end-elo--up {
  color: #8fc98a;
}

.sk-end-elo--down {
  color: #e09a90;
}

/* =====================================================================
   LES PAGES DE COMPTE — même taverne en fond que l'accueil, même logo, un
   panneau de bois sombre pour les commandes.
   ===================================================================== */
.sk-porte {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 16px 28px;
  overflow-y: auto;
}

.sk-porte .sk-home-title img {
  max-width: min(460px, 70vw);
}

.sk-porte-panneau {
  width: 100%;
  max-width: 340px;
  margin: auto auto 0;
  padding: 18px 18px 14px;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 236, 196, 0.05), rgba(0, 0, 0, 0.3)),
    rgba(18, 11, 6, 0.86);
  box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.3), 0 18px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}

.sk-porte-onglets {
  display: flex;
  margin: 0 0 16px;
  border-bottom: 1px solid rgba(184, 137, 53, 0.3);
}

.sk-porte-onglets button {
  flex: 1;
  padding: 8px 4px 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--sk-cream-3);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.sk-porte-onglets button[aria-selected='true'] {
  color: var(--sk-cream);
  border-bottom-color: var(--sk-brass);
}

.sk-porte .nickname-field {
  margin-bottom: 10px;
}

/* Le code en quatre cases, une par chiffre. Le vrai champ est posé dessus,
   transparent : c'est lui qui reçoit la frappe, le collage et
   l'autoremplissage ; les cases ne font que montrer où l'on en est. */
.sk-pin-libelle {
  display: block;
  margin: 0 0 7px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--sk-cream-3);
}

.sk-pin-cases {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.sk-pin-case {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 54px;
  border-radius: 2px;
  background: linear-gradient(180deg, #1a120b, #241a12);
  box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.3), inset 0 2px 5px rgba(0, 0, 0, 0.65);
  font-family: 'Bitter', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sk-brass-hi);
  transition: box-shadow 0.15s ease;
}

.sk-pin-case--pleine {
  box-shadow: inset 0 0 0 1px rgba(214, 170, 82, 0.6), inset 0 2px 5px rgba(0, 0, 0, 0.6);
}

.sk-pin-cases:focus-within .sk-pin-case--courante {
  box-shadow:
    inset 0 0 0 1px var(--sk-brass),
    inset 0 2px 5px rgba(0, 0, 0, 0.6),
    0 0 0 3px rgba(184, 137, 53, 0.28);
}

.nickname-field input.sk-pin-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  opacity: 0;
  cursor: text;
}

.sk-porte-aide {
  margin: -2px 0 14px;
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--sk-cream-2);
}

.sk-porte .btn-create {
  min-height: 54px;
  font-size: 1.05rem;
}

.sk-porte .error {
  margin: 8px 0 0;
}

.sk-porte .divider {
  margin: 12px auto 14px;
}

.sk-porte-invite {
  width: 100%;
  max-width: 300px;
}

.sk-porte-pied {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.sk-porte-pied .btn-rules-link {
  margin: 0;
  text-decoration: none;
}

/* --- Le classement ---------------------------------------------------- */
.sk-porte--classement .sk-porte-panneau {
  max-width: 520px;
  margin-top: 18px;
  margin-bottom: auto;
}

.sk-classement-titre {
  margin: 0 0 12px;
  font-size: 1rem;
}

.sk-classement {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Bitter', Georgia, serif;
  font-size: 0.86rem;
  color: var(--sk-cream);
}

.sk-classement th {
  padding: 0 6px 8px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sk-cream-3);
  text-align: right;
}

.sk-classement td {
  padding: 7px 6px;
  border-top: 1px solid rgba(184, 137, 53, 0.16);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sk-classement th:nth-child(2),
.sk-classement td:nth-child(2) {
  text-align: left;
  width: 100%;
}

.sk-classement td:first-child {
  color: var(--sk-cream-3);
}

.sk-classement td:nth-child(3) {
  font-weight: 700;
  color: var(--sk-brass-hi);
}

.sk-classement tr.sk-classement-moi td {
  background: rgba(184, 137, 53, 0.14);
}

.sk-classement-vide {
  margin: 8px 0;
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  color: var(--sk-cream-2);
}

@media (max-width: 420px) {
  .sk-compte {
    font-size: 0.6rem;
  }
  .sk-compte-plaque {
    gap: 7px;
    padding-left: 8px;
  }
  .sk-classement th:nth-child(5),
  .sk-classement td:nth-child(5) {
    display: none;
  }
}

/* --- La cote sur la ligne du salon ------------------------------------
   Juste après le pseudo, en chiffres de laiton : le pseudo se tronque
   avant elle, jamais l'inverse. */
.sk-lobby-elo {
  flex-shrink: 0;
  margin-left: 6px;
  padding: 0 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  font-family: 'Bitter', Georgia, serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--sk-brass-hi);
  text-shadow: none;
}

.lobby-list .sk-lobby-nom {
  min-width: 0;
}

/* --- La colonne Elo du registre agrandi -------------------------------
   Une septième colonne, à droite du score ; les six autres gardent leurs
   largeurs (voir .sk-grand-row dans skullking.css). */
.sk-grand-registre--elo .sk-grand-row {
  grid-template-columns: 2.3rem 34px minmax(0, 1fr) 4.5rem 2.9rem 3rem 3.6rem;
}

.sk-grand-elo {
  text-align: right;
  font-weight: 700;
  color: #7a5414;
}

.sk-grand-elo--sans {
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.85em;
  color: #6b4c1d;
}

/* --- La colonne Elo du récap de fin ----------------------------------- */
/* Six colonnes au lieu de cinq dans la même planche : les cellules se
   resserrent d'autant, sans quoi la colonne Elo sortait du cadre. */
.sk-end-table--elo th,
.sk-end-table--elo td {
  padding-left: 4px;
  padding-right: 4px;
}

/* La cote et, dessous, ce que la partie lui a fait : sur une seule ligne,
   la colonne poussait le tableau hors de sa planche. */
.sk-end-table td.sk-end-cote {
  text-align: right;
  white-space: nowrap;
  line-height: 1.1;
}

.sk-end-cote .sk-end-elo {
  display: block;
  font-size: 0.68em;
}

.sk-end-table th:last-child:not(:nth-child(5)) {
  text-align: right;
}

.sk-end-cote-val {
  font-family: 'Bitter', Georgia, serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sk-brass-hi);
}

.sk-end-cote-sans {
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: 0.85em;
  color: var(--sk-cream-3);
}

/* =====================================================================
   LE PROFIL — un cadre par-dessus la page (voir profil.js) : le pseudo, la
   cote, et la collection des pièces pour choisir celle qui représente le
   joueur.
   ===================================================================== */
.sk-profil-medaillon {
  display: inline-block;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  line-height: 0;
}

.sk-profil-medaillon img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}

/* La pièce du profil, dans la plaque du menu : partout où il paraît,
   salon et récap compris. */
.sk-compte .sk-compte-piece {
  width: 24px;
  height: 24px;
  margin: -2px -3px -2px -2px;
}

.sk-profil-fond {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 8, 10, 0.72);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}

.sk-profil-fond.hidden {
  display: none;
}

.sk-profil {
  position: relative;
  text-align: left;
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 18px 20px 20px;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 236, 196, 0.06), rgba(0, 0, 0, 0.3)),
    rgba(18, 11, 6, 0.97);
  box-shadow:
    inset 0 0 0 1px rgba(214, 170, 82, 0.5),
    0 22px 50px rgba(0, 0, 0, 0.7);
  color: var(--sk-cream);
  animation: sk-profil-entree 0.22s ease-out;
}

@keyframes sk-profil-entree {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-profil {
    animation: none;
  }
}

.sk-profil-fermer {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sk-cream-2);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.sk-profil-fermer:hover,
.sk-profil-fermer:focus-visible {
  color: var(--sk-cream);
}

.sk-profil-surtitre {
  margin: 0 0 12px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sk-brass);
}

/* La tête du profil, centrée : la pièce au-dessus du pseudo, le bouton
   « Changer de pièce » à côté d'elle (la pièce reste dans l'axe). */
.sk-profil-tete {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 0 6px;
}

.sk-profil-tete[hidden] {
  display: none;
}

.sk-profil-piece-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0 0 12px;
}

.sk-profil-portrait {
  grid-column: 2;
  line-height: 0;
}

.sk-profil-changer {
  grid-column: 3;
  justify-self: start;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}

.sk-profil-changer:disabled {
  opacity: 0.5;
  cursor: default;
}

.sk-profil-medaillon--grand {
  width: 96px;
  height: 96px;
}

.sk-profil-pseudo {
  max-width: 100%;
  margin: 0 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.3rem;
}

.sk-profil-cote {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin: 0 0 6px;
  padding: 2px 9px 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px rgba(214, 170, 82, 0.4);
  font-family: 'Bitter', Georgia, serif;
  color: var(--sk-brass-hi);
}

.sk-profil-cote b {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.sk-profil-cote small {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sk-brass);
}

.sk-profil-bilan {
  margin: 0;
  font-family: 'Spectral', Georgia, serif;
  font-size: 0.86rem;
  color: var(--sk-cream-2);
}

.sk-profil .sk-profil-erreur {
  text-align: center;
}

/* La collection, par-dessus le profil : son voile ne fait qu'assombrir un
   peu plus, le profil reste deviné dessous. */
.sk-collection-fond {
  z-index: 61;
  background: rgba(4, 8, 10, 0.45);
}

.sk-collection {
  max-width: 460px;
}

.sk-collection .sk-profil-erreur {
  text-align: left;
}

.sk-collection-titre {
  margin: 0 0 4px;
  padding-right: 32px;
  font-size: 1.05rem;
}

.sk-profil-titre {
  margin: 16px 0 2px;
  font-size: 0.9rem;
}

.sk-profil-aide {
  margin: 0 0 12px;
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--sk-cream-2);
}

.sk-profil-aide--pied {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--sk-cream-3);
}

.sk-profil-famille {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 14px 0 8px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sk-cream-2);
}

.sk-profil-famille small {
  font-family: 'Bitter', Georgia, serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--sk-cream-3);
}

.sk-profil-grille {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.sk-profil-case {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 6px 2px 5px;
  border: 0;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.18);
  color: var(--sk-cream-2);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

button.sk-profil-case:hover,
button.sk-profil-case:focus-visible {
  background: rgba(184, 137, 53, 0.14);
  box-shadow: inset 0 0 0 1px rgba(214, 170, 82, 0.55);
  outline: none;
}

.sk-profil-case .sk-profil-medaillon {
  width: 40px;
  height: 40px;
}

.sk-profil-case-nom {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Bitter', Georgia, serif;
  font-size: 0.6rem;
}

.sk-profil-case--portee {
  background: rgba(184, 137, 53, 0.22);
  box-shadow: inset 0 0 0 2px var(--sk-brass);
  color: var(--sk-cream);
  cursor: default;
}

.sk-profil-case--verrou {
  justify-content: center;
  min-height: 66px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(203, 177, 131, 0.35);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 1px rgba(184, 137, 53, 0.1);
  cursor: default;
}

.sk-profil-erreur {
  margin: 12px 0 0;
  font-family: 'Spectral', Georgia, serif;
  font-size: 0.86rem;
  color: #e09a90;
}

.sk-profil-erreur.hidden {
  display: none;
}

@media (max-width: 420px) {
  .sk-profil {
    padding: 16px 14px 16px;
  }
  .sk-profil-grille {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =====================================================================
   LE CLASSEMENT À TROIS CADRES — ses rivaux à gauche, le classement au
   milieu, la courbe de sa cote à droite. Sous 1180 px, le classement
   passe devant et les deux autres se rangent dessous ; sous 760 px, tout
   s'empile.
   ===================================================================== */
.sk-classement-scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 520px;
  margin: 18px auto auto;
}

.sk-classement-scene > .sk-porte-panneau,
.sk-classement-scene .sk-porte-panneau {
  max-width: none;
  margin: 0;
}

.sk-classement-panneau {
  order: -1;
}

@media (min-width: 760px) {
  .sk-classement-scene {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
  }
  .sk-classement-panneau {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1180px) {
  .sk-classement-scene {
    grid-template-columns: 300px minmax(0, 520px) 300px;
    max-width: 1168px;
    align-items: start;
  }
  .sk-classement-panneau {
    order: 0;
    grid-column: auto;
  }
}

.sk-classement-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.sk-classement-entete .sk-classement-titre {
  margin: 0;
}

.sk-classement-pirate {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sk-classement-pseudo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sk-classement .sk-classement-piece {
  width: 24px;
  height: 24px;
}

.sk-classement td:nth-child(2) {
  max-width: 0;
}

/* Un cadre encore vide (rivaux, courbe) : où l'on en est. */
.sk-rival-etat {
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: 0.84rem;
  color: var(--sk-cream-3);
}

/* --- Les « ? » à côté des titres ------------------------------------ */
.sk-titre-aide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
}

.sk-titre-aide--gauche {
  justify-content: flex-start;
  margin: 0;
}

.sk-titre-aide h2 {
  margin: 0;
}

.sk-aide {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 1px rgba(214, 170, 82, 0.55);
  color: var(--sk-brass-hi);
  font-family: 'Bitter', Georgia, serif;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 20px;
  cursor: pointer;
}

.sk-aide:hover,
.sk-aide:focus-visible,
.sk-aide[aria-expanded='true'] {
  background: rgba(184, 137, 53, 0.3);
  color: var(--sk-cream);
  outline: none;
}

.sk-aide-bulle {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 10;
  width: min(270px, calc(100vw - 48px));
  margin: 0;
  padding: 9px 12px 10px;
  border-radius: 3px;
  transform: translateX(-50%);
  background: rgba(10, 6, 3, 0.97);
  box-shadow: inset 0 0 0 1px rgba(214, 170, 82, 0.5), 0 10px 24px rgba(0, 0, 0, 0.6);
  font-family: 'Spectral', Georgia, serif;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  color: var(--sk-cream-2);
}

.sk-titre-aide--gauche .sk-aide-bulle {
  left: 0;
  transform: none;
}

.sk-aide-bulle[hidden] {
  display: none;
}

/* La bulle déborde de son cadre : celui-ci passe devant ses voisins tant
   qu'elle est ouverte (les cadres ont chacun leur contexte d'empilement). */
.sk-porte-panneau:has(.sk-aide[aria-expanded='true']) {
  position: relative;
  z-index: 5;
}

/* --- La courbe ----------------------------------------------------- */
.sk-cadre-courbe .sk-classement-titre {
  margin: 0;
}

.sk-rival-etat {
  margin: 0;
}

.sk-courbe {
  position: relative;
  color: var(--sk-brass-hi);
}

.sk-courbe-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
}

.sk-courbe-grille {
  stroke: rgba(184, 137, 53, 0.14);
  stroke-width: 1;
}

.sk-courbe-axe {
  fill: var(--sk-cream-3);
  font-family: 'Bitter', Georgia, serif;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.sk-courbe-trait {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sk-courbe-point {
  fill: currentColor;
  stroke: #120b06;
  stroke-width: 2;
}

.sk-courbe-regle {
  stroke: rgba(242, 214, 154, 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.sk-courbe-bulle {
  position: absolute;
  z-index: 1;
  transform: translate(10px, -50%);
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 4px;
  padding: 5px 8px 6px;
  border-radius: 3px;
  background: rgba(10, 6, 3, 0.95);
  box-shadow: inset 0 0 0 1px rgba(214, 170, 82, 0.45), 0 6px 14px rgba(0, 0, 0, 0.5);
  font-family: 'Bitter', Georgia, serif;
  font-size: 0.78rem;
  color: var(--sk-cream-2);
  white-space: nowrap;
  pointer-events: none;
}

.sk-courbe-bulle--gauche {
  transform: translate(calc(-100% - 10px), -50%);
}

.sk-courbe-bulle.hidden {
  display: none;
}

.sk-courbe-bulle b {
  color: var(--sk-cream);
  font-variant-numeric: tabular-nums;
}

.sk-courbe-bulle small {
  grid-column: 1 / -1;
  font-size: 0.68rem;
  color: var(--sk-cream-3);
}

.sk-courbe-bilan {
  margin: 8px 0 0;
  font-family: 'Spectral', Georgia, serif;
  font-size: 0.8rem;
  color: var(--sk-cream-2);
}

/* --- Les rivaux ---------------------------------------------------- */
.sk-classement-rivaux {
  display: grid;
  gap: 16px;
  align-content: start;
}

.sk-rival-titre {
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sk-cadre-rival--nemesis {
  box-shadow: inset 0 0 0 1px rgba(156, 42, 34, 0.55), 0 18px 40px rgba(0, 0, 0, 0.6);
}

.sk-cadre-rival--nemesis .sk-rival-titre {
  color: #e09a90;
}

.sk-rival-liste {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.sk-rival .sk-rival-piece {
  width: 38px;
  height: 38px;
}

.sk-cadre-rival--nemesis .sk-rival .sk-rival-piece {
  width: 46px;
  height: 46px;
}

.sk-rival-texte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}

.sk-rival-nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.9rem;
  color: var(--sk-cream);
}

.sk-rival-bilan {
  font-family: 'Bitter', Georgia, serif;
  font-size: 0.74rem;
  color: var(--sk-cream-2);
}

/* Le profil seul est court : un cadre plus étroit que la collection. */
.sk-profil:not(.sk-collection) {
  max-width: 360px;
}

/* LA COULEUR DE SA PIÈCE, dans la Collection : quatorze pastilles d'émail
   sur une rangée, celle du compte cerclée de laiton clair. Les motifs dessous se
   montrent dans cette couleur (voir profilHabiller). */
.sk-profil-couleurs {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 6px;
  justify-items: center;
  margin-bottom: 4px;
}

.sk-profil-couleur {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.35), transparent 55%), var(--sk-couleur);
  box-shadow: 0 0 0 2px #7a5a20, 0 0 0 3px rgba(16, 9, 3, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.sk-profil-couleur:hover,
.sk-profil-couleur:focus-visible {
  transform: scale(1.15);
  outline: none;
}

.sk-profil-couleur--portee {
  box-shadow:
    0 0 0 2px #e8ce92,
    0 0 0 4px rgba(16, 9, 3, 0.9),
    0 0 12px rgba(232, 206, 146, 0.7),
    inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}

@media (max-width: 520px) {
  .sk-profil-couleurs {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: 10px;
  }
}