/* ===================================================== */
/* RESET */
/* ===================================================== */

body{
  margin:0;
  background:#000;
  overflow:hidden;
}

.screen{
  position:relative;
  width:1920px;
  height:1080px;
}

.bg{
  position:absolute;
  width:1920px;
  height:1080px;
  left:0;
  top:0;
  z-index:0;
}

/* ===================================================== */
/* TEXTOS BASE */
/* ===================================================== */

#mode,#gameA,#gameB,#setA,#setB,#set1,
#categoria,#hora,#tempoJogo{
  position:absolute;
  z-index:30;
  color:#fff;
}

/* ===================================================== */
/* LAYOUT NORMAL (1 SET) */
/* ===================================================== */

#mode{
  left:34px;
  top:20px;
  font-family:'Sora';
  font-size:50px;
}

#gameA{
  left:968px;
  top:323px;
  transform:translate(-50%,-50%);
  font-family:'Istok Web';
  font-size:250px;
}

#gameB{
  left:968px;
  top:705px;
  transform:translate(-50%,-50%);
  font-family:'Istok Web';
  font-size:250px;
}

#setA{
  left:1343px;
  top:259px;
  font-family:'Istok Web';
  font-size:150px;
}

#setB{
  left:1333px;
  top:621px;
  font-family:'Istok Web';
  font-size:150px;
}

#set1{
  left:1315px;
  top:519px;
  font-family:'Istok Web';
  font-size:40px;
}

/* ================================= */
/* CATEGORIA (BASE PARA TODOS MODOS) */
/* ================================= */

/* ================================= */
/* CATEGORIA PRESA NA COLUNA LARANJA */
/* ================================= */

.categoriaBox{
  position:absolute;
  left:750px;      /* posição da coluna */
  bottom:60px;

  width:420px;     /* largura da coluna */
  height:60px;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:90;
}

#categoria{
  position:relative;
  font-family:'Sora';
  font-size:45px;
  color:#fff;
  text-align:center;
  white-space:nowrap;
}

#hora{
  left:1699px;
  top:970px;
  font-family:'Istok Web';
  font-size:80px;
}

#tempoJogo{
  left:96px;
  top:1006px;
  font-family:'Sora';
  font-size:45px;
}


/* ===================================================== */
/* ELEMENTOS 3 SETS (invisível por padrão) */
/* ===================================================== */

#set1A,#set1B,#set1Label,
#set2A,#set2B,#set2Label,
#set3A,#set3B,#set3Label{
  display:none;
  position:absolute;
  color:#fff;
  z-index:50;   /* 🔴 ADICIONE ISSO */
}

/* ===================================================== */
/* POSIÇÕES EXATAS 3 SETS (FIGMA) */
/* ===================================================== */

/* players */
body.mode3sets #playerA1{
  left:113px;
  top:376px;
  width:159px;
  height:56px;
  font-family:'Istok Web';
  font-size:30px;
}

body.mode3sets #playerA2{
  left:441px;
  top:379px;
  width:158px;
  height:56px;
  font-family:'Istok Web';
  font-size:30px;
}

body.mode3sets #playerB1{
  left:113px;
  top:804px;
  width:159px;
  height:56px;
  font-family:'Istok Web';
  font-size:30px;
}

body.mode3sets #playerB2{
  left:441px;
  top:804px;
  width:158px;
  height:56px;
  font-family:'Istok Web';
  font-size:30px;
}

/* GAME central */
body.mode3sets #gameA{
  left:778px;
  top:178px;
  width:281px;
  height:290px;
  transform:none;
  font-family:'Istok Web';
  font-size:250px;
}

body.mode3sets #gameB{
  left:778px;
  top:585px;
  width:281px;
  height:290px;
  transform:none;
  font-family:'Istok Web';
  font-size:250px;
}

/* SET 1 */
body.mode3sets #set1A{
  left:1234px;
  top:259px;
  width:61px;
  height:216px;
  font-family:'Istok Web';
  font-size:150px;
}

