:root{
  --bg:#0b1220;
  --card:rgba(255,255,255,.06);
  --court:#222222;
  --court2:#0a5a8a;
  --line:rgba(255,255,255,.85);
  --net:rgba(255,255,255,.35);
  --text:#e9f0ff;
  --muted:rgba(233,240,255,.7);
  --shadow: 0 12px 28px rgba(0,0,0,.35);
  --radius: 18px;
}

body {
  background: radial-gradient(1200px 700px at 20% -10%, #19325a 0%, transparent 60%),
radial-gradient(900px 600px at 90% 0%, #0e5b4d 0%, transparent 55%),
var(--bg);
}
.courtsGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.courtsGrid{grid-template-columns:1fr}}

.container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 12px 30px 60px 30px;
}
.container h2 {
  text-align: center;
}
.grid-2-col h2 {
  text-align: left;
}
.courtCard{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
#rankingZone, #roundZone {
  margin-bottom: 50px;
}
.courtHeader{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;
  background: rgba(0,0,0,.18);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.courtHeader .name{font-weight:800;letter-spacing:.2px}
.courtHeader .meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12px}

.court{
  position:relative;height:255px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 45%),
    var(--court);
}
.court.isBlue{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 45%),
    var(--court2);
}
.court::before{
  content:"";position:absolute;inset:14px;
  border:3px solid var(--line);
  border-radius:0px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}
.line.net{position:absolute;left:18%;right:18%;top:50%;border-top: 2px solid rgba(255,255,255,.25);transform:translateY(-50%)}
.line.serviceV{position:absolute;top:18px;bottom:18px;left:50%;border-left: 3px dashed rgba(255,255,255,1);transform: translateX(-50%);}
.line.serviceH{
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 20%;
  border-left: 2px solid rgba(255,255,255,.25);
  transform: translateX(-50%);
}
.line.serviceH.b{
  left: 80%;
}

.side{position:absolute;width:50%;height:100%;top:0;padding:16px 14px;display:flex;flex-direction:column;justify-content:space-between}
.side.a{left:0}
.side.b{right:0;text-align:right}
body {
  min-height: 100vh;
}
.teamTag{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:900;letter-spacing:.4px;text-transform:uppercase;font-size:10px;opacity:.95;
  padding: 10px 15px 0px 15px;
  color:#ffffff;
}
.teamTag .dot{display: none;}
.players{
  display: flex;
  flex-direction: column;
  gap: 30px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: #fff;
  padding: 0px 5px;
  height: calc(100% - 43px);
  align-items: center;
  justify-content: center;
}
.courtCard .players > div{
  white-space: pre-line;
}
.players div {
  background-color: rgb(0,0,0,.3);
  width:fit-content;
  padding: 5px 10px;
  border-radius: 20px;
  margin: 0 auto;
  text-align: center;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,.3);
}
.scorePill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.40);
  border: 1px solid rgba(255,255,255,.4);
  font-weight: 900;
  font-size: 14px;
  width: 89px;
  backdrop-filter: blur(5px);
  margin: 0 auto -2px;
  justify-content: center;
}
.live .scorePill{
  width: 70px;
}
.scoreInput{
  width:64px;text-align:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.22);
  color:var(--text);
  padding:8px 10px;
  font-weight:900;
}
.courtFooter{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;
  background:rgba(0,0,0,.14);
  border-top:1px solid rgba(255,255,255,.10);
}
.hint{
  font-size: 12px;
  text-align: center;
  width: 100%;
}

