/* ========= Base ========= */
:root{
  --bg:#1d2d50; --panel:#2e3b5e; --accent:#2b5236; --muted:#bcd0ff;
  --text:#ffffff; --warning:#e74c3c; --gold:#f7c331;
  --sb-bg:#0b1220; --sb-panel:#121a2b; --sb-text:#e9eef7; --sb-sub:#9fb3d9;
  --sb-accent:#33d17a; --sb-serve:#ffd166; --sb-sep:#23304b; --sb-lose:#8896b3;
  --radius:14px; --pad:14px;
  --font: system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }

body{
  font-family: var(--font);
  background-color: var(--bg);
  color: var(--text);
  margin: 20px;
  padding: 0 10px;
}

h1{
  text-align:center; font-size:1.4em; margin-bottom:15px; color:var(--gold);
}

form{ max-width:700px; margin:auto; }

/* ========= Noms / Setup ========= */
.names{
  display:flex; flex-direction:column; gap:10px; margin-bottom:20px; width:100%;
}
.names input{
  font-size:1.1rem; padding:10px; text-align:center; border-radius:6px; border:1px solid #444; background:#0f1a36; color:#fff;
}
.names button{
  font-size:1.1rem; padding:10px; background-color:var(--accent); border:none; color:white; border-radius:8px; width:100%;
}

/* ========= Server ========= */
.server-box{
  background:#2b3a5d; padding:12px; border-radius:8px; margin-bottom:20px; width:100%;
}
.server-box label{ display:block; margin:8px 0; font-size:.95em; }
.server-box button{
  margin-top:10px; width:100%; padding:10px; background-color:var(--accent);
  border:none; color:white; border-radius:6px;
}
.server-status{ margin-top:8px; color:#00ff00; font-weight:700; font-size:.9em; }

/* ========= Scoreboard ========= */
.scoreboard{
  width:100%; background:var(--sb-panel); border-radius:var(--radius);
  box-shadow:0 12px 30px rgba(0,0,0,.2); overflow:hidden; border:1px solid var(--sb-sep);
  margin:12px auto; color:var(--sb-text); font-family:var(--font); max-width:700px;
}
.sb-grid{ display:grid; grid-template-columns: 1fr repeat(3, minmax(46px,64px)) minmax(56px,80px) minmax(56px,80px); }
.sb-colhead{ display:contents; }
.sb-colhead>div{
  padding:10px 8px; text-align:center; color:var(--sb-sub); font-size:.85rem; font-weight:600; border-bottom:1px solid var(--sb-sep);
}
.sb-colhead .h-name{ text-align:left; padding-left:16px; }
.player{ display:contents; }
.cell{
  padding:12px 8px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--sb-sep);
  font-variant-numeric:tabular-nums;
}
.cell.name{ justify-content:flex-start; gap:8px; padding-left:16px; font-weight:600; }
.flag{ width:18px; height:12px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.15) inset; background:#ccc; flex:none; }
/* Container */
.server-dot {
  display: inline-block;
  width: 20px;
  height: 20px;
  opacity: 0; /* par défaut invisible */
  margin-right: 6px;
}

/* L'image de la balle */
.server-dot img {
  width: 100%;
  height: 100%;
}

/* Quand actif, la balle s’affiche et tourne */
.server-dot.active {
  opacity: 1 !important;
}

.server-dot.active img {
  animation: spin 5s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.name .tag{ font-size:.8rem; color:var(--sb-sub); font-weight:500; margin-left:6px; }
.win{ color:var(--sb-accent); font-weight:700; }
.lose{ color:var(--sb-lose); }
.tiebreak{ font-size:.8rem; color:var(--sb-sub); }
.set,.games,.points{ font-size:1.1rem; font-weight:700; }
.games{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.04));
  border-radius:8px; padding:6px 8px; min-width:48px;
}
.points{
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));
  color:#0b1220; border-radius:8px; padding:6px 8px; min-width:48px;
}
.inplay{ position:relative; }

