/* ===== Reset simple ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #eaf0ff;
  background: radial-gradient(1200px 1200px at 50% -200px, #0f2a4a 0%, #071324 55%, #02060c 100%);
  overflow-x: hidden;
}

/* ===== Fond techno subtil ===== */
.bg-grid::before, .bg-grid::after, .bg-glow::before {
  content:"";
  position: fixed;
  pointer-events: none;
  inset: 0;
  z-index: -2;
}
.bg-grid::before {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
  mix-blend-mode: overlay;
  opacity: .25;
}
.bg-grid::after {
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.9) 100%);
}
.bg-glow::before {
  z-index: -1;
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(43,82,54,.35), transparent 70%),
    radial-gradient(500px 160px at 10% 20%, rgba(0,160,255,.15), transparent 70%),
    radial-gradient(500px 160px at 90% 30%, rgba(140,255,200,.12), transparent 70%);
  filter: blur(20px);
}

/* ===== Container principal ===== */
.scoreboard {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2.2vmin, 16px);
  max-width: 1100px;
  width: 92%;
  margin: clamp(8px, 2vmin, 18px) auto;
  padding: clamp(8px, 2vmin, 16px);
  border-radius: 18px;
  background: #fff;
  backdrop-filter: blur(8px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 40px rgba(0,0,0,.35),
    0 0 0 1px rgba(100,200,160,.06);
  position: relative;
}

/* Liseré néon autour */
.scoreboard::after {
  content:"";
  position: absolute; inset: -1px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(43,82,54,.65), rgba(18,42,71,.65));
  filter: blur(18px);
  opacity: .35;
  z-index: -1;
}

