.meditador-random-btn {
  background: linear-gradient(135deg,#4f46e5,#06b6d4);
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:bold;
  transition:background .3s,box-shadow .3s;
}
.meditador-random-btn.active {
  background: linear-gradient(135deg,#16a34a,#22c55e);
  box-shadow:0 0 8px #600;
}
#meditador-popup {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999
}
.meditador-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6)
}
.meditador-content {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  z-index: 10000
}
.meditador-content button {
  background: none;
  border: none;
  cursor: pointer;
  color: #FFF;
  z-index: 999999;
  text-shadow: 0 0 5px #000;
}
.meditador-close {
  font-size: 24px;
  position: absolute;
  top: 10px;
  right: 10px;
}
.abre-lista {
  margin: 17px 10px;
  font-weight: bold;
  position: relative;
  z-index: 999999;
}
.meditador-list {
  display: inline-block;
  text-align: center;
  align-items: center;
}
.meditador-list button {
  margin: 4px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid #999;
  text-shadow: 0 0 5px black;
}
.meditador-fullscreen {
  position: absolute;
  top: 10px;
  right: 45px; /* ligeiramente à esquerda do botão fechar */
  font-size: 18px;
  transition: color 0.2s;
  line-height: 28px;
}
.meditador-fullscreen:hover { 
  color: #F00;
}
.meditador-fullscreen.active {
  color: #F00; /* cor diferente quando estiver em tela cheia */
}
/* Estado padrão */
.abre-lista,
.meditador-close,
.meditador-fullscreen {
  transition: opacity 0.4s ease;
  opacity: 1;
}

/* Escondidos em tela cheia */
:fullscreen .abre-lista.hidden,
:fullscreen .meditador-close.hidden,
:fullscreen .meditador-fullscreen.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Reaparecem ao mover o mouse */
:fullscreen .abre-lista.visible,
:fullscreen .meditador-close.visible,
:fullscreen .meditador-fullscreen.visible {
  opacity: 1;
  pointer-events: auto;
}
.meditador-list button.active {
    background: #999;
    font-weight: bold;
    color: #000;
    text-shadow: 0 0 5px #FFF;
    padding: 5px 10px;
}
.meditador-section {
  position: relative;
  width: 80%;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 20px;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 10px;
  z-index: 999999;
  mix-blend-mode: normal; /* “reseta” o blending */
  isolation: isolate;     /* força contexto independente */
}

@keyframes meditador-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
#resultados-dinamicos ul li a:hover {
    background: #f7f7f7;
    display: block;
}
#popUp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: none;
  z-index: 9999;
}
#sigilo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    mix-blend-mode: multiply;
    border-radius: 20px;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sigilo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}

/* Para telas horizontais (landscape) */
@media (orientation: landscape) {
    #sigilo img {
        max-height: 33vh; /* no máximo 33% da altura da tela */
        width: auto;
    }
}

/* Para telas verticais (portrait) */
@media (orientation: portrait) {
    #sigilo img {
        max-width: 33vw; /* no máximo 33% da largura da tela */
        height: auto;
    }
}


.meditador-videos video {
  transition: opacity 1s ease;
}

.meditador-videos video.fading {
  opacity: 0;
}
#meditador-video-player1,
#meditador-video-player2 {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}
#meditador-video-player2{
  mix-blend-mode: difference;
}
#meditador-video-player1.fadeout,
#meditador-video-player2.fadeout {
  opacity: 0;
}

.meditador-random-btn .random-countdown {
  width: 30px;
  height: 22px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  text-align: center;
  font-size: 0.8em;
  border-radius: 4px;
  pointer-events: none;
  transition: background 0.3s;
  padding: 0;
  margin: -5px 0;
}

.meditador-random-btn.active .random-countdown {
  background: rgba(0, 0, 0, 0.25);
}
.protegeSigilo {
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#youtube {
  position: relative;
  float: left;
}
video {
  object-fit: cover;
}
.meditador-video-player {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#linkyoutube {
  max-width: 40%;
  position: relative;
  float: left;
  border: 1px solid #FFF;
  background: #333;
  color: #fff;
  font-size: 14px;
  height: 25px;
  padding-left: 5px;
}
#botaoYT {
  font-size: 18px;
  background-color: #333;
  border: 1px #fff solid;
  padding: 3px 5px;
  color: #FFF;
  line-height: 21px;
}
/* Centralizar lista de vídeos sempre, inclusive em tela cheia */
.meditador-section,
.meditador-section ul,
.meditador-section li {
    text-align: center !important;
    justify-content: center !important;
}

/* Se usar flex na lista, garante centralização */
.meditador-section ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center;
    gap: 8px; /* opcional */
}