:root{
   --bingo-azul: #2563eb;
   --bingo-azul-escuro: #17345f;
   --bingo-rosa: #dc3b66;
   --bingo-borda: #d6e8f5;
   --bingo-fundo: #f5faff;
}

body{
   background: linear-gradient(180deg, #fff 0, var(--bingo-fundo) 100%);
}

.bingoTelaSorteio{
   display: block;
   min-height: 100vh;
   margin: 0;
   padding: 18px;
   box-sizing: border-box;
}

.bingoAreaSorteio{
   width: min(1180px, 100%);
   min-height: calc(100vh - 36px);
   margin: 0 auto;
   box-sizing: border-box;
}

.bingoPainelSorteio{
   justify-content: center;
}

.bingoPainelSorteio .bingoAcoes{
   flex-wrap: wrap;
   justify-content: center;
}

.bingoCampoSorteio{
   min-width: 260px;
}

.bingoCampoSorteio select{
   width: 100%;
   height: 56px;
   border: 1px solid #bdd5e8;
   border-radius: 16px;
   padding: 0 38px 0 14px;
   color: var(--bingo-azul-escuro);
   background: #fff;
   font-size: 1rem;
   cursor: pointer;
}

.bingoPainelSorteio .bingoAcoes > button{
   height: 56px;
   min-height: 56px;
   border-radius: 16px;
}

.bingoPainelSorteio #btExcluirPedras{
   border-color: transparent;
   color: #fff;
   background: linear-gradient(135deg, #20b89a, #078a7a);
   box-shadow: 0 8px 18px rgba(7,138,122,.26);
}

.bingoPainelSorteio #btTelaCheia{
   border-color: transparent;
   color: #fff;
   background: linear-gradient(135deg, #8b5cf6, #6d3bd1);
   box-shadow: 0 8px 18px rgba(109,59,209,.27);
}

.bingoPainelSorteio #btExcluirPedras img,
.bingoPainelSorteio #btTelaCheia img{
   filter: brightness(0) invert(1);
}

.bingoPainelSorteio #btExcluirPedras:hover,
.bingoPainelSorteio #btExcluirPedras:focus-visible{
   box-shadow: 0 11px 23px rgba(7,138,122,.36);
}

.bingoPainelSorteio #btTelaCheia:hover,
.bingoPainelSorteio #btTelaCheia:focus-visible{
   box-shadow: 0 11px 23px rgba(109,59,209,.37);
}

#btFecharSorteio{
   width: 56px;
   min-width: 56px;
   height: 56px;
   padding: 0;
   border: 0;
   border-radius: 16px;
   color: #fff;
   background: linear-gradient(135deg, #ef4444, #be123c);
   box-shadow: 0 8px 18px rgba(190,18,60,.28);
}

#btFecharSorteio img{
   display: block;
   width: 27px;
   height: 27px;
}

#btFecharSorteio:hover,
#btFecharSorteio:focus-visible{
   transform: translateY(-2px);
   box-shadow: 0 11px 23px rgba(190,18,60,.38);
}

.bingoConfiguracao .bingoPainel{
   border-bottom: 0;
   padding-bottom: 0;
}