/* TV MODE */
body.tv-mode{
  background:#050a14 !important;
  color: var(--text);
}
body.tv-mode .tvBar{
  position: sticky;
  top: 0;
  z-index: 10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 18px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
body.tv-mode .tvTitle{display:flex;flex-direction:column;gap:4px}
body.tv-mode .tvTitle h1{margin:0;font-size:28px;letter-spacing:.3px}
body.tv-mode .tvTitle .sub{color:var(--muted);font-size:16px}
body.tv-mode .scorePill {
  margin:0px auto -10px;
}
body.tv-mode .tvRight{display:flex;align-items:center;gap:10px;font-size:30px;margin-right:10px;:var(--muted)}
.btnTv{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: var(--text);
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
}
.btnTv:hover{ background: rgba(255,255,255,.14); }

body.tv-mode .wrapTv{
  max-width: 75%;
  margin: 0;
  padding:30px 30px 30px 30px;
}
#qr-code-section {
  position: relative;
  margin:0 auto;
  width: fit-content;
  text-align: center;
}
body.tv-mode #qr-code-section {
  position: fixed;
  right: 30px;
  top: 110px;
  width: calc(20% - 30px);
}
body.tv-mode #qr-code-section img {
  width: 100%;
}
body.tv-mode .courtsGrid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
@media (max-width:1200px){ body.tv-mode .courtsGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:900px){ body.tv-mode .courtsGrid{ grid-template-columns: 1fr; } }
body.tv-mode .courtHeader .name{ font-size:16px;width: 100%;text-align: center; }
body.tv-mode .courtHeader .meta{ display: none; }
body.tv-mode .players{ font-size:1.7vh; line-height: 1.7vh; gap:12px; }
body.tv-mode .scorePill{ font-size:22px; padding:10px 14px; }
body.tv-mode .court{ height:25vh; }
body.tv-mode .container {
  padding: 0px;
  max-width: 100%;
}
body.tv-mode #titleBar, body.tv-mode #roundZone h2, #btnViewCourts, #btnViewRanking, #btnRotate, #btnContrast { display:none; }
body.tv-mode .players {
  margin-top: 0;
  gap: 3.6vh;
  height: calc(100% - 40px);;
  align-items: center;
  justify-content: center;
}

/* High contrast toggle */
body.tv-contrast{
  --card: rgba(255,255,255,.10);
  --muted: rgba(255,255,255,.88);
  --net: rgba(255,255,255,.55);
}
body.tv-contrast .courtHeader{ background: rgba(0,0,0,.65); }
body.tv-contrast .court::before{ border-color: rgba(255,255,255,.95); }
body.tv-contrast .line.serviceV,
body.tv-contrast .line.serviceH{ border-color: rgba(255,255,255,.75); }

/* Zoom overlay */
#zoomOverlay{
  position:fixed;
  inset:0;
  z-index:9999;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(5px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
#zoomOverlay .zoomWrap{ width:min(1100px,96vw); }
#zoomOverlay .zoomTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  color: var(--text);
}
#zoomOverlay .zoomTop .zTitle{ font-size:18px; font-weight:900; }
body.tv-mode #zoomOverlay .zoomTop .zTitle{ font-size:22px; }

@media screen and (max-width:768px) {
  .live .container {
    padding: 12px 10px 60px 10px;
  }
  .live header {
    padding: 30px 10px 0px 10px;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
  }
  #qr-code-section {
    max-width: 110px;
    font-size: 12px;
    padding:15px 0px;
  }
  #qr-code-section img {
    width: 100%;
  }
}

.tabs {
    max-width: 1400px;
    margin: 0 auto 50px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    overflow: hidden;
  }

  /* Radios cachés */
  .tabs input {
    display: none;
  }

  .tabs .content input {
    display: block;
  }

  /* Labels = boutons */
  .tab-labels {
    display: flex;
  }

  .tab-labels label {
    flex: 1;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    transition: .3s all;
  }

  .tab-labels label:hover {
    background: #104B44;
  }

  /* Onglet actif */
  #tab1:checked ~ .tab-labels label[for="tab1"],
  #tab2:checked ~ .tab-labels label[for="tab2"] {
    color: #ffffff;
    border-bottom: 3px solid #104B44;
  }
.tab-content .container.card {
  padding: 0px 30px;
  border-radius: 0px;
  margin: 0px auto 0px;
  background: transparent;
  backdrop-filter: blur(0px);
  box-shadow: none;
  border-bottom: 0px solid rgba(255,255,255,.10);
}
  /* Contenu */
  .tab-content {
    padding: 20px 0px;
    display: none;
    opacity: 0;
    animation: fadeIn 0.4s ease forwards;
  }

  #tab1:checked ~ .content #content1,
  #tab2:checked ~ .content #content2 {
    display: block;
  }

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

  .grid-2-col {
    display: grid;
    grid-template-columns: 2fr 5fr;
    gap: 40px;
  }