body.mode3sets #set1B{
  left:1224px;
  top:621px;
  width:82px;
  height:216px;
  font-family:'Istok Web';
  font-size:150px;
}

body.mode3sets #set1Label{
  left:1206px;
  top:519px;
  font-family:'Istok Web';
  font-size:40px;
}

/* SET 2 */
body.mode3sets #set2A{
  left:1488px;
  top:259px;
  width:61px;
  height:216px;
  font-family:'Istok Web';
  font-size:150px;
}

body.mode3sets #set2B{
  left:1478px;
  top:621px;
  width:82px;
  height:216px;
  font-family:'Istok Web';
  font-size:150px;
}

body.mode3sets #set2Label{
  left:1460px;
  top:519px;
  font-family:'Istok Web';
  font-size:40px;
}

/* SET 3 */
body.mode3sets #set3A{
  left:1742px;
  top:259px;
  width:61px;
  height:216px;
  font-family:'Istok Web';
  font-size:150px;
}

body.mode3sets #set3B{
  left:1732px;
  top:621px;
  width:82px;
  height:216px;
  font-family:'Istok Web';
  font-size:150px;
}

body.mode3sets #set3Label{
  left:1714px;
  top:519px;
  font-family:'Istok Web';
  font-size:40px;
}

/* ===================================================== */
/* ATIVA 3 SETS */
/* ===================================================== */

body.mode3sets #setA,
body.mode3sets #setB,
body.mode3sets #set1{
  display:none;
}

body.mode3sets #set1A,
body.mode3sets #set1B,
body.mode3sets #set1Label,
body.mode3sets #set2A,
body.mode3sets #set2B,
body.mode3sets #set2Label,
body.mode3sets #set3A,
body.mode3sets #set3B,
body.mode3sets #set3Label{
  display:block;
}
/* ===================================================== */
/* AJUSTES FINAIS 3 SETS */
/* ===================================================== */

/* GAME label */
body.mode3sets #gameLabel{
  position:absolute;
  left:835px;
  top:70px;
  font-family:'Sora';
  font-size:50px;
  color:#fff;
  z-index:20;
}

/* PONTOS */
body.mode3sets #gameA,
body.mode3sets #gameB{
  position:absolute;
  left:778px;      /* valor exato do Figma */
  width:281px;     /* largura do frame no Figma */
  transform:none;  /* 🔴 remove translate */
  text-align:center;
  font-family:'Istok Web';
  font-size:250px;
}

body.mode3sets #gameA{ top:178px; }
body.mode3sets #gameB{ top:585px; }


/* ================================= */
/* CATEGORIA NO MODO 3 SETS          */
/* ================================= */


/* RELÓGIO */
body.mode3sets #hora{
  position:absolute;
  left:1700px;
  top:970px;
  font-size:80px;
}

/* TEMPO DE JOGO */
body.mode3sets #tempoJogo{
  position:absolute;
  left:110px;
  top:1000px;
  font-size:45px;
}
/*body.mode3sets #categoria{
  position:absolute;
  left:773px;        /* valor exato do Figma */
 /* width:286px;       /* largura do texto no Figma */
 /* bottom:58px;       /* altura correta */
 /* text-align:center;
 /* font-family:'Sora';
 /* font-size:45px;
 /* white-space:nowrap;
/*}
/* ===================================================== */
/* MODO PONTOS CORRIDOS */
/* ===================================================== */

/* ESCONDE TODO O LAYOUT DE TENIS */

body.modecorridos #setA,
body.modecorridos #setB,
body.modecorridos #set1,
body.modecorridos #set1A,
body.modecorridos #set1B,
body.modecorridos #set2A,
body.modecorridos #set2B,
body.modecorridos #set3A,
body.modecorridos #set3B,
body.modecorridos #set1Label,
body.modecorridos #set2Label,
body.modecorridos #set3Label,
body.modecorridos #playerA1,
body.modecorridos #playerA2,
body.modecorridos #playerB1,
body.modecorridos #playerB2,
body.modecorridos #categoria,
body.modecorridos #gameLabel{
  display:none !important;
}

