:root{
  --bg:#0f172a; --card:#111827; --muted:#334155; --text:#e5e7eb;
  --acc:#22d3ee; --warn:#f59e0b; --ok:#10b981; --err:#ef4444;
}

/* base + lisibilité */
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  font-size:18px;            /* +grand */
  line-height:1.6;           /* +espacement des lignes */
  -webkit-text-size-adjust:100%;
}

a{color:var(--acc);text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:32px} /* +large +padding */
.grid{display:grid;gap:20px}
@media(min-width:900px){.grid-2{grid-template-columns:1.1fr .9fr}}

.card{
  background:var(--card);
  border:1px solid #1f2937;
  border-radius:18px;        /* +rayon */
  padding:20px;              /* +padding */
}

.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row > *{flex:1}

.badge{
  display:inline-block;
  padding:6px 10px;          /* +padding */
  border-radius:999px;
  background:#1f2937;color:#cbd5e1;border:1px solid #243044;
  font-size:0.9rem;          /* ~16px */
  line-height:1.2;
}

.btn{
  background:var(--acc);border:0;color:#042033;
  padding:14px 18px;         /* +touch target */
  border-radius:12px;
  font-weight:700;cursor:pointer;
  font-size:1rem;            /* ~18px */
  line-height:1;
  min-height:44px;           /* accessibilité */
}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-outline{background:transparent;color:var(--acc);border:1.5px solid var(--acc)}
.btn-danger{background:var(--err);color:#fff}

.input,select{
  width:100%;
  padding:14px 16px;         /* +grand */
  border-radius:12px;
  border:1px solid #263241;
  background:#0b1220;color:#e5e7eb;
  outline:none;
  font-size:1rem;            /* ~18px */
  min-height:48px;           /* accessibilité */
}

/* titres plus gros */
h1{font-size:2.1rem; margin:0 0 10px}  /* ~38px */
h2{font-size:1.6rem; margin:0 0 10px}  /* ~29px */

.muted{color:#94a3b8}
.ok{color:var(--ok)} .warn{color:var(--warn)} .err{color:var(--err)}

.divider{height:1px;background:#1f2736;margin:14px 0}
.list{display:grid;gap:10px}

.pill{
  padding:8px 12px;          /* +grand */
  border-radius:14px;
  background:#0b1220;border:1px solid #223049;
  font-size:0.95rem;         /* ~17px */
  color:#cbd5e1;
}

.kpi{display:flex;gap:18px;flex-wrap:wrap}
.kpi .box{
  flex:1;min-width:180px;    /* +large */
  background:#0b1220;border:1px solid #223049;
  border-radius:14px;padding:14px;
  font-size:1rem;
}

.table{width:100%;border-collapse:collapse;font-size:1rem}
.table th,.table td{padding:12px;border-bottom:1px solid #1f2736;text-align:left}
.right{text-align:right}
.center{text-align:center}
.lang{float:right}

.small{font-size:0.95rem}    /* ~17-18px au lieu de 12px */

.banner{
  padding:12px;border-radius:14px;
  background:#0b1220;border:1px dashed #223049;margin:10px 0;
  font-size:1rem;
}

/* un poil plus gros sur grands écrans */
@media (min-width:1200px){
  html{font-size:19px;}
  .wrap{padding:36px}
}

/* Desktop : identifier 2x plus large que password */
@media (min-width: 900px){
  #identifier.input{ flex: 2 1 520px; }  /* plus long */
  #password.input{  flex: 1 1 260px; max-width: 320px; } /* plus court */
  #btnLogin{        flex: 0 0 200px; }  /* bouton taille fixe (optionnel) */
}

/* Mobile : tout prend la largeur */
@media (max-width: 899px){
  #identifier.input,
  #password.input{ flex: 1 0 100%; max-width: none; }
}

#listMsg.ok   { color: var(--ok); }
#listMsg.err  { color: var(--err); }
#listMsg.warn { color: var(--warn); }
#listMsg.muted{ color: var(--text); opacity:.75; }

.th-ico{
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  fill: currentColor;
  opacity: .9;
}
.th-ico-ok   { color: var(--ok); }   /* vert */
.th-ico-draw { color: var(--warn); } /* ambre/égal */
.th-ico-loss { color: var(--err); }  /* rouge */

.flag{ display:inline-block; margin-right:6px; line-height:1; }

/* === Cellule joueur: stop aux compressions de glyphes === */
#standingsTbl .player-cell{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  vertical-align:middle;

  /* Neutralise tout héritage “agressif” */
  letter-spacing: 0 !important;
  font-stretch: normal !important;
  font-kerning: auto !important;
  font-feature-settings: normal !important;
  text-rendering: auto !important;
  line-height: 1.2;
}

/* Le nom s’ellipsera proprement et garde un espacement neutre */
#standingsTbl .player-name{
  flex:1 1 auto;
  min-width:0;                /* indispensable pour l’ellipsis en flex */
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing: 0 !important;
}

/* Le rank ne wrap jamais */
#standingsTbl .player-rank{
  flex:0 0 auto;
  white-space:nowrap;
  opacity:.8;
}

/* Isole le drapeau dans une police emoji dédiée (évite d’impacter le kerning du nom) */
#standingsTbl .flag{
  flex:0 0 auto;
  display:inline-block;
  line-height:1;
  font-size:1rem;
  font-family: "Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", emoji, sans-serif !important;
  unicode-bidi: isolate;
  isolation: isolate;
}

.title-one-line{
  white-space: nowrap;       /* ne pas aller à la ligne */
  overflow: hidden;          /* cache le surplus */
  text-overflow: ellipsis;   /* … à la fin si ça dépasse */
}

.title-one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-full {
  display: block;
  width: 100%;
  white-space: pre-wrap;        /* respecte \n et autorise le wrap */
  overflow-wrap: anywhere;      /* casse les longs mots si besoin */
  word-break: normal;
  text-overflow: clip;          /* pas d’ellipsis */
}