/* ===== Top bar ===== */
.top-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(8px, 1.6vmin, 14px) clamp(10px, 2vmin, 18px);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.08));
  border: 1px solid rgba(140,255,200,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-weight: 700; letter-spacing: .02em;
  background: rgba(43,82,54,.22);
  border: 1px solid rgba(43,82,54,.6);
  box-shadow: 0 0 12px rgba(43,82,54,.25) inset, 0 6px 16px rgba(0,0,0,.25);
}
.chip-court { color: #dfffe9; }

.brand { display:flex; align-items:center; gap: 10px; user-select:none; }
.brand-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg,#86ffb1,#00c781);
  box-shadow: 0 0 10px #86ffb1, 0 0 20px rgba(134,255,177,.6);
}
.brand-text { font-weight: 800; letter-spacing: .08em; color:#dfffe9; }

/* ===== Bandeau type de match ===== */
.match-type {
  text-align: center;
  padding: clamp(6px, 1.2vmin, 10px);
  border-radius: 12px;
  font-weight: 700;
  color: #0b182c;
  background: linear-gradient(180deg, #e7fff3, #c6f7e0);
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

/* ===== Ligne joueur ===== */
.player-row {
  display: grid;
  grid-template-columns: 1.4fr 2.2fr .6fr .6fr;
  gap: clamp(6px, 1.6vmin, 12px);
  align-items: stretch;
  background: linear-gradient(180deg, rgba(12,18,34,.9), rgba(12,18,34,.6));
  border: 1px solid rgba(255,255,255,.06);
  padding: clamp(6px, 1.6vmin, 12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 26px rgba(0,0,0,.28);
}

.player-name {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.name-clip { overflow: hidden; }
.name-text {
  font-weight: 800;
  font-size: clamp(16px, 2.6vmin, 28px);
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
  letter-spacing: .02em;
}

/* Serveur (dot qui pulse) */
.server-icon {
  width: clamp(10px, 1.6vmin, 14px);
  height: clamp(10px, 1.6vmin, 14px);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff898 0%, #ffe600 55%, #c4a300 100%);
  box-shadow: 0 0 8px #ffe600, 0 0 18px rgba(255,230,0,.55);
  visibility: hidden;
  transform: translateZ(0);
}
.server-icon.pulse { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px #ffe600, 0 0 18px rgba(255,230,0,.55); }
  50% { transform: scale(1.25); box-shadow: 0 0 14px #ffe600, 0 0 28px rgba(255,230,0,.75); }
}

/* Historique des sets */
.sets-box {
  display: flex; align-items: center; justify-content: end;
  gap: clamp(6px, 1.4vmin, 12px);
  min-width: 0;
  padding: 4px 0;
}
.set {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; 
  height: 100%;
  padding: 0 4px;
  border-radius: 10px;
  font-weight: 800; 
  font-size: 20px;
  color: #e8f1ff;
}
.tie-break-score {
  position: absolute; top: -0.55em; right: .5em;
  font-size: .65em; color: #bde7ff; opacity:.95; font-weight: 700;
  text-shadow: 0 0 6px rgba(120,200,255,.5);
}
.chrono-set {
  position: absolute; bottom: -1.35em; left: 50%; transform: translateX(-50%);
  font-size: .7em; color: #cfe9ff; background: rgba(0,0,0,.55);
  padding: 1px 6px; border-radius: 6px; letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.08);
}

/* Blocs JEUX / PTS */
.game-box, .point-box {
  position: relative;
  display: grid; align-items: center; justify-items: center;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(25,60,44,.95), rgba(25,60,44,.75));
  border: 1px solid rgba(80,180,120,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 16px rgba(0,0,0,.25);
}
.point-box {
  background: linear-gradient(180deg, rgba(230,238,255,.98), rgba(214,228,255,.96));
  border: 1px solid rgba(180,200,240,.5);
  color: #0b1526;
}
.box-label {
  font-size: clamp(10px, 1.5vmin, 12px);
  opacity: .75; font-weight: 800; letter-spacing: .12em;
  padding-top: 6px;
}
.box-value {
  font-size: clamp(18px, 3.6vmin, 34px);
  font-weight: 900;
  line-height: 1.1;
  padding: 6px 0 10px;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* Séparateur entre les joueurs */
.divider {
  height: 10px;
  margin: 4px 0 0;
  background: linear-gradient(90deg, transparent, rgba(120,200,160,.25), transparent);
  filter: blur(.2px);
  opacity: .65;
  border-radius: 999px;
}

/* ===== Overlays vidéo (mêmes IDs, styles modernes) ===== */
.overlay-video {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  display: none; justify-content: center; align-items: center;
  z-index: 12; overflow: hidden; opacity: 0;
  transition: opacity .45s ease;
  backdrop-filter: blur(2px);
}
.overlay-video.show { display:flex; opacity: 1; }
.overlay-video video {
  max-width: min(1100px, 96vw);
  max-height: 92vh;
  width: 100%; height: 100%;
  object-fit: contain;
  transform: scale(.985);
  opacity: 0;
  transition: transform .55s ease, opacity .55s ease;
}
.overlay-video.show video { transform: scale(1); opacity: 1; }

/* ===== Twitch ===== */
.twitch-container {
  max-width: 1100px; width: 92%;
  aspect-ratio: 16 / 9;
  margin: 8px auto 0;
  background: #000; overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(50,120,85,.4);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.twitch-container iframe { width: 100%; height: 100%; display:block; }

.twitch-toggle { max-width: 1100px; width: 92%; margin: 8px auto 16px; text-align: center; }
.btn-neo {
  appearance: none;
  background: linear-gradient(180deg, #2b5236, #1f3c29);
  color: #eafff3;
  padding: 8px 18px;
  border: 1px solid rgba(90,200,140,.35);
  border-radius: 10px;
  font-weight: 800; letter-spacing: .02em;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .2s ease;
  box-shadow: 0 10px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
}
.btn-neo:hover { box-shadow: 0 12px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }
.btn-neo:active { transform: translateY(1px) scale(.995); }

/* ===== Responsif léger ===== */
@media (max-width: 640px) {
  .player-row {
    grid-template-columns: 1.3fr 2fr .7fr .7fr;
  }
  .box-value { font-size: clamp(18px, 4.4vmin, 30px); }
}