/* 🔴 APAGA COMPLETAMENTE placar de tenis */
body.modecorridos #gameA,
body.modecorridos #gameB{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}


/* ===================================================== */
/* MODO 2 SETS — FIGMA FINAL CORRIGIDO */
/* ===================================================== */

body.mode2sets #setA,
body.mode2sets #setB,
body.mode2sets #set1{
  display:none;
}

body.mode2sets #set1A,
body.mode2sets #set1B,
body.mode2sets #set1Label,
body.mode2sets #set2A,
body.mode2sets #set2B,
body.mode2sets #set2Label{
  display:block;
  position:absolute;
  font-family:'Istok Web';
  color:#fff;
}

/* esconder 3º */
body.mode2sets #set3A,
body.mode2sets #set3B,
body.mode2sets #set3Label{
  display:none;
}

/* 1º SET */
body.mode2sets #set1A{
  left:1359px;
  top:259px;
  font-size:150px;
}

body.mode2sets #set1Label{
  left:1331px;
  top:519px;
  font-size:40px;
}

body.mode2sets #set1B{
  left:1349px;
  top:621px;
  font-size:150px;
}

/* 2º SET */
body.mode2sets #set2A{
  left:1677px;
  top:259px;
  font-size:150px;
}

body.mode2sets #set2Label{
  left:1649px;
  top:519px;
  font-size:40px;
}

body.mode2sets #set2B{
  left:1667px;
  top:621px;
  font-size:150px;
}
body.mode2sets #gameLabel{
  position:absolute;
  top:70px;

  left:50%;
  transform:translateX(-50%);

  width:420px;
  text-align:center;

  font-family:'Sora';
  font-size:50px;
  color:#fff;
  z-index:50;
}
/* ============================= */
/* 🔴 MODO PONTOS CORRIDOS FINAL */
/* ============================= */

#corridosLayer{
  display:none;
}

body.modecorridos #corridosLayer{
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:1920px;
  height:1080px;
  z-index:20;
}

/* esconder layout tenis */

/* 🔴 APAGA COMPLETAMENTE placar de tenis */
body.modecorridos #gameA,
body.modecorridos #gameB{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}


body.modecorridos #setA,
body.modecorridos #setB,
body.modecorridos #set1,
body.modecorridos #set1A,
body.modecorridos #set1B,
body.modecorridos #set2A,
body.modecorridos #set2B,
body.modecorridos #set3A,
body.modecorridos #set3B,
body.modecorridos #set1Label,
body.modecorridos #set2Label,
body.modecorridos #set3Label,
body.modecorridos #playerA1,
body.modecorridos #playerA2,
body.modecorridos #playerB1,
body.modecorridos #playerB2,
body.modecorridos #categoria,
body.modecorridos #gameLabel{
  display:none !important;
}

/* titulo */
body.modecorridos #mode{
  position:absolute;
  left:34px;
  top:20px;
  font-family:'Sora';
  font-size:50px;
  color:#fff;
}

/* =============================== */
/* PILL + TEXTO CENTRAL FIGMA REAL */
/* =============================== */

body.modecorridos #topPill{
  position:absolute;
  left:860px;
  top:110px;
  width:223px;
  height:97px;
  background:#ff4d00;
  border-radius:50px;
}

body.modecorridos #pontosCentral{
  position:absolute;
  left:860px;
  top:110px;
  width:223px;
  height:97px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-family:'Sora';
  font-size:50px;
  color:#fff;
}

/* placar esquerdo */
body.modecorridos #scoreA{
  position:absolute;
  left:581px;
  top:397px;
  width:301px;
  height:317px;

  font-family:'Istok Web';
  font-size:250px;
  color:#fff;
  text-align:center;
  line-height:317px;
}

/* placar direito */
body.modecorridos #scoreB{
  position:absolute;
  left:1080px;
  top:397px;
  width:301px;
  height:316px;

  font-family:'Istok Web';
  font-size:250px;
  color:#fff;
  text-align:center;
  line-height:316px;
}