/* ===== Balle neuve + bouton stats ===== */
.sb-balls{
  padding:10px 16px; border-top:1px solid var(--sb-sep);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.balls-note{ color:var(--sb-sub); font-size:.9rem; }
.balls-note.now{ color:var(--sb-accent); font-weight:800; }
.btn-stats{
  border:1px solid var(--sb-sep); background:transparent; color:var(--sb-text);
  border-radius:8px; padding:6px 10px; font:inherit; cursor:pointer; white-space:nowrap;
}
.btn-stats:hover{ background:rgba(255,255,255,.06); }

/* ===== Panneau stats intégré ===== */
.stats-panel{
  display:none; background:var(--sb-bg); border:1px solid var(--sb-sep); border-radius:12px;
  margin:10px auto 0; overflow:hidden; max-width:700px;
}
.stats-panel iframe{ width:100%; height:520px; border:0; background:var(--sb-bg); }

/* ========= Boutons (système unifié) ========= */
.btn-base{
  display:block;
  width:100%;
  font-size:1.1rem;
  padding:12px 0;
  border:none;
  border-radius:8px;
  cursor:pointer;
  text-align:center;
  min-height:44px;
  transition:filter .12s ease, transform .06s ease, background-color .12s ease;
}

.btn-base:hover{ filter:brightness(1.06); }
.btn-base:active{ transform:scale(.98); }
.btn-base:focus-visible{ outline:2px solid #ffd166; outline-offset:3px; }

/* Variantes couleur */
.btn-dark {
    background: #000;
    color: #fff;
    height: 100px;
}
.btn-dark:hover{ background:#111; }
.btn-green{ background:var(--accent); color:#fff; }
.btn-green:hover{ background:#3e6f4c; }

.btn-undo{ background:#b12a2a; color:#fff; }
.btn-undo:hover{ background:#c0392b; }

/* ===== Conteneurs de boutons ===== */
.score-box.players-50{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  max-width:700px;
  margin:12px auto;
}
.player-card{
  flex: 0 0 calc(50% - 10px);
}
.player-card h2{ margin:0; }

.stats-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  margin:15px auto 0;
  max-width:700px;
  height: 100px;
}
.stats-actions > .btn-base{
  flex: 0 0 calc(50% - 10px);
}


/* ========= Top bar / menu ========= */
.top-buttons-container{ width:100%; max-width:700px; margin:0 auto 20px; }
.top-buttons{
  display:flex; align-items:center; justify-content:space-between; width:100%;
}
.col-50{ flex:0 0 50%; display:flex; justify-content:flex-start; }
.col-right{ flex:0 0 50%; display:flex; justify-content:flex-end; gap:8px; position:relative; }

.menu-button{
  background:#1d2d50; color:#fff; border:1px solid #444; padding:8px 12px; border-radius:6px; font-size:1rem; cursor:pointer;
}
.col-right .chrono-button{ background:#fff; color:#000; }
.col-right .menu-small-button{ }

.menu-dropdown{
  display:none; position:absolute; right:0; top:40px; background:#fff; color:#000;
  border:1px solid #ccc; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.2); padding:10px; min-width:180px; z-index:1000;
}
.menu-dropdown button{
  display:block; width:100%; background:var(--accent); color:#fff; border:none; padding:8px 10px; margin:5px 0; border-radius:4px; text-align:left; cursor:pointer;
}
.menu-dropdown .reset-btn{ background:#b12a2a; }

/* ========= Chronos ========= */
.chronos-container{
  width:100%; max-width:700px; margin:0 auto 20px; background-color:#111; color:white; padding:10px; border-radius:8px; font-size:1rem;
}
.chronos-header{ font-weight:700; margin-bottom:10px; text-align:center; color:var(--gold); }
.chronos-item{ display:flex; justify-content:space-between; align-items:center; margin:5px 0; }
.chronos-item button{
  background-color:var(--accent); border:none; color:white; padding:4px 8px; border-radius:4px; cursor:pointer;
}
.col-right .chrono-button {
    background: #fff;
    flex: 1 1 25%;
    color: #000;
}
.top-buttons #menu-toggle {
    background-color: #000;
    color: white;
    border: none;
    flex: 1 1 25%;
}
/* ========= Responsive ========= */
@media (max-width:768px){
  /* Laisse vide pour ces blocs, on reste en 50/50 */
}


/* ======== TOP BAR (retour / chrono / menu) ======== */
.top-buttons-container{
  width:100%;
  max-width:700px;
  margin:0 auto 20px;
  font-family: var(--font, system-ui, -apple-system, Segoe UI, Roboto, Arial);
}
.top-buttons{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:12px;
}
.col-50{
  flex:0 0 50%;
  display:flex;
  justify-content:flex-start;
}
.col-right{
  flex:0 0 50%;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  position:relative;
}

/* Bouton retour (rouge) */
#btn-undo, 
.btn-undo{
    background: #b12a2a;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    flex: 1 1 calc(33.333% - 10px);
}
#btn-undo:hover{ background:#c0392b; }

/* Boutons de menu/chrono */
.menu-button{
  background:#1d2d50;
  color:#fff;
  border:1px solid #444;
  padding:8px 12px;
  border-radius:6px;
  font-size:1rem;
  cursor:pointer;
}
.chrono-button{ background:#fff; color:#000; border-color:#ddd; }
.menu-small-button{}

/* Menu déroulant */
.menu-dropdown{
  display:none;                 /* sera togglé en JS */
  position:absolute;
  right:0;
  top:40px;
  background:#fff;
  color:#000;
  border:1px solid #ccc;
  border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  padding:10px;
  min-width:200px;
  z-index:1000;
}
.menu-dropdown button{
  display:block;
  width:100%;
  background:#2b5236; /* vert */
  color:#fff;
  border:none;
  padding:10px 12px;
  margin:6px 0;
  border-radius:6px;
  text-align:left;
  cursor:pointer;
}
.menu-dropdown .reset-btn{
  background:#b12a2a; /* rouge */
}

/* ======== FORM NAMES (match-setup-fields) ======== */
.names{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 auto 20px;
  width:100%;
  max-width:700px;
}
.names input {
    font-size: 1.1rem;
    padding: 10px;
    text-align: center;
    border-radius: 6px;
    border: 1px solid #444;
    background: #ffffff;
    color: #000000fa;
}
.names button{
  font-size:1.1rem;
  padding:10px;
  background-color:#2b5236;
  border:none;
  color:white;
  border-radius:8px;
  width:100%;
  cursor:pointer;
}
.names button:hover{ filter:brightness(1.06); }

/* ======== Responsive ======== */
@media (max-width:768px){
  .col-right .chrono-button{ flex:0 0 50%; }
  .col-right .menu-small-button{ flex:0 0 40%; }
  #btn-undo{ width:auto; }
}


/* ===== Chrono (panneau montre) ===== */
/* ===== Chronos ========= */
.chronos-container{
  width:100%;
  max-width:700px;
  margin:0 auto 20px;            /* <-- centre horizontalement */
  background-color:#111;
  color:white;
  padding:10px;
  border-radius:8px;
  font-size:1rem;
}

/* Chrono (panneau montre) */
#chronos-container.chronos-container{
  background: var(--panel, #2e3b5e);
  border-radius: var(--radius, 14px);
  padding: var(--pad, 14px);
  margin: 12px auto 0;           /* <-- corrige : remet auto pour centrer */
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.06);
}

#chronos-container .chronos-header{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--muted, #bcd0ff);
  margin-bottom: 10px;
  text-align: center;            /* déjà centré, on garde */
}

#chronos-container .chronos-list{
  display: flex;
  align-items: center;
  justify-content: center;       /* <-- centre le chrono + bouton */
  gap: 12px;
  flex-wrap: wrap;
}

#chrono-display{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(24px, 4.5vw, 36px);
  font-weight: 800;
  letter-spacing: 1px;
  padding: 8px 14px;
  background: rgba(0,0,0,.12);
  border-radius: 12px;
  min-width: 120px;
  text-align: center;            /* chrono centré */
}


/* Bouton de menu existant, petite cohérence visuelle */
.menu-button.chrono-button{
  border: 1px solid rgba(255,255,255,.12);
}

/* ===== FIX RESPONSIVE SCOREBOARD (noms longs / colonnes Pts visibles) ===== */

/* La colonne "Joueur" peut se compresser au max sans pousser Pts hors écran */
.scoreboard .sb-grid{
  grid-template-columns:
    minmax(0, 1fr)                  /* Joueur (shrink) */
    repeat(3, minmax(42px, 54px))   /* S1 S2 S3 */
    minmax(50px, 64px)              /* Jeux */
    minmax(56px, 72px);             /* Pts */
  min-width: 0;
}

/* Le nom est dans un flex + ellipsis */
.cell.name{
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 10px;
}

/* Les éléments fixes (balle serveur / drapeau) ne prennent pas d'espace élastique */
.cell.name .server-dot,
.cell.name .flag{ flex: 0 0 auto; }

/* Nom joueur : plus d'ellipsis, retour à la ligne autorisé */
.cell.name [id$="_nameA_lbl"],
.cell.name [id$="_nameB_lbl"]{
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;           /* ⬅ autorise le retour à la ligne */
  word-break: break-word;        /* casse sur très longues séquences */
  hyphens: auto;                 /* césure propre si dispo */
  line-height: 1.15;

  /* Taille qui s’adapte mais reste lisible */
  font-size: clamp(0.82rem, 2.8vw, 1.1rem);
}

/* Le tag reste compact */
.cell.name .tag{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Ajustements esthétiques des cellules de points/jeux */
.games, .points{
  min-width: 48px;
}

/* Mobile : on serre un peu plus, on autorise 2 lignes max pour éviter que ça ne devienne trop haut */
@media (max-width: 480px){
  .scoreboard .sb-grid{
    grid-template-columns:
      minmax(0, 1fr)
      repeat(3, minmax(34px, 42px))
      minmax(40px, 56px)
      minmax(44px, 56px);
  }

  .cell.name [id$="_nameA_lbl"],
  .cell.name [id$="_nameB_lbl"]{
    font-size: clamp(0.78rem, 3.4vw, 1rem);
    display: -webkit-box;           /* ⬇ limite à 2 lignes pour garder une hauteur raisonnable */
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;               /* masque uniquement l’excédent au-delà de 2 lignes */
  }

  /* On gagne quelques pixels à gauche */
  .server-dot{ width:16px; height:16px; }
  .cell{ padding: 8px 6px; }
}

/* Extra-petit : si tu veux prioriser 100% la lisibilité du nom, on masque le tag et on rétrécit encore la balle */
@media (max-width: 360px){
  .cell.name .tag{ display:none; }
  .server-dot{ width:14px; height:14px; }
}

/* Évite les zooms intempestifs sur tap : Safari/Chrome mobiles */
html, body {
  touch-action: manipulation;        /* bloque le double-tap-zoom moderne */
  -webkit-text-size-adjust: 100%;    /* évite les zooms auto par "ajustement de texte" */
}

/* Assure-toi que les éléments interactifs ont au moins 16px de font-size */
button, a, input, select, textarea {
  font-size: 16px; /* iOS ne déclenche plus de zoom à ce seuil */
}