.bingoEscolhaModo .btAbrirSorteio[data-modo="bingo"]{
   color: #4b3200;
   background: linear-gradient(135deg, #ffd166, #e9a823);
   box-shadow: 0 8px 18px rgba(213,145,17,.3);
}

.bingoEscolhaModo .btAbrirSorteio[data-modo="bingo"]:hover,
.bingoEscolhaModo .btAbrirSorteio[data-modo="bingo"]:focus-visible{
   box-shadow: 0 11px 24px rgba(213,145,17,.4);
}

.bingoEscolhaModo .bingoBotaoRoleta{
   background: linear-gradient(135deg, #f05a63, #c92f4b);
   box-shadow: 0 8px 18px rgba(201,47,75,.3);
}

.bingoEscolhaModo .bingoBotaoRoleta:hover,
.bingoEscolhaModo .bingoBotaoRoleta:focus-visible{
   box-shadow: 0 11px 24px rgba(201,47,75,.4);
}

.roletaSorteioContainer{
   position: relative;
   display: grid;
   width: min(480px, 84vw);
   aspect-ratio: 1;
   place-items: center;
}

.roletaSorteioImagem{
   width: 100%;
   height: 100%;
   padding: 35px;
   box-sizing: border-box;
   border: 10px solid rgba(255,255,255,.75);
   border-radius: 50%;
   background: #fff;
   filter: drop-shadow(0 20px 35px rgba(0,0,0,.4));
   animation: roletaGirando .8s linear infinite;
}

@keyframes roletaGirando{ to{ transform: rotate(360deg); } }

.bingoPagina{
   grid-area: section;
   display: grid;
   align-content: start;
   width: min(1120px, calc(100% - 32px));
   margin: 0 auto;
   padding: 36px 0 64px;
   gap: 22px;
}

.bingoCabecalho,
.bingoArea{
   border: 1px solid var(--bingo-borda);
   border-radius: 22px;
   background: rgba(255,255,255,.96);
   box-shadow: 0 10px 30px rgba(30,75,110,.08);
}

.bingoCabecalho{
   display: flex;
   align-items: flex-start;
   gap: 22px;
   padding: 28px 32px;
   background: linear-gradient(135deg, #fff 25%, #eef6ff 100%);
}

.bingoCabecalhoConteudo{ flex: 1 1 auto; min-width: 0; }

.bingoControlesInicio{
   display: grid;
   grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
   align-items: end;
   gap: 18px;
   margin-top: 24px;
   border-top: 1px solid var(--bingo-borda);
   padding-top: 22px;
}

.bingoControlesInicio .bingoCampo{ max-width: none; }

.bingoControlesInicio .bingoCampo select{
   height: 64px;
   min-height: 64px;
   border-radius: 16px;
}

.bingoEscolhaModo{
   display: grid;
   grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.bingoEscolhaModo .bingoBotaoSortear,
.bingoEscolhaModo .bingoBotaoCartelas{
   width: 100%;
   min-height: 64px;
   height: 64px;
   justify-content: center;
   border-radius: 16px;
   padding: 8px 18px;
   font-size: 1.16rem;
}

.bingoEscolhaModo .bingoBotaoSortear img,
.bingoEscolhaModo .bingoBotaoCartelas img{
   width: 43px;
   height: 43px;
   object-fit: contain;
}

.bingoCabecalhoIcone{
   display: grid;
   width: 86px;
   height: 86px;
   flex: 0 0 86px;
   place-items: center;
   border-radius: 22px;
   background: #e6efff;
}

.bingoCabecalhoIcone img{
   width: 58px;
   height: 58px;
}

.bingoDestaque{
   color: var(--bingo-azul);
   font-size: .78rem;
   font-weight: 800;
   letter-spacing: .12em;
   text-transform: uppercase;
}

.bingoCabecalho h1,
.bingoResultados h2,
.bingoResultados h1{
   margin: 4px 0 0;
   color: var(--bingo-azul-escuro);
}

.bingoCabecalho h1{
   font-size: clamp(1.8rem, 4vw, 2.65rem);
}

.bingoCabecalho p{
   max-width: 680px;
   margin: 8px 0 0;
   color: #5d718b;
   line-height: 1.55;
}

.bingoArea{
   container-type: inline-size;
   container-name: painel-bingo;
   padding: 22px 26px 26px;
}

.bingoArea:fullscreen,
.bingoArea:-webkit-full-screen{
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   overflow: auto;
   border: 0;
   border-radius: 0;
   padding: 28px;
   background: #fff;
}

.bingoPainel{
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 22px;
   border-bottom: 1px solid var(--bingo-borda);
   padding-bottom: 20px;
}

.bingoCampo{
   display: grid;
   flex: 1 1 290px;
   min-width: 160px;
   max-width: 290px;
   gap: 8px;
}

.bingoCampo label{
   color: var(--bingo-azul-escuro);
   font-size: .9rem;
   font-weight: 800;
}

.bingoCampo select{
   width: 100%;
   min-height: 46px;
   border: 1px solid #bdd5e8;
   border-radius: 12px;
   padding: 0 14px;
   color: var(--bingo-azul-escuro);
   background: #fff;
   font-size: 1rem;
}

.bingoAcoes{
   min-width: 0;
   display: flex;
   align-items: center;
   gap: 12px;
}

.bingoGloboOverlay{
   position: fixed;
   inset: 0;
   z-index: 99999;

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

   background: rgba(8,20,40,.68);
   backdrop-filter: blur(4px);
}

.bingoGloboOverlay.ativo{
   display: flex;
}

.bingoResultadoSorteado{
   position: relative;
   display: none;
   width: min(480px, 84vw, 78vh);
   aspect-ratio: 1;
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   border: 10px solid rgba(255,255,255,.82);
   border-radius: 50%;
   padding: clamp(24px, 5vw, 60px);
   color: #fff;
   background: radial-gradient(circle at 32% 25%, #83b7ff 0, #4384f4 34%, #2563eb 68%, #1747ad 100%);
   box-shadow:
      inset 18px 20px 30px rgba(255,255,255,.3),
      inset -24px -28px 38px rgba(17,55,139,.35),
      0 20px 50px rgba(0,0,0,.4);
   animation: resultadoSorteadoEntrada .4s ease-out;
}

.bingoResultadoSorteado::before{
   content: "";
   position: absolute;
   top: 10%;
   left: 19%;
   width: 42%;
   height: 18%;
   border-radius: 50%;
   background: rgba(255,255,255,.36);
   filter: blur(5px);
   transform: rotate(-24deg);
}

.bingoResultadoSorteadoValor{
   position: relative;
   z-index: 1;
   font-size: clamp(3rem, 10vw, 7rem);
   font-weight: 900;
   line-height: 1.05;
   text-align: center;
   text-shadow: 0 4px 9px rgba(11,43,104,.4);
}

.bingoGloboOverlay.exibindoResultado > :not(.bingoResultadoSorteado){
   display: none;
}

.bingoGloboOverlay.exibindoResultado .bingoResultadoSorteado{
   display: flex;
}

@keyframes resultadoSorteadoEntrada{
   from{ opacity: 0; transform: scale(.72); }
   to{ opacity: 1; transform: scale(1); }
}

.bingoGloboContainer{
   position: relative;
   width: min(520px, 88vw);
   height: min(590px, 92vh);

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}


/* GLOBO */

.bingoGlobo{
   position: relative;

   width: min(430px, 78vw);
   aspect-ratio: 1;

   overflow: hidden;

   border: 10px solid rgba(255,255,255,.75);
   border-radius: 50%;

   background:
      radial-gradient(
         circle at 35% 25%,
         rgba(255,255,255,.55),
         rgba(255,255,255,.12) 35%,
         rgba(120,180,255,.15) 65%,
         rgba(0,40,100,.25)
      );

   box-shadow:
      inset 0 0 40px rgba(255,255,255,.5),
      inset 0 0 80px rgba(37,99,235,.18),
      0 20px 50px rgba(0,0,0,.4);

   animation: globoGirar 1.5s linear infinite;
}


/* Reflexo do vidro */

.bingoGlobo::before{
   content: "";

   position: absolute;

   width: 45%;
   height: 20%;

   top: 10%;
   left: 16%;

   border-radius: 50%;

   background: rgba(255,255,255,.25);

   transform: rotate(-25deg);

   filter: blur(5px);

   z-index: 10;

   pointer-events: none;
}


/* BOLAS */

.bingoBola{
   position: absolute;

   width: 72px;
   height: 72px;

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

   border-radius: 50%;

   color: #fff;

   font-size: 1.5rem;
   font-weight: 900;

   border: 5px solid rgba(255,255,255,.75);

   box-shadow:
      inset -8px -10px 15px rgba(0,0,0,.18),
      inset 7px 7px 12px rgba(255,255,255,.3),
      0 5px 10px rgba(0,0,0,.25);

   animation: bolaPulando .7s ease-in-out infinite alternate;
}


/* posições */

.bola1{
   background: #e53935;
   left: 15%;
   top: 20%;
   animation-delay: -.1s;
}

.bola2{
   background: #1e88e5;
   left: 57%;
   top: 10%;
   animation-delay: -.3s;
}

.bola3{
   background: #43a047;
   left: 39%;
   top: 60%;
   animation-delay: -.5s;
}

.bola4{
   background: #fbc02d;
   left: 62%;
   top: 67%;
   animation-delay: -.2s;
}

.bola5{
   background: #8e24aa;
   left: 70%;
   top: 38%;
   animation-delay: -.6s;
}

.bola6{
   background: #00acc1;
   left: 7%;
   top: 48%;
   animation-delay: -.4s;
}

.bola7{
   background: #fb8c00;
   left: 28%;
   top: 72%;
   animation-delay: -.15s;
}

.bola8{
   background: #3949ab;
   left: 43%;
   top: 30%;
   animation-delay: -.45s;
}


/* BASE */

.bingoGloboBase{
   width: 300px;
   height: 75px;

   margin-top: -12px;

   position: relative;

   border-radius: 30px 30px 45px 45px;

   background: linear-gradient(
      180deg,
      #46505d,
      #151a21 55%,
      #080b10
   );

   border: 4px solid #555f6c;

   box-shadow:
      0 15px 25px rgba(0,0,0,.45),
      inset 0 5px 10px rgba(255,255,255,.15);
}


.bingoGloboLuz{
   position: absolute;

   left: 50%;
   bottom: 8px;

   width: 80%;
   height: 8px;

   transform: translateX(-50%);

   border-radius: 10px;

   background: #2d8cff;

   box-shadow:
      0 0 10px #2d8cff,
      0 0 20px #2d8cff,
      0 0 30px #2d8cff;

   animation: luzGlobo .6s infinite alternate;
}


/* TEXTO */

.bingoGloboTexto{
   position: absolute;

   top: 46%;

   left: 50%;

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

   z-index: 20;

   display: flex;
   flex-direction: column;

   align-items: center;

   color: #fff;

   text-align: center;

   text-shadow: 0 2px 8px rgba(0,0,0,.8);

   pointer-events: none;
}

.bingoGloboTexto strong{
   font-size: clamp(1.5rem, 4vw, 2.3rem);
   letter-spacing: .04em;
}

.bingoGloboTexto span{
   margin-top: 6px;
   font-size: 1rem;
}


/* ANIMAÇÕES */
@keyframes globoGirar{
   0%{transform: rotate(0deg);}
   25%{transform: rotate(2deg);}
   50%{transform: rotate(0deg);}
   75%{transform: rotate(-2deg);}
   100%{transform: rotate(0deg);}
}


@keyframes bolaPulando{
   0%{transform: translate(-20px, 25px) rotate(0deg) scale(.95);}
   50% {transform: translate(18px, -35px) rotate(180deg) scale(1.05);}
   100% {transform: translate(-10px, 18px) rotate(360deg) scale(.98);}
}


@keyframes luzGlobo{
   from{opacity: .5;}
   to{opacity: 1;}
}


@media(max-width:600px){
   .bingoBola{
      width: 55px;
      height: 55px;
      font-size: 1.1rem;
      border-width: 4px;
   }

   .bingoGloboBase{
      width: 230px;
      height: 60px;
   }
}

@container painel-bingo (max-width: 800px){
   .bingoAcoes{ gap: 8px; }

   #btExcluirPedras,
   #btTelaCheia{
      flex: 0 0 48px;
      width: 48px;
      min-width: 48px;
      padding-right: 7px;
      padding-left: 7px;
   }

   #btExcluirPedras .textoNovoJogo,
   #btTelaCheia .textoTelaCheia{ display: none; }
}

@container painel-bingo (max-width: 620px){
   #btStart .textoSortearPedra,
   #btImprimir .textoCartelas{ display: none; }

   #btStart,
   #btImprimir,
   #btExcluirPedras,
   #btTelaCheia{
      min-width: 48px;
      padding-right: 7px;
      padding-left: 7px;
   }
}

.bingoBotaoSortear{
   display: inline-flex;
   min-height: 50px;
   align-items: center;
   gap: 10px;
   border: 0;
   border-radius: 14px;
   padding: 8px 20px;
   color: #fff;
   background: linear-gradient(135deg, var(--bingo-azul), #4f8df7);
   box-shadow: 0 8px 18px rgba(37,99,235,.24);
   cursor: pointer;
   font: inherit;
   font-weight: 800;
   transition: transform .17s ease, box-shadow .17s ease, opacity .17s ease;
}

.bingoBotaoSortear:hover,
.bingoBotaoSortear:focus-visible{
   transform: translateY(-2px);
   box-shadow: 0 11px 23px rgba(37,99,235,.3);
}

.bingoBotaoSortear:disabled{
   cursor: wait;
   opacity: .78;
}

.bingoBotaoSortear img{
   width: 34px;
   height: 34px;
   object-fit: contain;
}

.bingoBotaoSortear.sorteando img{
   border-radius: 50%;
}

.bingoResultados{
   padding-top: 20px;
}

.bingoResultadosCabecalho{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
}

.bingoResultados h2{
   font-size: clamp(1.3rem, 3vw, 1.8rem);
}

.bingoResultados h1{
   font-size: clamp(1.3rem, 3vw, 1.8rem);
}

#btExcluirPedras:disabled{
   opacity: .42;
   filter: grayscale(1);
   cursor: not-allowed;
}

.bingoStatus{
   display: none;
   margin: 22px 0;
   border: 1px dashed #bfd3e5;
   border-radius: 12px;
   padding: 13px 16px;
   color: #60758d;
   background: #f8fbfe;
   text-align: center;
}

.bingoStatusErro{
   display: block;
   border-color: #f2b1bf;
   color: #b42343;
   background: #fff4f6;
}

#divPedras{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   justify-items: center;
   gap: 18px;
   width: 100%;
}

.pedra{
   position: relative;
   display: grid;
   width: min(100%, 170px);
   aspect-ratio: 1;
   overflow: hidden;
   place-items: center;
   align-content: center;
   border: 5px solid rgba(255,255,255,.82);
   border-radius: 50%;
   padding: 18px;
   color: #fff;
   background: radial-gradient(circle at 32% 25%, #83b7ff 0, #4384f4 34%, #2563eb 68%, #1747ad 100%);
   box-shadow:
      inset 8px 9px 14px rgba(255,255,255,.3),
      inset -10px -12px 18px rgba(17,55,139,.35),
      0 9px 18px rgba(37,99,235,.22);
}

.pedra::before{
   content: "";
   position: absolute;
   top: 10%;
   left: 19%;
   width: 42%;
   height: 18%;
   border-radius: 50%;
   background: rgba(255,255,255,.36);
   filter: blur(2px);
   transform: rotate(-24deg);
}

.pedraOperacao{
   position: relative;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: inherit;
   font-size: clamp(2.3rem, 4.5vw, 2.8rem);
   font-weight: 800;
   text-align: center;
   text-shadow: 0 2px 4px rgba(11,43,104,.35);
   white-space: nowrap;
}

.pedraAnterior{
   border-color: rgba(255,255,255,.9);
   color: var(--bingo-azul-escuro);
   background: radial-gradient(circle at 32% 25%, #fff 0, #eef4fa 40%, #dce7f1 72%, #c4d4e2 100%);
   box-shadow:
      inset 7px 8px 13px rgba(255,255,255,.7),
      inset -9px -11px 16px rgba(90,117,143,.18),
      0 7px 14px rgba(48,78,105,.14);
}

.pedraAnterior .pedraOperacao{
   color: inherit;
   background: transparent;
   text-shadow: 0 1px 2px rgba(255,255,255,.9);
}

.pedraNova{
   animation: pedraEntrada .35s ease-out;
}

@keyframes pedraEntrada{
   from{ opacity: 0; transform: translateY(-10px) scale(.96); }
   to{ opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 680px){
   .bingoPagina{
      width: min(100% - 20px, 1120px);
      padding: 18px 0 40px;
      gap: 14px;
   }

   .bingoCabecalho{
      align-items: flex-start;
      padding: 22px 18px;
   }

   .bingoControlesInicio{
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 18px;
      padding-top: 18px;
   }

   .bingoCabecalhoIcone{
      width: 62px;
      height: 62px;
      flex-basis: 62px;
      border-radius: 17px;
   }

   .bingoCabecalhoIcone img{
      width: 42px;
      height: 42px;
   }

   .bingoPainel,
   .bingoResultadosCabecalho{
      align-items: stretch;
      flex-direction: column;
   }

   .bingoPainel{
      justify-content: flex-start;
      gap: 12px;
   }

   .bingoArea{
      padding: 18px;
   }

   .bingoPainel{
      padding-bottom: 16px;
   }

   .bingoResultados{
      padding-top: 16px;
   }

   .bingoCampo{
      flex: 0 0 auto;
      min-width: 100%;
      max-width: none;
   }

   .bingoAcoes{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      width: 100%;
      gap: 8px;
   }

   .bingoEscolhaModo{
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .bingoPainelSorteio .bingoAcoes{
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }

   .bingoPainelSorteio .bingoCampoSorteio{
      grid-column: 1 / -1;
      min-width: 0;
   }

   .bingoEscolhaModo .bingoBotaoSortear,
   .bingoEscolhaModo .bingoBotaoCartelas{
      height: 54px;
      min-height: 54px;
      font-size: .95rem;
   }

   .bingoControlesInicio .bingoCampo select{
      height: 54px;
      min-height: 54px;
   }

   .bingoEscolhaModo .bingoBotaoSortear img,
   .bingoEscolhaModo .bingoBotaoCartelas img{
      width: 34px;
      height: 34px;
   }

   .bingoBotaoSortear,
   #btImprimir,
   #btExcluirPedras,
   #btTelaCheia{
      width: 100%;
      min-width: 0;
      min-height: 46px;
      height: 46px;
      padding-right: 4px;
      padding-left: 4px;
      justify-content: center;
   }

   .bingoPainelSorteio #btStart,
   .bingoPainelSorteio #btExcluirPedras,
   .bingoPainelSorteio #btTelaCheia,
   .bingoPainelSorteio #btFecharSorteio,
   .bingoPainelSorteio .bingoCampoSorteio select{
      height: 52px;
      min-height: 52px;
   }

   #divPedras{
      grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
      gap: 10px;
   }

   .pedra{
      width: 85px;
      border-width: 3px;
      padding: 8px;
      box-shadow:
         inset 4px 5px 8px rgba(255,255,255,.3),
         inset -5px -6px 9px rgba(17,55,139,.35),
         0 5px 10px rgba(37,99,235,.22);
   }

   .pedraOperacao{
      font-size: clamp(.9rem, 4.8vw, 1.4rem);
   }
}

@media (max-width: 420px){
   .bingoCabecalhoIcone{
      display: none;
   }

}