/* ================================= */
/* POSIÇÃO EXATA FIGMA — TIMES */
/* ================================= */

/* BOXES */
.teamBoxA,
.teamBoxB{
  position:absolute;
  width:159px;
  height:56px;
}

/* posições do figma */
.teamBoxA{ left:175px;  top:632px; }
.teamBoxB{ left:1608px; top:642px; }

/* TEXTO CENTRAL REAL */
#teamAName,
#teamB{
  position:absolute;
  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  width:100%;
  text-align:center;

  font-family:'Istok Web';
  font-size:30px;
  color:#fff;
}

@keyframes blinkWinner{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

.winnerBlink{
  animation: blinkWinner 1.2s infinite;
  animation-delay: -0.6s;
}

/* ===================================================== */
/* TIEBREAK OVERLAY */
/* ===================================================== */

#tiebreakOverlay{
  position:absolute;
  left:0;
  top:0;
  width:1920px;
  height:1080px;
  z-index:20;   /* ↓ antes era 30 */
  display:none;
}

/* ===================================================== */
/* TIEBREAK GLOW FIGMA REAL */
/* ===================================================== */

#tiebreakBorder{
  position:absolute;

  left:750px;
  top:0;
  width:420px;
  height:1080px;

  border-radius:40px;

  z-index:35;
  display:none;

  animation: tbGlow 1.2s ease-in-out infinite;
}

@keyframes tbGlow{
  0%{
    box-shadow:
      0 0 10px rgba(255,120,0,0.25),
      0 0 30px rgba(255,120,0,0.25),
      0 0 60px rgba(255,120,0,0.2);
  }

  50%{
    box-shadow:
      0 0 25px rgba(255,120,0,0.5),
      0 0 60px rgba(255,120,0,0.45),
      0 0 120px rgba(255,120,0,0.35);
  }

  100%{
    box-shadow:
      0 0 10px rgba(255,120,0,0.25),
      0 0 30px rgba(255,120,0,0.25),
      0 0 60px rgba(255,120,0,0.2);
  }
}

/* números por cima do amarelo */
#gameA,
#gameB{
  z-index:55;   /* 🔴 MAIS ALTO QUE O OVERLAY */
}

/* winner acima de tudo */
#winnerA,
#winnerB,
#tbWinnerA,
#tbWinnerB{
  position:absolute;
  left:0;
  top:0;
  width:1920px;
  height:1080px;
  z-index:60;
  display:none;
}

/* animação da borda */
@keyframes blinkTB{
  0%{opacity:1;}
  50%{opacity:0.2;}
  100%{opacity:1;}
}
@keyframes tbMasterPulse{
  0%{
    box-shadow:
      0 0 10px rgba(255,120,0,0.25),
      0 0 30px rgba(255,120,0,0.25),
      0 0 60px rgba(255,120,0,0.2);
    opacity:1;
  }

  50%{
    box-shadow:
      0 0 25px rgba(255,120,0,0.5),
      0 0 60px rgba(255,120,0,0.45),
      0 0 120px rgba(255,120,0,0.35);
    opacity:0.4;
  }

  100%{
    box-shadow:
      0 0 10px rgba(255,120,0,0.25),
      0 0 30px rgba(255,120,0,0.25),
      0 0 60px rgba(255,120,0,0.2);
    opacity:1;
  }
}
/* SUPERTIE LIMPO */
body.superTBMode #gameLabel{
    display:none !important;
}

body.superTBMode #mode{
    opacity:0.3;
}
/* ============================= */
/* ESCONDER GAME QUANDO TIEBREAK */
/* ============================= */

/* TIEBREAK NA FRENTE DE TUDO */


/* ESCONDE TEXTO GAME NO TIEBREAK */
body.tiebreakMode #gameLabel{
  display:none !important;
}


/* 🔴 MOSTRAR PONTOS DO TIEBREAK */
body.tiebreakMode #gameA,
body.tiebreakMode #gameB{
  display:block !important;
}


/* ================================= */
/* CATEGORIA SEMPRE POR CIMA DO TB   */
/* ================================= */

#categoria{
  position:absolute;
  z-index:90 !important;
}
/* ================================= */
/* TIEBREAK 3 SETS POSIÇÃO FIGMA     */
/* ================================= */

body.tb3sets #tiebreakBorder{
  left:699px;
  width:420px;
  height:1080px;
}

body.tb3sets #tiebreakOverlay{
  left:0;
  top:0;
  width:1920px;
  height:1080px;
}

/* ================================= */
/* TIEBREAK 3 SETS POSIÇÃO FIGMA     */
/* ================================= */


body.tb3sets #tiebreakOverlay{
  left:0;
  top:0;
  width:1920px;
  height:1080px;
}
/* ===================================================== */
/* FOTOS DOS JOGADORES (CORREÇÃO DEFINITIVA) */
/* ===================================================== */

/* ===================================================== */
/* FOTOS DOS JOGADORES — LIMPO E CORRETO */
/* ===================================================== */

.playerBox{
  position:absolute;
  width:340px;
  height:300px;
  overflow:hidden;
  border-radius:18px;
  z-index:15;
  background:transparent;

  display:flex;
  align-items:flex-end;   /* cola no fundo */
  justify-content:center;
}

.playerBox img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
}


/* fade inferior estilo TV */
.playerBox::after{
  display:none;
}

/* ===================================================== */
/* POSIÇÃO DAS FOTOS — FINAL DEFINITIVO */
/* ===================================================== */

#boxA1{
  position:absolute;
  left:40px;
  top:130px;
  width:340px;
  height:300px;
}

#boxA2{
  position:absolute;
  left:420px;
  top:130px;
  width:340px;
  height:300px;
}

#boxB1{
  position:absolute;
  left:40px;
  top:560px;
  width:340px;
  height:300px;
}

#boxB2{
  position:absolute;
  left:420px;
  top:560px;
  width:340px;
  height:300px;
}


/* ===================================== */
/* NOMES ABAIXO DAS FOTOS — FIGMA REAL  */
/* ===================================== */

.nameBox{
  position:absolute;
  width:159px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
}

#playerA1,#playerA2,#playerB1,#playerB2{
  font-family:'Istok Web';
  font-size:30px;
  color:#fff;
  text-align:center;
  width:100%;
}

/* TIME A (cima) */
#nameBoxA1{ left:121px; top:440px; }
#nameBoxA2{ left:482px; top:440px; }

/* TIME B (baixo) */
#nameBoxB1{ left:121px; top:860px; }
#nameBoxB2{ left:482px; top:860px; }
/* FORÇA NOMES FORA DA FOTO — PRIORIDADE MÁXIMA */
.nameBox{
  position:absolute !important;
  width:159px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}

#playerA1,#playerA2,#playerB1,#playerB2{
  position:relative !important;
  left:0 !important;
  top:0 !important;
  transform:none !important;
}
.faseBox{
  position:absolute;
  left:750px;
  bottom:20px;

  width:420px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:90;
}

#fase{
  font-family:'Sora';
  font-size:42px;
  color:#fff;
  text-align:center;
  opacity:0.8;
}
.categoriaBox{
  position:absolute;
  left:700px;
  bottom:60px;

  width:420px;
  height:60px;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:90;
}

#categoria{
  position:relative;
  font-family:'Sora';
  font-size:45px;
  color:#fff;
  text-align:center;
  white-space:nowrap;
}
/* BOTÃO APLICAR MOBILE */
#btnAplicar{
    position:fixed;
    left:50%;
    bottom:40px;
    transform:translateX(-50%);

    width:80%;
    max-width:500px;
    height:70px;

    font-size:26px;
    font-weight:600;

    border-radius:18px;
    border:none;

    background:#18c964;
    color:#fff;

    box-shadow:0 8px 25px rgba(0,0,0,0.4);
}