/* s.css (INTEIRO) — com a fusão tech já incorporada no final e sem quebrar o estilo atual */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

body,
html {
  min-height: 100%;
  overflow-y: auto;
  background: #0a002b;
  position: relative;
  color: white;
  text-align: center;
  background: url(https://cdn.tebex.io/store/990188/templates/146833/assets/2d5a390f5375de8e819b956f05aaea15571f389d.png) repeat;
}

body::before {
  content: '';
  position: fixed;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: radial-gradient(
      ellipse at 30% 30%,
      #6e00ffcc,
      transparent 40%
    ),
    radial-gradient(ellipse at 70% 50%, #d600ff88, transparent 30%),
    radial-gradient(ellipse at 60% 80%, #5900ff99, transparent 45%);
  filter: blur(150px);
  animation: nebulaMove 60s ease-in-out infinite;
  z-index: 0;
  mix-blend-mode: screen;
  transform: translate(var(--nebula-x, 0), var(--nebula-y, 0)) scale(1.03);
  transition: transform 0.2s ease-out;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #2a004d 20%, #0a002b 90%);
  z-index: -1;
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stars {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

.stars::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  box-shadow:
    10vw 10vh #fff,
    20vw 25vh #fff,
    30vw 40vh #fff,
    40vw 50vh #fff,
    50vw 70vh #fff,
    60vw 20vh #fff,
    70vw 90vh #fff,
    80vw 15vh #fff,
    90vw 60vh #fff,
    25vw 80vh #fff,
    15vw 35vh #fff,
    35vw 10vh #fff,
    45vw 85vh #fff,
    55vw 30vh #fff,
    65vw 75vh #fff,
    75vw 50vh #fff,
    85vw 25vh #fff,
    95vw 40vh #fff;
  animation: twinkle 3s infinite ease-in-out alternate;
}

.stars::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  background: #bbb;
  box-shadow:
    15vw 20vh #ccc,
    25vw 30vh #ddd,
    35vw 50vh #eee,
    45vw 60vh #ddd,
    55vw 40vh #ccc,
    65vw 20vh #eee,
    75vw 10vh #ddd,
    85vw 70vh #ccc,
    95vw 90vh #eee,
    20vw 10vh #ccc,
    30vw 80vh #ddd,
    40vw 25vh #eee,
    50vw 15vh #ccc,
    60vw 60vh #ddd,
    70vw 40vh #eee,
    80vw 30vh #ccc,
    90vw 50vh #ddd;
  animation: twinkle 4.5s infinite ease-in-out alternate;
}

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

@keyframes nebulaMove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, 20px) scale(1.05); }
}

.logo-container {
  position: relative;
  display: inline-block;
  z-index: 2;
  animation: logoPulse 3s ease-in-out infinite alternate;
}

@keyframes logoPulse {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

.logo-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(200, 150, 255, 0.1) 40%, transparent 41%),
    repeating-conic-gradient(from 0deg, rgba(200,150,255,0.25) 0deg 1deg, transparent 1deg 6deg),
    conic-gradient(from 0deg, #6e00ff, #cc59d2, #6e00ff);
  mask-image: radial-gradient(circle, rgba(255,255,255,0.95) 40%, transparent 70%);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 8px #a678ff) drop-shadow(0 0 12px #a67aff);
  animation: rotateCircleMystic 40s linear infinite;
  z-index: 0;
  pointer-events: none;
}

.logo-container::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: rgba(255, 230, 255, 0.3);
  text-shadow: 0 0 6px #d8a8ff, 0 0 14px #b078ff;
  animation: rotateSymbolsMystic 60s linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

@keyframes rotateCircleMystic {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rotateSymbolsMystic {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* ===== Botão Torneio ===== */
.button-torneio {
  background: linear-gradient(145deg, #2f7cff, #6b30ff);
  color: white;
  padding: 0.95rem 2.45rem;
  margin-top: 0.4rem;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    4px 4px 12px rgba(0, 0, 0, 0.6),
    -4px -4px 8px rgba(255, 255, 255, 0.08),
    0 0 12px rgba(45, 226, 255, 0.25),
    0 0 12px #a043e977 inset;
  font-size: 1.22rem;
  font-weight: bold;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transform: translateY(0);
  outline: 3px solid #ffffff88;
  outline-offset: 4px;
  width: auto;
}

.button-torneio:hover {
  background: linear-gradient(145deg, #4aa3ff, #b456ff);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.6),
    0 0 16px #ffffff99,
    0 0 18px rgba(45, 226, 255, 0.35),
    inset 0 0 10px #b456ff;
  transform: translateY(-2px);
}

/* ===== Modal Torneio ===== */
.torneio-modal{ position: fixed; inset: 0; z-index: 9999; }
.torneio-modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
}
.torneio-modal-card{
  position: relative;
  max-width: 1100px;
  width: calc(100% - 26px);
  height: min(82vh, 760px);
  margin: 10vh auto 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: radial-gradient(800px 300px at 20% 0%, rgba(124,60,255,.18), transparent 60%),
              radial-gradient(800px 300px at 85% 20%, rgba(45,226,255,.12), transparent 60%),
              rgba(12,6,32,.92);
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
}
.torneio-modal-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.torneio-modal-title{ font-weight: 900; letter-spacing: .4px; color: #efeaff; }
.torneio-modal-sub{ font-size: 12px; font-weight: 600; opacity: .8; margin-top: 2px; }
.torneio-modal-close{
  background: rgba(255,255,255,.08);
  color: #efeaff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 900;
}
.torneio-modal-body{ height: calc(100% - 54px); }
.torneio-iframe{ width: 100%; height: 100%; border: 0; background: transparent; }

.logo-container img {
  width: 160px;
  position: relative;
  z-index: 5;
}

.alchemy-circle {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  filter: drop-shadow(0 0 10px #a67aff) drop-shadow(0 0 20px #cfaeff);
}

.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(200, 150, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.outer-ring {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 10px rgba(200, 150, 255, 0.4), 0 0 25px rgba(180, 130, 255, 0.2);
  animation: rotateClockwise 25s linear infinite;
}

.inner-ring {
  width: 180px;
  height: 180px;
  box-shadow: 0 0 15px rgba(220, 180, 255, 0.3), inset 0 0 10px rgba(200, 150, 255, 0.4);
  animation: rotateCounter 35s linear infinite;
}

.symbols {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  font-size: 24px;
  color: rgba(240, 220, 255, 0.4);
  text-shadow: 0 0 6px #d8a8ff, 0 0 12px #b078ff;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: rotateSymbols 60s linear infinite;
  pointer-events: none;
}

@keyframes rotateClockwise { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rotateCounter { 0% { transform: translate(-50%, -50%) rotate(360deg); } 100% { transform: translate(-50%, -50%) rotate(0deg); } }
@keyframes rotateSymbols { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(-360deg); } }

.dialog-box {
  background: rgba(20, 10, 40, 0.5);
  backdrop-filter: blur(8px);
  padding: 0.8rem 2.2rem;
  border-radius: 16px;
  border: 1px solid rgba(180, 130, 255, 0.6);
  position: absolute;
  right: -320px;
  top: 45px;
  font-size: 1rem;
  color: #ffffff;
  width: 380px;
  height: 80px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 0 10px rgba(180, 130, 255, 0.6);
  z-index: 1;
  direction: rtl;
  unicode-bidi: plaintext;
  animation: glowBox 4s ease-in-out infinite alternate;
}

@keyframes glowBox {
  from { box-shadow: 0 0 10px rgba(180,130,255,0.6); }
  to { box-shadow: 0 0 20px rgba(220,180,255,0.8); }
}

h1 {
  margin-top: 2.5rem;
  font-size: 1.9rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
  background: linear-gradient(90deg, #cc59d2, #a678ff, #6e00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 8px #b078ff99, 0 0 12px #6e00ff55;
  font-weight: 700;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
  margin-bottom: 2rem;
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
}

.button-main {
  background: linear-gradient(135deg, #9e4eff, #cc59d2);
  color: white;
  font-weight: bold;
  border: 2px solid #ffffff66;
  box-shadow: 0 0 12px #cc59d2, 0 0 8px #9e4eff inset;
  padding: 1rem 2.5rem;
  border-radius: 40px;
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: relative;
  z-index: 2;
  outline: 3px solid #ffffff88;
  outline-offset: 4px;
}

@keyframes pulseGlow {
  from { box-shadow: 0 0 20px #fff5, 0 0 15px inset; }
  to { box-shadow: 0 0 30px #ffffffbb, 0 0 20px inset; }
}

.button-main:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #ffffffaa, 0 0 10px #cc59d2 inset;
  animation: pulseGlow 1.5s infinite alternate;
}

.button-download {
  background: linear-gradient(145deg, #6b30ff, #8d40e0);
  color: white;
  padding: 0.9rem 2.4rem;
  margin-top: 1rem;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    4px 4px 12px rgba(0, 0, 0, 0.6),
    -4px -4px 8px rgba(255, 255, 255, 0.08),
    0 0 12px #a043e977 inset;
  font-size: 1.2rem;
  font-weight: bold;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transform: translateY(0);
  outline: 3px solid #ffffff88;
  outline-offset: 4px;
}

.button-download:hover {
  background: linear-gradient(145deg, #7b48ff, #b456ff);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.6),
    0 0 16px #ffffff99,
    inset 0 0 10px #b456ff;
  transform: translateY(-2px);
}

.mascotes {
  position: relative;
  z-index: 2;
  transform: translateY(-30px);
}

.mascotes p { font-size: 1.2rem; }

.mascotes img {
  width: 70px;
  height: 70px;
  margin: 0.5rem;
  border-radius: 50%;
  border: 2px solid #ffffff55;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

@media (max-width: 600px) {
  h1 { font-size: 1.5rem; }
  .button-main, .button-download, .botao-android {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
  }
}

.mascotes img:hover {
  transform: scale(1.15);
  box-shadow: 0 0 12px #ffffffaa;
  animation: spinScale 0.6s ease-out forwards;
}

@keyframes spinScale { to { transform: scale(1.2) rotate(10deg); } }

.descricao-mascote {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  margin-top: 0.5rem;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1rem;
  background: rgba(0, 0, 0, 0.4);
  padding: 1rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 2;
}

.button-main:focus,
.button-download:focus { outline: 3px solid #ffffff88; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.social {
  position: fixed;
  top: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 9999;
}

.social a {
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
  border-radius: 50%;
  backdrop-filter: blur(8px);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social a:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.social img { width: 24px; height: 24px; }

@keyframes rotateCircle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.pacotes-container {
  display: none;
  margin-top: 40px;
  text-align: center;
  z-index: 3;
  position: relative;
}

.pacote {
  display: inline-block;
  width: 200px;
  margin: 15px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #8a2be2;
  border-radius: 15px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s;
}

.pacote:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.05); }
.pacote h3 { margin: 10px 0; color: #dabfff; }

.pacote-info {
  display: none;
  margin-top: 20px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #b480ff;
}

.pacote-info h2 { color: #ffffff; }
.pacote-info p { color: #ccc; margin: 10px 0; }

.buy-button {
  margin-top: 15px;
  padding: 10px 20px;
  background: #b480ff;
  border: none;
  color: #fff;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
}
.buy-button:hover { background: #d4a5ff; }

.android-button {
  background: linear-gradient(145deg, #3c2a5f, #5a3c88);
  opacity: 0.6;
  cursor: not-allowed;
  position: relative;
  box-shadow:
    2px 2px 8px rgba(0, 0, 0, 0.4),
    -2px -2px 6px rgba(255, 255, 255, 0.05),
    inset 0 0 6px #6f4ca577;
}

.android-button .soon-text {
  display: block;
  font-size: 0.8rem;
  color: #ffffffaa;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.9rem 2.4rem;
  margin-top: 1rem;
  transition: all 0.3s ease;
  transform: translateY(0);
  outline: 3px solid #ffffff88;
  outline-offset: 4px;
}

.android-button:hover {
  transform: none;
  box-shadow:
    2px 2px 8px rgba(0, 0, 0, 0.4),
    -2px -2px 6px rgba(255, 255, 255, 0.05),
    inset 0 0 6px #6f4ca577;
}

.botao-container { display: flex; flex-direction: column; align-items: center; }

.botao-android {
  background: linear-gradient(145deg, #5a4d9d, #342c6a);
  color: white;
  padding: 0.9rem 2.4rem;
  margin-top: 1rem;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 12px rgba(140, 130, 255, 0.3);
  font-size: 1.2rem;
  font-weight: bold;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transform: translateY(0);
  outline: 3px solid #ffffff88;
  outline-offset: 4px;
}

.botao-android:hover {
  background: linear-gradient(145deg, #7b48ff, #b456ff);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.6),
    0 0 16px #ffffff99,
    inset 0 0 10px #b456ff;
  transform: translateY(-2px);
}

.botao-android.disabled {
  filter: grayscale(80%) brightness(0.7);
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
  cursor: not-allowed;
}

.titulo-mascotes {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -150%);
  font-size: 16px;
  color: #ccc;
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
  margin: 0;
}

.em-breve {
  font-size: 12px;
  color: #888;
  font-style: italic;
  opacity: 0.6;
}

.opcoes-download,
.opcoes-download-mobile {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(90, 70, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  padding: 20px;
  border-radius: 12px;
  animation: fadeIn 0.3s ease-in-out;
  z-index: 10;
}

.opcoes-download button,
.opcoes-download-mobile button {
  padding: 6px 6px;
  margin-top: 9px;
  font-size: 1rem;
  font-weight: bold;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  background: linear-gradient(145deg, #6b30ff, #8d40e0);
  color: white;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  width: 100%;
  box-shadow:
    4px 4px 12px rgba(0, 0, 0, 0.6),
    -4px -4px 8px rgba(255, 255, 255, 0.08),
    0 0 12px #a043e977 inset;
  transform: translateY(0);
  outline: 3px solid #ffffff88;
  outline-offset: 4px;
}

.opcoes-download button:hover,
.opcoes-download-mobile button:hover {
  background: linear-gradient(145deg, #7b48ff, #b456ff);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.6),
    0 0 16px #ffffff99,
    inset 0 0 10px #b456ff;
  transform: translateY(-2px);
}

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

.botoes-pacote {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px;
  margin-top: 20px;
}

.botoes-pacote button { width: 100% !important; display: block; }

.buy-button,
.duvidas-button {
  background: linear-gradient(135deg, #7b5aff, #9b80ff);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 10;
}

.buy-button:hover,
.duvidas-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(123, 90, 255, 0.3);
}

.duvidas-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #9b80ff;
  backdrop-filter: blur(6px);
}

.livro-mistico-botao {
  position: fixed;
  display: inline-block;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  cursor: pointer;
  z-index: 10;
  text-shadow: 0 0 10px #a78bfa, 0 0 20px #c084fc;
  filter: drop-shadow(0 0 8px #a78bfa);
  animation: pulseLivro 2s infinite;
}

@keyframes pulseLivro {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.1); }
}

.livro-container {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeZoomIn 0.6s ease forwards;
}

@keyframes fadeZoomIn {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

.livro-mistico {
  background: url('https://cdn.tebex.io/store/990188/templates/146833/assets/aeb4c49a9d3610f5b3c7b51d7c0d60a5729a3470.png') center/cover no-repeat;
  width: 90%;
  max-width: 800px;
  height: 580px;
  border-radius: 16px;
  box-shadow: 0 0 40px #a78bfa;
  padding: 8%;
  padding-right: 10%;
  padding-left: 8%;
  padding-top: 13%;
  padding-bottom: 10%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.tooltip-livro {
  visibility: hidden;
  background-color: rgba(30, 30, 60, 0.9);
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 6px 12px;
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 0.9rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.livro-mistico-botao:hover .tooltip-livro { visibility: visible; opacity: 1; }

.pagina-historia {
  position: relative;
  width: 550px;
  height: calc(100% - 100px);
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid #a78bfa;
  box-shadow: 0 0 20px #a78bfa77;
  border-radius: 16px;
  margin-bottom: 10px;
  padding: 20%;
  backdrop-filter: blur(4px);
  flex: 1;
  overflow-y: hidden;
  overflow-x: hidden;
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: left;
  line-height: 1.6;
  padding-right: 10%;
  padding-left: 10%;
  padding-top: 5%;
  padding-bottom: 10%;
  word-break: break-word;
}

.fala { display: flex; align-items: flex-start; gap: 16px; }

.avatar-mascote {
  width: 64px;
  height: 64px;
  border-radius: 100%;
  object-fit: contain;
  border: 2px solid #fff;
  box-shadow: 0 0 10px #fff5;
  animation: flutuarAvatar 3s ease-in-out infinite;
}

@keyframes flutuarAvatar {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

#textoHistoria { white-space: pre-wrap; word-break: break-word; }

.controles-livro {
  background: none;
  box-shadow: none;
  border: none;
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0 20px;
}

.controles-livro button {
  background-color: #6a5acd;
  border: none;
  padding: 10px 20px;
  color: white;
  font-weight: bold;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.3s ease;
}
.controles-livro button:hover {
  background: linear-gradient(145deg, #7b68ee, #9a8fff);
  transform: scale(1.05);
}

.founder-info {
  background: rgba(90, 70, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  color: #fff;
  font-size: 1rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 12px rgba(150, 100, 255, 0.3);
  animation: fadeIn 0.5s ease-in-out;
}

.founder-info ul { margin: 8px 0 12px 20px; }

.discord-btn {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
}
.discord-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(88, 101, 242, 0.6);
}

.popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(10, 0, 30, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease forwards;
}

.popup-box {
  background: rgba(50, 30, 100, 0.95);
  border: 2px solid rgba(200, 150, 255, 0.4);
  border-radius: 16px;
  padding: 24px;
  max-width: 500px;
  width: 90%;
  color: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  text-align: center;
  box-shadow: 0 0 25px rgba(180, 100, 255, 0.6);
  animation: scaleIn 0.3s ease forwards;
}

.popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 20px;
  cursor: pointer;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.popup-close:hover { background: rgba(255,255,255,0.25); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ================================
   GEARFRIENDS TECH LAYER (FUSÃO)
   (grid + scanline + orbes) — usado pelo y.js
================================ */

/* Grade tecnológica suave */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.22;
  mix-blend-mode: screen;
  mask-image: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.9), transparent 70%);
}

/* Scanline global */
.tech-scanline{
  position: fixed;
  left: 0; right: 0;
  top: -80px;
  height: 70px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
  background: linear-gradient(to bottom, transparent, rgba(45,226,255,0.18), transparent);
  animation: techScan 7.5s linear infinite;
  filter: blur(0.2px);
}
@keyframes techScan{
  0% { transform: translateY(-120px); }
  100% { transform: translateY(120vh); }
}

/* Orbes místicas */
.gf-orb{
  position: fixed;
  top: -90px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.78;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 14%, rgba(110,0,255,0.65) 35%, rgba(204,89,210,0.35) 56%, rgba(0,0,0,0) 72%),
    radial-gradient(circle at 70% 70%, rgba(45,226,255,0.35), rgba(0,0,0,0) 60%);
  box-shadow:
    0 0 10px rgba(166,120,255,0.45),
    0 0 18px rgba(45,226,255,0.22),
    0 0 25px rgba(204,89,210,0.22);
  border: 2px solid rgba(255,255,255,0.25);
  animation-name: orbFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes orbFall{
  0%   { transform: translateY(-90px) translateX(0) rotate(0deg); }
  12%  { transform: translateY(8vh) translateX(10px) rotate(40deg); }
  25%  { transform: translateY(25vh) translateX(-10px) rotate(100deg); }
  50%  { transform: translateY(55vh) translateX(12px) rotate(180deg); }
  75%  { transform: translateY(82vh) translateX(-8px) rotate(280deg); }
  100% { transform: translateY(115vh) translateX(0) rotate(360deg); }
}

/* Respeita usuários que preferem menos animação */
@media (prefers-reduced-motion: reduce) {
  .tech-scanline, .gf-orb { animation: none !important; }
  html::before{ opacity: 0.12; }
}

/* ============================================================
   ✅ ADD-ON
   Campeonato + efeitos (sem quebrar o resto)
============================================================ */

:root{
  --gf-text:#efeaff;
  --gf-muted:#b8aee6;
  --gf-card: rgba(18, 9, 42, .72);
  --gf-stroke: rgba(255,255,255,.12);
  --gf-neon:#7c3cff;
  --gf-neon2:#2de2ff;
  --gf-good:#2cff9a;
  --gf-warn:#ffd66b;
  --gf-bad:#ff4d7d;
}

/* ====== TORNEIO (INDEX) ====== */
.torneio-publico-wrap{
  width: min(1120px, 94vw);
  margin: 18px auto 0;
  text-align: left;
  position: relative;
  z-index: 2;
  display: none;
  animation: gfTourFade .22s ease-out;
}
@keyframes gfTourFade{
  from{opacity:0; transform: translateY(10px)}
  to{opacity:1; transform: translateY(0)}
}

/* Card master */
.torneio-card{
  position: relative;
  background:
    radial-gradient(900px 500px at 85% 20%, rgba(31,227,255,.14), transparent 55%),
    radial-gradient(1000px 700px at 40% 0%, rgba(124,60,255,.18), transparent 58%),
    radial-gradient(900px 700px at 55% 120%, rgba(255,45,154,.10), transparent 60%),
    var(--gf-card);
  border: 1px solid var(--gf-stroke);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35),
    0 18px 40px rgba(0,0,0,.55),
    0 0 22px rgba(124,60,255,.14);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

/* Scanline SOMENTE dentro do card do torneio */
.torneio-card::after{
  content:"";
  position:absolute;
  left: 0; right: 0;
  top: -80px;
  height: 70px;
  pointer-events:none;
  opacity:.50;
  background: linear-gradient(to bottom, transparent, rgba(45,226,255,0.16), transparent);
  animation: tourScan 7.5s linear infinite;
  filter: blur(.2px);
  z-index: 0;
}
@keyframes tourScan{
  0% { transform: translateY(-120px); }
  100% { transform: translateY(120%); }
}

.torneio-hd{
  position: relative;
  z-index: 1;
  padding: 14px 16px 12px;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(7,0,21,.70), rgba(7,0,21,.35), rgba(7,0,21,0));
}

.torneio-title{
  font-weight: 900;
  letter-spacing: .7px;
  margin: 0;
  font-size: 16px;
  color: var(--gf-text);
  text-shadow: 0 0 18px rgba(124,60,255,.35);
}
.torneio-sub{
  font-size: 12px;
  color: var(--gf-muted);
  margin-top: 4px;
}
.torneio-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

/* Select do torneio */
.torneio-select{
  background: rgba(12,6,32,.85);
  color: var(--gf-text);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 40px;
  outline: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}

.torneio-bd{
  position: relative;
  z-index: 1;
  padding: 14px 16px 18px;
}
.torneio-grid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 14px;
}
@media (max-width: 980px){
  .torneio-grid{ grid-template-columns: 1fr; }
}

/* Painéis internos */
.torneio-panel{
  position: relative;
  background:
    radial-gradient(900px 200px at 30% 0%, rgba(124,60,255,.14), transparent 55%),
    rgba(12,6,32,.62);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 10px 22px rgba(0,0,0,.25);
}

/* Scanline SOMENTE dentro de cada painel */
.torneio-panel::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-60px;
  height:55px;
  pointer-events:none;
  opacity:.28;
  background: linear-gradient(to bottom, transparent, rgba(45,226,255,0.14), transparent);
  animation: panelScan 9s linear infinite;
}
@keyframes panelScan{
  0% { transform: translateY(-120px); }
  100% { transform: translateY(130%); }
}

.torneio-panel-h{
  position: relative;
  z-index: 1;
  padding: 12px 12px 10px;
  font-weight: 900;
  letter-spacing: .6px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background: linear-gradient(180deg, rgba(7,0,21,.55), rgba(7,0,21,.15));
}
.torneio-panel-b{
  position: relative;
  z-index: 1;
  padding: 12px;
}

/* Pills (status) */
.torneio-pill{
  font-size: 12px;
  color: var(--gf-muted);
  border: 1px solid rgba(255,255,255,.16);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(12,6,32,.85);
  white-space: nowrap;
}
.torneio-pill.good{ border-color: rgba(44,255,154,.30); color: #baffdf; }
.torneio-pill.warn{ border-color: rgba(255,214,107,.30); color: #ffe8a8; }
.torneio-pill.bad{ border-color: rgba(255,77,125,.30); color: #ffc0d0; }

/* ==========================
   TABELA (PONTUAÇÃO)
   IMPORTANTE: o scroll real está no TBODY
========================== */
.torneio-table{ width:100%; border-collapse:collapse; font-size:13px; }
.torneio-table th, .torneio-table td{
  padding: 10px 10px;
  line-height: 20px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  text-align: left;
}
.torneio-table th{
  color: #dcd2ff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* Header fixo */
.torneio-table thead, 
.torneio-table tbody{ display:block; }
.torneio-table thead tr{ display:table; width:100%; table-layout:fixed; }
.torneio-table tbody{
  display:block;
  max-height: 240px;      /* ~5-6 linhas (ajuste fino) */
  overflow-y: auto;
  overflow-x: hidden;
}
.torneio-table tbody tr{
  display:table;
  width:100%;
  table-layout:fixed;
}
.torneio-table tr:hover td{ background: rgba(255,255,255,0.05); }

/* Container (se você quiser que o scroll migre pro wrap no futuro) */
.torneio-table-wrap{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(12,6,32,.35);
  overflow: hidden; /* mantém borda bonita */
}

/* sticky header (funciona com display:block) */
.torneio-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(12,6,32,.92);
  backdrop-filter: blur(8px);
}

/* Partidas */
.torneio-matches{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.torneio-match{
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 10px;
  background:
    radial-gradient(900px 200px at 30% 0%, rgba(124,60,255,.14), transparent 55%),
    rgba(12,6,32,.78);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 10px 18px rgba(0,0,0,.25);
}
.torneio-match-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom: 8px;
  font-weight: 900;
  font-size: 12px;
  opacity: .95;
}
.torneio-slot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(6,2,20,0.70);
}
.torneio-slot.winner{
  border-color: rgba(44,255,154,.45);
  box-shadow: 0 0 0 2px rgba(44,255,154,.12) inset;
}
.torneio-mono{ font-family: ui-monospace, Menlo, Consolas, monospace; }
.torneio-muted{ color: var(--gf-muted); opacity: .92; }
.torneio-small{ font-size: 12px; opacity: .85; margin-top: 10px; }

/* Accordion (histórico / resultado final) */
.accItem{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(12,6,32,.70);
  margin-top: 12px;
}
.accHead{
  padding: 10px 12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  cursor:pointer;
  user-select:none;
  background: linear-gradient(180deg, rgba(7,0,21,.35), rgba(7,0,21,.12));
}
.accHead:hover{ background: rgba(255,255,255,0.05); }
.accBody{
  display:none;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.accItem.open .accBody{ display:block; }

/* Histórico com scroll (se tiver muita coisa) */
#gfHistory{
  max-height: 340px;
  overflow: auto;
  padding-right: 6px;
}

/* Acessibilidade / reduzir animações */
@media (prefers-reduced-motion: reduce){
  .torneio-card::after,
  .torneio-panel::after{ animation:none !important; }
  html::before{ opacity: 0.12; }
}

/* ============================================================
   ✅ SCROLLBAR GEARFRIENDS (bonita e integrada)
   IMPORTANTE: aplica no TBODY (scroll real), no WRAP e no HISTORY
============================================================ */

/* Firefox */
.torneio-table tbody,
.torneio-table-wrap,
#gfHistory{
  scrollbar-width: thin;
  scrollbar-color: rgba(124,60,255,.78) transparent;
}

/* Chrome / Edge / Safari */
.torneio-table tbody::-webkit-scrollbar,
.torneio-table-wrap::-webkit-scrollbar,
#gfHistory::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

.torneio-table tbody::-webkit-scrollbar-track,
.torneio-table-wrap::-webkit-scrollbar-track,
#gfHistory::-webkit-scrollbar-track{
  background: transparent; /* ✅ transparente */
  border-radius: 999px;
}

.torneio-table tbody::-webkit-scrollbar-thumb,
.torneio-table-wrap::-webkit-scrollbar-thumb,
#gfHistory::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(110,0,255,.82),
    rgba(124,60,255,.70),
    rgba(45,226,255,.52)
  );
  border: 2px solid rgba(12,6,32,.70); /* mais escuro p/ combinar */
  box-shadow:
    inset 0 0 10px rgba(0,0,0,.25),
    0 0 10px rgba(124,60,255,.10);
}

.torneio-table tbody::-webkit-scrollbar-thumb:hover,
.torneio-table-wrap::-webkit-scrollbar-thumb:hover,
#gfHistory::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(
    180deg,
    rgba(110,0,255,.92),
    rgba(124,60,255,.82),
    rgba(45,226,255,.62)
  );
  border-color: rgba(12,6,32,.82);
}

/* ===== Scrollbar corner (correto) ===== */
.torneio-table tbody::-webkit-scrollbar-corner,
.torneio-table-wrap::-webkit-scrollbar-corner,
#gfHistory::-webkit-scrollbar-corner{
  background: transparent;
}

/* ===== Variáveis (SEMPRE separado!) ===== */
:root{
  --px-cyan: rgba(45,226,255,.95);
  --px-cyan2: rgba(45,226,255,.35);
  --px-purple: rgba(124,60,255,.95);
  --px-pink: rgba(204,89,210,.75);
  --px-bg: rgba(12,6,32,.74);
  --px-bg2: rgba(6,2,20,.66);
  --px-stroke: rgba(255,255,255,.12);
  --px-soft: rgba(255,255,255,.08);
}

/* Tipografia tech só nos títulos */
.gf-tech-font{
  font-family: "Orbitron", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* ===== Dock Pokedex (topo) ===== */
.gf-dock{
  width: min(1120px, 94vw);
  margin: 14px auto 10px;
  position: relative;
  z-index: 3;
}

.gf-dock-card{
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--px-stroke);
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(45,226,255,.12), transparent 60%),
    radial-gradient(900px 320px at 95% 40%, rgba(124,60,255,.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    var(--px-bg);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25),
    0 18px 40px rgba(0,0,0,.55),
    0 0 22px rgba(45,226,255,.10);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

/* header com “placa” estilo pokedex */
.gf-dock-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(7,0,21,.70), rgba(7,0,21,.28), rgba(7,0,21,0));
}

.gf-dock-title{
  display:flex;
  align-items:baseline;
  gap:10px;
  text-align:left;
}

.gf-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(45,226,255,.25);
  background: rgba(12,6,32,.72);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .5px;
  box-shadow: 0 0 14px rgba(45,226,255,.12);
}

.gf-badge .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: rgba(45,226,255,.95);
  box-shadow: 0 0 12px rgba(45,226,255,.55);
}

.gf-dock-sub{
  font-size: 12px;
  color: rgba(255,255,255,.76);
  margin-top: 4px;
  text-align:left;
}

/* grid de ações */
.gf-actions{
  padding: 14px;
  display:grid;
  grid-template-columns: 1.2fr 2.8fr;
  gap: 12px;
}
@media (max-width: 920px){
  .gf-actions{ grid-template-columns: 1fr; }
}

/* card ip */
.gf-ip{
  background: var(--px-bg2);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 14px;
  text-align:left;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 10px 22px rgba(0,0,0,.22);
}
.gf-ip label{
  display:block;
  font-size: 12px;
  letter-spacing:.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  margin-bottom: 8px;
}
.gf-ip-row{
  display:flex;
  gap: 10px;
  align-items:center;
}
.gf-ip-code{
  flex: 1;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,.92);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gf-mini{
  font-size: 12px;
  margin-top: 10px;
  color: rgba(255,255,255,.70);
}

/* botões do dock */
.gf-btns{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-content:start;
}
@media (max-width: 920px){
  .gf-btns{ grid-template-columns: 1fr; }
}
.gf-btn{
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(800px 200px at 30% 0%, rgba(45,226,255,.12), transparent 60%),
    radial-gradient(800px 200px at 90% 90%, rgba(124,60,255,.16), transparent 60%),
    rgba(12,6,32,.70);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 12px 12px;
  cursor:pointer;
  text-align:left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 10px 18px rgba(0,0,0,.22);
  position: relative;
  z-index: 1;
  outline: 3px solid transparent;
  outline-offset: 4px;
}
.gf-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(45,226,255,.22);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 16px 26px rgba(0,0,0,.35), 0 0 18px rgba(45,226,255,.10);
}
.gf-btn:focus{ outline: 3px solid rgba(255,255,255,.35); }

.gf-btn-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.gf-btn-title{
  font-weight: 1000;
  letter-spacing: .4px;
}
.gf-btn-desc{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
  line-height: 1.35;
}
.gf-chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
}

/* Social dock (ícones) - mantém seu bloco .social funcionando também */
.gf-socialbar{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
}
.gf-socialbar a{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(8px);
  transition: transform .18s ease, box-shadow .18s ease;
}
.gf-socialbar a:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(45,226,255,.12);
}
.gf-socialbar img{ width: 20px; height: 20px; }

/* ===== Seções: Notícias & Suporte ===== */
.gf-sections{
  width: min(1120px, 94vw);
  margin: 12px auto 26px;
  position: relative;
  z-index: 3;
  display:grid;
  grid-template-columns: 1.6fr .9fr;
  gap: 12px;
}
@media (max-width: 980px){
  .gf-sections{ grid-template-columns: 1fr; }
}

.gf-panel{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(124,60,255,.14), transparent 60%),
    radial-gradient(900px 260px at 85% 40%, rgba(45,226,255,.10), transparent 60%),
    rgba(12,6,32,.72);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 18px 40px rgba(0,0,0,.45);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.gf-panel-h{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  background: linear-gradient(180deg, rgba(7,0,21,.60), rgba(7,0,21,.15));
  text-align:left;
}
.gf-panel-h b{ letter-spacing:.5px; }

.gf-panel-b{
  padding: 14px;
  text-align:left;
}

.gf-news{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 14px;
  align-items:stretch;
}
@media (max-width: 720px){
  .gf-news{ grid-template-columns: 1fr; }
}

.gf-news-img{
  width: 100%;
  height: 160px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.gf-news-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.05) contrast(1.02);
}

.gf-news-title{
  font-weight: 1000;
  font-size: 16px;
  color: rgba(255,255,255,.95);
}
.gf-news-meta{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}
.gf-news-text{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.82);
  line-height: 1.45;
}

/* Botão “abrir” dentro da notícia/suporte */
.gf-cta{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(145deg, rgba(124,60,255,.70), rgba(45,226,255,.20));
  color: #fff;
  font-weight: 1000;
  cursor:pointer;
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gf-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(124,60,255,.18);
}

/* ===== Modal padrão (voto, giftcard, etc) ===== */
.gf-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display:none;
}
.gf-modal.open{ display:block; }

.gf-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(7px);
}

.gf-modal-card{
  position: relative;
  width: min(720px, calc(100% - 26px));
  margin: 10vh auto 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(800px 300px at 20% 0%, rgba(124,60,255,.20), transparent 60%),
    radial-gradient(800px 300px at 85% 30%, rgba(45,226,255,.12), transparent 60%),
    rgba(12,6,32,.92);
  box-shadow: 0 30px 80px rgba(0,0,0,.68);
  overflow:hidden;
}

.gf-modal-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.gf-modal-h b{ letter-spacing: .6px; }

.gf-x{
  background: rgba(255,255,255,.08);
  color: #efeaff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 8px 12px;
  cursor:pointer;
  font-weight: 1000;
}

.gf-modal-b{
  padding: 14px;
  text-align:left;
}

/* Form */
.gf-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 640px){
  .gf-form{ grid-template-columns: 1fr; }
}
.gf-field label{
  display:block;
  font-size: 12px;
  letter-spacing:.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  margin-bottom: 6px;
}
.gf-input{
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  outline: none;
}
.gf-input:focus{
  border-color: rgba(45,226,255,.26);
  box-shadow: 0 0 0 2px rgba(45,226,255,.10);
}

.gf-payrow{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  margin-top: 12px;
  flex-wrap: wrap;
}
.gf-paybtn{
  background: linear-gradient(135deg, rgba(45,226,255,.95), rgba(255,235,59,.78));
  color: #080012;
  border: 2px solid rgba(255,255,255,.55);
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 1000;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gf-paybtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(45,226,255,.16);
}

.gf-note{
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 12px;
  color: rgba(255,255,255,.85);
  line-height: 1.45;
}
.gf-note b{ color: rgba(255,255,255,.95); }

/* Lista de links (voto) */
.gf-links{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 640px){
  .gf-links{ grid-template-columns: 1fr; }
}
.gf-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gf-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(124,60,255,.14);
}

/* Toast */
.gf-toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 999999;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(12,6,32,.90);
  color: rgba(255,255,255,.92);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  display:none;
}
.gf-toast.show{
  display:block;
  animation: gfToastIn .18s ease-out;
}
@keyframes gfToastIn{
  from{ opacity:0; transform: translateX(-50%) translateY(8px) }
  to{ opacity:1; transform: translateX(-50%) translateY(0) }
}

/* ===== Layout container padrão ===== */
.gf-wrap{
  width: min(1120px, 94vw);
  margin: 12px auto 22px;
  position: relative;
  z-index: 3;
}

/* Card padrão (mesma linguagem do dock/painéis) */
.gf-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(124,60,255,.12), transparent 60%),
    radial-gradient(900px 260px at 85% 40%, rgba(45,226,255,.10), transparent 60%),
    rgba(12,6,32,.72);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.gf-card-h{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(7,0,21,.60), rgba(7,0,21,.15));
  text-align:left;
}
.gf-card-b{ padding: 14px; }

/* Grid de CTAs */
.gf-cta-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}
@media (max-width: 920px){
  .gf-cta-grid{ grid-template-columns: 1fr; }
}

/* ===== FIX: nada decorativo pode capturar clique ===== */
body::before,
body::after,
html::before,
.stars,
.tech-scanline,
.gf-orb{
  pointer-events: none !important;
}

/* ===== FIX: botões sempre clicáveis ===== */
.gf-btn,
#gfVoteBtn,
#gfGiftBtn{
  position: relative;
  z-index: 50;
}


/* ============================================================
   ✅ FIX: botões novos vivos (igual antigos) + antigos "dentro" da caixa
   Cole no FINAL do s.css
============================================================ */

/* --------- 1) Botões NOVOS (gf-btn) com visual dos botões antigos --------- */

.gf-btn{
  /* estilo “botão antigo”: borda + glow + outline */
  border: 2px solid rgba(255,255,255,.40);
  outline: 3px solid #ffffff88;
  outline-offset: 4px;

  background: linear-gradient(135deg, #9e4eff, #cc59d2);
  box-shadow:
    0 0 12px #cc59d2,
    0 0 8px #9e4eff inset,
    4px 4px 12px rgba(0,0,0,.55);

  color: #fff;
  border-radius: 22px;
  text-align: center;
  padding: 16px 16px;
}

.gf-btn:hover{
  transform: translateY(-2px);
  background: linear-gradient(135deg, #7b48ff, #b456ff);
  box-shadow:
    0 0 16px #ffffff99,
    0 0 18px rgba(45, 226, 255, 0.35),
    inset 0 0 10px #b456ff,
    0 6px 14px rgba(0,0,0,.6);
}

.gf-btn:focus{
  outline: 3px solid #ffffffbb;
  outline-offset: 4px;
}

.gf-btn-top{
  justify-content: center;
}

.gf-btn-title{
  font-weight: 900;
  letter-spacing: .4px;
}

.gf-btn-desc,
.gf-chip{
  display: none; /* menu compacto, sem texto extra */
}

/* Dá “variação viva” entre os botões novos (se não tiver classes específicas) */
.gf-btns .gf-btn:nth-child(6n + 1){ background: linear-gradient(145deg, #2f7cff, #6b30ff); }
.gf-btns .gf-btn:nth-child(6n + 2){ background: linear-gradient(135deg, #9e4eff, #cc59d2); }
.gf-btns .gf-btn:nth-child(6n + 3){ background: linear-gradient(145deg, #6b30ff, #8d40e0); }
.gf-btns .gf-btn:nth-child(6n + 4){ background: linear-gradient(145deg, #4aa3ff, #b456ff); }
.gf-btns .gf-btn:nth-child(6n + 5){ background: linear-gradient(145deg, #7b48ff, #b456ff); }
.gf-btns .gf-btn:nth-child(6n + 6){ background: linear-gradient(145deg, #9b80ff, #7b5aff); }

/* Hover consistente nas variações */
.gf-btns .gf-btn:hover{
  filter: brightness(1.05) saturate(1.15);
}

/* Copiar IP já fica perfeito — mantém o estilo */
#gfCopyIpBtn.gf-btn{
  border-radius: 40px;
  padding: 12px 18px;
}

/* --------- 2) “Colocar” botões antigos dentro da caixa nova (visual) ---------
   Faz o bloco antigo virar a continuação do dock-card, com mesma largura e bordas.
   (Fica como uma única caixa)
------------------------------------------------------------------------- */

/* A caixa do dock fica responsável por “abraçar” */
.gf-dock-card{
  padding-bottom: 12px; /* espaço p/ encaixe */
}

/* Transforma seu bloco antigo de botões numa “seção interna” do dock */
.button-container{
  /* mesma largura e alinhamento do dock */
  width: min(1120px, 94vw);
  margin: 0 auto 18px;

  /* visual de card igual (pra parecer dentro) */
  border: 1px solid rgba(255,255,255,.12);
  border-top: none; /* emenda com o dock */
  border-radius: 0 0 18px 18px;
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(124,60,255,.14), transparent 60%),
    radial-gradient(900px 260px at 85% 40%, rgba(45,226,255,.10), transparent 60%),
    rgba(12,6,32,.72);
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25),
    0 18px 40px rgba(0,0,0,.45);

  /* “cola” visualmente abaixo do dock (tira espaço entre eles) */
  margin-top: -10px;
  padding: 14px 14px 18px;

  gap: 12px; /* organiza melhor */
}

/* Se o seu dock estiver acima, deixa os dois como “um bloco só” */
.gf-dock{
  margin-bottom: 0;
}

/* Opcional: dá uma “divisória” interna bonita */
.button-container::before{
  content:"";
  display:block;
  height: 1px;
  margin: 2px 0 14px;
  background: rgba(255,255,255,.10);
}

/* Garante que os botões antigos sigam a mesma “pegada viva” */
.button-main,
.button-download,
.button-torneio,
.botao-android{
  outline: 3px solid #ffffff88;
  outline-offset: 4px;
}

.button-main:hover,
.button-download:hover,
.button-torneio:hover,
.botao-android:hover{
  filter: saturate(1.12) brightness(1.05);
}

/* ============================================================
   ✅ GEARFRIENDS POKEDEX TECH UI (painel + botões novos) — RESTORE
   + FIX: botões novos vivos (igual antigos)
   + FIX: botões antigos visualmente “dentro” da caixa nova
   Cole no FINAL do s.css
============================================================ */

:root{
  --px-cyan: rgba(45,226,255,.95);
  --px-cyan2: rgba(45,226,255,.35);
  --px-purple: rgba(124,60,255,.95);
  --px-pink: rgba(204,89,210,.75);
  --px-bg: rgba(12,6,32,.74);
  --px-bg2: rgba(6,2,20,.66);
  --px-stroke: rgba(255,255,255,.12);
  --px-soft: rgba(255,255,255,.08);
}

/* Tipografia tech só nos títulos (se usar Orbitron) */
.gf-tech-font{
  font-family: "Orbitron", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* ===== Dock (caixa nova) ===== */
.gf-dock{
  width: min(1120px, 94vw);
  position: relative;
  z-index: 3;
}

.gf-dock-card{
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--px-stroke);
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(45,226,255,.12), transparent 60%),
    radial-gradient(900px 320px at 95% 40%, rgba(124,60,255,.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    var(--px-bg);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25),
    0 18px 40px rgba(0,0,0,.55),
    0 0 22px rgba(45,226,255,.10);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

/* Header do dock */
.gf-dock-hd{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(7,0,21,.70), rgba(7,0,21,.28), rgba(7,0,21,0));
}

.gf-dock-title{
  display:flex;
  align-items:baseline;
  gap:10px;
  width: 100%;
  text-align:left;
}

.gf-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(45,226,255,.25);
  background: rgba(12,6,32,.72);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .5px;
  box-shadow: 0 0 14px rgba(45,226,255,.12);
}

.gf-badge .dot{
  width:10px; height:10px; border-radius:50%;
  background: rgba(45,226,255,.95);
  box-shadow: 0 0 12px rgba(45,226,255,.55);
}

.gf-dock-sub{
  font-size: 12px;
  color: rgba(255,255,255,.76);
  margin-top: 4px;
  text-align:left;
}

/* Ações (IP + botões novos) */
.gf-actions{
  padding: 14px;
  display:grid;
  grid-template-columns: 1.2fr 2.8fr;
  gap: 12px;
}

@media (max-width: 920px){
  .gf-actions{ grid-template-columns: 1fr; }
}

.gf-ip{
  background: var(--px-bg2);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 14px;
  text-align:left;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 10px 22px rgba(0,0,0,.22);
}

.gf-ip label{
  display:block;
  font-size: 12px;
  letter-spacing:.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  margin-bottom: 8px;
}

.gf-ip-row{
  display:flex;
  gap: 10px;
  align-items:center;
}

.gf-ip-code{
  flex: 1;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,.92);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gf-mini{
  font-size: 12px;
  margin-top: 10px;
  color: rgba(255,255,255,.70);
}

.gf-btns{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-content:start;
}

@media (max-width: 920px){
  .gf-btns{ grid-template-columns: 1fr; }
}

/* ============================================================
   ✅ BOTÕES NOVOS (gf-btn) = VIVOS IGUAL OS ANTIGOS
============================================================ */

.gf-btn{
  border: 2px solid rgba(255,255,255,.40);
  outline: 3px solid #ffffff88;
  outline-offset: 4px;

  background: linear-gradient(135deg, #9e4eff, #cc59d2);
  box-shadow:
    0 0 12px #cc59d2,
    0 0 8px #9e4eff inset,
    4px 4px 12px rgba(0,0,0,.55);

  color: #fff;
  border-radius: 22px;
  padding: 12px 12px;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
  position: relative;
  z-index: 1;

  /* alinhamento parecido com seus botões grandes */
  text-align: center;
  font-weight: 900;
}

.gf-btn:hover{
  transform: translateY(-2px);
  background: linear-gradient(145deg, #7b48ff, #b456ff);
  box-shadow:
    0 6px 14px rgba(0,0,0,.6),
    0 0 16px #ffffff99,
    0 0 18px rgba(45, 226, 255, 0.35),
    inset 0 0 10px #b456ff;
  filter: saturate(1.12) brightness(1.05);
}

.gf-btn:focus{
  outline: 3px solid #ffffffbb;
  outline-offset: 4px;
}

/* tira “cara de card” e deixa como botão */
.gf-btn-top{ display:flex; justify-content:center; align-items:center; gap:10px; }
.gf-btn-title{ font-weight: 900; letter-spacing:.4px; }
.gf-btn-desc, .gf-chip{ display:none; }

/* variação automática pra ficar tudo vivo sem precisar mexer no HTML */
.gf-btns .gf-btn:nth-child(6n + 1){ background: linear-gradient(145deg, #2f7cff, #6b30ff); }
.gf-btns .gf-btn:nth-child(6n + 2){ background: linear-gradient(135deg, #9e4eff, #cc59d2); }
.gf-btns .gf-btn:nth-child(6n + 3){ background: linear-gradient(145deg, #6b30ff, #8d40e0); }
.gf-btns .gf-btn:nth-child(6n + 4){ background: linear-gradient(145deg, #4aa3ff, #b456ff); }
.gf-btns .gf-btn:nth-child(6n + 5){ background: linear-gradient(145deg, #7b48ff, #b456ff); }
.gf-btns .gf-btn:nth-child(6n + 6){ background: linear-gradient(145deg, #7b5aff, #9b80ff); }

/* se você tiver um botão específico de copiar IP como .gf-btn, deixa “pill” */
#gfCopyIpBtn.gf-btn{
  border-radius: 40px;
  padding: 12px 18px;
}

/* ============================================================
   ✅ FIX VISUAL: botões antigos “dentro” da caixa nova (sem mexer no HTML)
   (fica como uma caixa única emendada)
============================================================ */

.gf-dock{ margin-bottom: 0; }

/* seu bloco antigo vira a “parte de baixo” da caixa nova */
.button-container{
  width: min(1120px, 94vw);
  margin: -10px auto 18px;

  border: 1px solid rgba(255,255,255,.12);
  border-top: none;
  border-radius: 0 0 18px 18px;

  background:
    radial-gradient(900px 260px at 20% 0%, rgba(124,60,255,.14), transparent 60%),
    radial-gradient(900px 260px at 85% 40%, rgba(45,226,255,.10), transparent 60%),
    rgba(12,6,32,.72);

  backdrop-filter: blur(10px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25),
    0 18px 40px rgba(0,0,0,.45);

  padding: 14px 14px 18px;
  gap: 12px;
}

.button-container::before{
  content:"";
  display:block;
  height: 1px;
  margin: 2px 0 14px;
  background: rgba(255,255,255,.10);
}

/* ============================================================
   ✅ AJUSTE FINAL — CENTRAL COMPACTA (NÃO QUEBRA NADA)
   Transforma o dock em menu compacto
   Move IP para baixo
   Mantém seus botões grandes intactos
============================================================ */

/* Dock levemente mais compacto */
.gf-dock{
  margin: 10px auto 8px;
}

/* Remove linha secundária do header para ficar clean */
.gf-dock-sub{
  display: none;
}

/* Área interna vira coluna */
.gf-actions{
  grid-template-columns: 1fr !important;
  gap: 14px;
}

/* ============================================================
   BOTÕES GF viram menu compacto (sem competir com CTA grande)
============================================================ */

.gf-btns{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1100px){
  .gf-btns{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px){
  .gf-btns{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gf-btn{
  padding: 10px 12px;
  min-height: 46px;
  border-radius: 18px;
  text-align: center;
}

.gf-btn-top{
  justify-content: center;
}

.gf-btn-desc{
  display: none; /* remove descrição p/ ficar compacto */
}

.gf-chip{
  display: none; /* remove chip pequeno */
}

/* ============================================================
   IP CENTRALIZADO EMBAIXO (estilo botão antigo)
============================================================ */

.gf-ip{
  order: 2;
  text-align: center;
  padding: 12px;
}

.gf-ip label,
.gf-mini{
  display: none;
}

.gf-ip-row{
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.gf-ip-code{
  flex: 0 1 auto;
  min-width: min(420px, 92vw);
  text-align: center;
  border-radius: 40px;
  padding: 14px 20px;
  border: 2px solid #ffffff66;
  background: rgba(255,255,255,0.06);
  box-shadow:
    0 0 12px #cc59d2,
    0 0 8px #9e4eff inset;
  font-size: 1.05rem;
  font-weight: bold;
}

/* Botão copiar no estilo dos seus botões principais */
#gfCopyIpBtn.gf-btn{
  min-width: 170px;
  border-radius: 40px;
  border: 2px solid #ffffff66;
  background: linear-gradient(135deg, #9e4eff, #cc59d2);
  box-shadow:
    0 0 12px #cc59d2,
    0 0 8px #9e4eff inset;
  padding: 12px 18px;
}

#gfCopyIpBtn .gf-btn-title{
  font-size: 1.05rem;
  font-weight: 900;
}

/* Social dock levemente menor */
.gf-socialbar a{
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.gf-socialbar img{
  width: 18px;
  height: 18px;
}

/* ===== HUB: botões antigos + mascotes dentro da caixa ===== */
.gf-hub-body{
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* agora o button-container vira um bloco interno (sem mexer no estilo dos botões) */
.gf-hub-body .button-container{
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* mascotes embaixo centralizado */
.gf-hub-body .mascotes{
  width: 100%;
  text-align: center;
  transform: none; /* remove aquele translateY(-30px) dentro da caixa */
  margin-top: 6px;
}

/* Centraliza o título do dock no MEIO do header */
.gf-dock-hd{
  position: relative;
}

/* o bloco do título vira “centro absoluto” */
.gf-dock-title{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  justify-content: center;
  text-align: center;
}

/* ajusta o texto interno do title */
.gf-dock-title > div{
  text-align: center;
}

/* garante que os ícones continuem no lado direito */
.gf-socialbar{
  margin-left: auto;
  position: relative;
  z-index: 2;
}

/* garante que o título fique por cima do fundo e abaixo dos ícones */
.gf-dock-title{
  z-index: 1;
}

/* no mobile, volta pro fluxo normal pra não esmagar */
@media (max-width: 720px){
  .gf-dock-title{
    position: static;
    transform: none;
    margin: 0 auto;
  }
  .gf-dock-hd{
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .gf-socialbar{
    margin-left: 0;
  }
}

/* ========================= */
/* BOTÕES DO DOCK MAIS COMPACTOS */
/* ========================= */

.gf-btn{
  padding: 10px 14px !important;     /* diminui altura */
  min-height: auto !important;       /* remove altura mínima */
  border-radius: 16px;               /* levemente menor */
  font-size: 14px;                   /* texto menor */
}

/* reduz tamanho do título */
.gf-btn-title{
  font-size: 14px !important;
}

/* reduz chip (Nova guia, Cash, etc) */
.gf-chip{
  font-size: 10px !important;
  padding: 2px 6px !important;
}

/* deixa descrição menor */
.gf-btn-desc{
  font-size: 11px !important;
  margin-top: 4px !important;
}

/* aumenta espaço entre eles */
.gf-btns{
  gap: 16px !important; /* aqui você controla o espaço */
}

/* =========================
   FIX MOBILE: botões não serem cortados dentro do gf-dock
   ========================= */
@media (max-width: 720px){

  /* 1) o card não corta outlines/sombras */
  .gf-dock-card{
    overflow: visible !important;
  }

  /* 2) dá “respiro” interno para o outline caber */
  .gf-actions{
    padding: 16px 18px 18px !important;
  }

  /* 3) diminui o quanto o outline “salta pra fora” */
  .gf-btn{
    outline-offset: 2px !important;   /* era 4px */
  }

  /* 4) evita layout apertado demais */
  .gf-btns{
    gap: 14px !important;
  }
}

/* =========================
   ✅ Notícias no Dock (bonito, harmonizado, centralizado)
========================= */
.gf-news-panel{
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(124,60,255,.14), transparent 60%),
    radial-gradient(900px 260px at 85% 40%, rgba(45,226,255,.10), transparent 60%),
    rgba(12,6,32,.72);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 14px 28px rgba(0,0,0,.30);
  overflow: hidden;
}

.gf-news-inner{ padding: 12px; }

.gf-news-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.gf-news-kicker{
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.85);
}

.gf-news-meta{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.gf-news-card{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  align-items: stretch;
}

.gf-news-media{
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  min-height: 160px;
}

.gf-news-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.03);
}

.gf-news-body{
  text-align: left;
  display:flex;
  flex-direction: column;
  justify-content: center;
}

.gf-news-title{
  font-weight: 1000;
  font-size: 16px;
  color: rgba(255,255,255,.95);
  line-height: 1.2;
}

.gf-news-subtitle{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.78);
  line-height: 1.25;
}

.gf-news-text{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.85);
  line-height: 1.45;
}

.gf-news-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gf-news-btn{
  border: 2px solid rgba(255,255,255,.40);
  outline: 3px solid #ffffff88;
  outline-offset: 4px;
  background: linear-gradient(135deg, #9e4eff, #cc59d2);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}

.gf-news-btn:hover{ transform: translateY(-2px); filter: brightness(1.05) saturate(1.12); }

.gf-news-btn.ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  outline: none;
}

.gf-news-dots{
  margin-top: 10px;
  display:flex;
  justify-content: center;
  gap: 8px;
}

.gf-news-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  cursor: pointer;
}

.gf-news-dot.on{
  background: rgba(45,226,255,.85);
  border-color: rgba(45,226,255,.55);
  box-shadow: 0 0 10px rgba(45,226,255,.25);
}

/* Mobile: não corta, vira coluna */
@media (max-width: 720px){
  .gf-news-card{ grid-template-columns: 1fr; }
  .gf-news-media{ min-height: 190px; }
  .gf-news-body{ text-align: center; }
  .gf-news-actions{ justify-content: center; }
}

/* ===== Smogon Movesets ===== */
.gf-moveset-wrap{
  width: min(980px, 94vw);
  margin: 14px auto 0;
  animation: gfFadeIn .25s ease-out;
}
.gf-moveset-card{
  background: rgba(18, 9, 42, 0.82);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  box-shadow:
    0 14px 40px rgba(0,0,0,.55),
    0 0 18px rgba(124,60,255,.18),
    inset 0 0 18px rgba(45,226,255,.08);
  overflow: hidden;
}
.gf-moveset-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(90deg, rgba(124,60,255,.18), rgba(45,226,255,.10));
}
.gf-moveset-sub{ color: rgba(255,255,255,.72); font-size: 12px; margin-top:4px; }
.gf-moveset-close{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  border-radius: 12px;
  padding: 8px 12px;
  cursor:pointer;
}
.gf-moveset-form{ padding: 14px 16px; }
.gf-moveset-row{ display:flex; gap:12px; flex-wrap:wrap; }
.gf-moveset-field{ flex:1; min-width: 220px; }
.gf-moveset-field label{
  display:block; font-size: 12px;
  color: rgba(255,255,255,.78);
  margin: 0 0 6px 2px;
}
.gf-moveset-mini{ font-size: 11px; color: rgba(255,255,255,.55); margin-top:6px; }
.gf-moveset-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }
.gf-moveset-note{
  margin-top: 10px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px 12px;
  color: rgba(255,255,255,.85);
  font-size: 12px;
}
.gf-moveset-results{ padding: 0 16px 16px; }
.gf-set{
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  border-radius: 16px;
  overflow: hidden;
}
.gf-set-h{
  padding: 10px 12px;
  display:flex; justify-content:space-between; align-items:center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.gf-set-title{ font-weight: 800; letter-spacing: .2px; }
.gf-set-meta{ font-size: 12px; color: rgba(255,255,255,.70); }
.gf-set-b{ padding: 10px 12px; }
.gf-move-list{ margin: 0; padding-left: 16px; color: rgba(255,255,255,.88); }
.gf-move-list li{ margin: 6px 0; }
.gf-pill{
  display:inline-flex; gap:8px; align-items:center;
  font-size: 12px; padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.86);
}

/* ===== Fix selects (Tier/Gen) legíveis no tema roxo ===== */
.gf-moveset-card select.gf-input,
.gf-moveset-card .gf-input[type="text"],
.gf-moveset-card .gf-input[type="number"]{
  background: rgba(10, 4, 24, 0.92) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    inset 0 0 0 1px rgba(124,60,255,0.10),
    0 0 0 3px rgba(45,226,255,0.06);
  border-radius: 14px;
}

/* seta do select + padding para não “comer” texto */
.gf-moveset-card select.gf-input{
  padding-right: 42px !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.85) 50%),
    linear-gradient(135deg, rgba(255,255,255,.85) 50%, transparent 50%),
    linear-gradient(to right, rgba(255,255,255,.12), rgba(255,255,255,.12));
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 12px) 52%,
    calc(100% - 40px) 50%;
  background-size:
    6px 6px,
    6px 6px,
    1px 22px;
  background-repeat: no-repeat;
}

.gf-moveset-card select.gf-input:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

/* opções do dropdown (isso resolve “texto transparente” em muitos browsers) */
.gf-moveset-card select.gf-input option{
  background: #0a0418 !important;
  color: #ffffff !important;
}

/* foco */
.gf-moveset-card select.gf-input:focus,
.gf-moveset-card .gf-input:focus{
  outline: none;
  border-color: rgba(45,226,255,0.40) !important;
  box-shadow:
    0 0 0 4px rgba(124,60,255,0.18),
    0 0 0 1px rgba(45,226,255,0.18) inset;
}

.gf-set-b .gf-pill{
  background: linear-gradient(90deg, rgba(124,60,255,.14), rgba(45,226,255,.10));
  border-color: rgba(255,255,255,.14);
}
.gf-set-b .gf-pill b{
  color: rgba(255,255,255,.95);
}
/* ===== Botões Moveset (harmonizados com Dock roxo tech) ===== */
.gf-moveset-actions .gf-paybtn{
  background: linear-gradient(145deg, #2a0f52, #3a1b8a);
  border: 1px solid rgba(255,255,255,.16);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: .4px;
  border-radius: 18px;
  padding: 10px 18px;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow:
    0 6px 18px rgba(0,0,0,.45),
    0 0 10px rgba(124,60,255,.25),
    inset 0 0 8px rgba(45,226,255,.08);
}

.gf-moveset-actions .gf-paybtn:hover{
  background: linear-gradient(145deg, #3a1b8a, #5126b8);
  box-shadow:
    0 8px 22px rgba(0,0,0,.55),
    0 0 16px rgba(124,60,255,.45),
    inset 0 0 10px rgba(45,226,255,.15);
  transform: translateY(-2px);
}

.gf-moveset-actions .gf-paybtn:active{
  transform: translateY(0);
  box-shadow:
    0 4px 12px rgba(0,0,0,.45),
    inset 0 0 12px rgba(124,60,255,.35);
}

/* ====== EQUIPE (INDEX) — compacto e harmonioso ====== */
.gf-team-public-wrap{
  width: 100%;
  margin-top: 12px;
  animation: gfFadeIn .25s ease-out;
}

.gf-team-public-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  overflow: hidden;
}

.gf-team-public-hd{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(90deg, rgba(124,60,255,.12), rgba(45,226,255,.08));
}

.gf-team-public-sub{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

.gf-team-public-note{
  margin: 10px 12px 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.82);
  font-size: 12px;
}

/* Cargo */
.gf-role{
  margin: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow:hidden;
}

.gf-role-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.gf-role-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .25px;
}

.gf-role-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(124,60,255,.35);
}

.gf-role-count{
  font-size: 12px;
  color: rgba(255,255,255,.65);
}

/* Membros em “pills” (compacto) */
.gf-members{
  padding: 10px 12px 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gf-member{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  min-width: 160px;
}

.gf-member img{
  width: 22px;
  height: 38px;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.35));
  border-radius: 8px;
}

.gf-member b{
  font-size: 13px;
  color: rgba(255,255,255,.92);
  letter-spacing: .2px;
}


/* =========================
   FIX CRÍTICO: CSS não quebrar em outros browsers
   + Garante conteúdo acima do fundo
   Cole no FINAL do s.css
========================= */

/* separa corretamente o corner da scrollbar */
.torneio-table tbody::-webkit-scrollbar-corner,
.torneio-table-wrap::-webkit-scrollbar-corner,
#gfHistory::-webkit-scrollbar-corner{
  background: transparent;
}

/* garante que camadas decorativas NÃO fiquem na frente */
body::before,
body::after,
html::before,
.stars,
.tech-scanline,
.gf-orb{
  pointer-events: none !important;
}

/* joga os fundos pra trás de verdade */
body::before{ z-index: -3 !important; }
body::after{  z-index: -4 !important; }
html::before{ z-index: -2 !important; }
.stars{       z-index: -1 !important; }

/* garante que TODO conteúdo fique acima */
body > *{
  position: relative;
  z-index: 5;
}

/* e o dock / botões ainda acima */
.gf-dock, .gf-dock-card, .button-container,
.gf-btn, .button-main, .button-download, .button-torneio{
  position: relative;
  z-index: 10;
}

/* =========================
   FIX: remove a “segunda caixa” feia
   (button-container dentro do gf-dock-card)
========================= */
.gf-dock-card .button-container{
  width: 100%;
  margin: 12px 0 0 !important;
  padding: 0 !important;

  /* mata o “card duplicado” */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  /* mata o emendo/negativo que cria fundo esticado */
  border-radius: 0 !important;
}

.gf-dock-card .button-container::before{
  display:none !important;
}

/* se mascotes estiverem dentro, não empurra pra cima */
.gf-dock-card .mascotes{
  transform: none !important;
}

/* =========================
   ✅ Wiki Panel (abaixo do IP)
========================= */
.gf-wiki-panel{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18,9,42,.82), rgba(18,9,42,.62));
  box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 22px rgba(124,60,255,.10);
  padding: 12px;
  width: 100%;
}

.gf-wiki-panel-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.gf-wiki-panel-title{
  text-align:left;
  line-height:1.2;
}

.gf-wiki-panel-sub{
  color: rgba(255,255,255,.75);
  font-size: 12px;
  margin-top: 4px;
}

/* Master (versões) */
.gf-wiki-master{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin: 10px 0 12px;
}

.gf-wiki-masterbtn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 10px 12px;
  cursor:pointer;
  font-weight: 1000;
  display:flex;
  gap:8px;
  align-items:center;
  transition: transform .18s ease, filter .18s ease;
}
.gf-wiki-masterbtn:hover{ transform: translateY(-2px); filter: brightness(1.05) saturate(1.1); }
.gf-wiki-masterbtn.on{
  border-color: rgba(45,226,255,.35);
  box-shadow: 0 0 16px rgba(45,226,255,.12);
  background: linear-gradient(145deg, rgba(124,60,255,.55), rgba(45,226,255,.16));
}
.gf-wiki-masterbtn .ico{ width: 18px; text-align:center; }

/* Search */
.gf-wiki-search{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  margin-bottom: 10px;
}
.gf-wiki-search .gf-input{ flex: 1; }

/* Tabs */
.gf-wiki-tabs{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  justify-content:center;
  margin-bottom: 10px;
}

.gf-wiki-tab{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 10px 12px;
  cursor:pointer;
  font-weight: 1000;
  display:flex;
  gap:8px;
  align-items:center;
  transition: transform .18s ease, filter .18s ease;
}
.gf-wiki-tab:hover{ transform: translateY(-2px); filter: brightness(1.05) saturate(1.1); }
.gf-wiki-tab.on{
  border-color: rgba(124,60,255,.35);
  box-shadow: 0 0 16px rgba(124,60,255,.12);
  background: rgba(124,60,255,.10);
}
.gf-wiki-tab-ico{ width: 18px; text-align:center; }

/* Layout */
.gf-wiki-layout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 12px;
}

.gf-wiki-menu{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  overflow: hidden;
}

.gf-wiki-menu-title{
  padding: 12px;
  font-weight: 1000;
  border-bottom: 1px solid rgba(255,255,255,.10);
  text-align:left;
}

.gf-wiki-menu-list{
  padding: 10px;
  display:flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow: auto;
}

.gf-wiki-empty{
  padding: 10px;
  color: rgba(255,255,255,.70);
  text-align:center;
}

.gf-wiki-item{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 10px;
  cursor:pointer;
  text-align:left;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gf-wiki-item:hover{ transform: translateY(-2px); box-shadow: 0 0 16px rgba(124,60,255,.12); }
.gf-wiki-item.on{
  border-color: rgba(124,60,255,.35);
  background: rgba(124,60,255,.10);
}

.gf-wiki-item-row{ display:flex; gap:10px; align-items:flex-start; }
.gf-wiki-item-ico{ width: 22px; font-size: 18px; line-height: 22px; }
.gf-wiki-item-txt .t{ font-weight: 1000; }
.gf-wiki-item-txt .s{ margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.70); }

.gf-wiki-content{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  overflow: hidden;
  text-align: left;
}

.gf-wiki-head{
  padding: 12px;
  display:flex;
  gap:12px;
  align-items:center;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.gf-wiki-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size: 20px;
}

.gf-wiki-title{ font-weight: 1000; font-size: 16px; }
.gf-wiki-sub{ margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.75); }

.gf-wiki-body{
  padding: 12px;
  color: rgba(255,255,255,.88);
  line-height: 1.55;
}
.gf-wiki-body p{ margin: 0 0 10px; }
.gf-wiki-body ol, .gf-wiki-body ul{ margin: 8px 0 12px 18px; }

.gf-wiki-media{
  padding: 0 12px 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.gf-wiki-media-box{
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.gf-wiki-media-box img{
  width: 100%;
  height: auto;
  display:block;
}
.gf-wiki-media-box.video{ aspect-ratio: 16/9; }
.gf-wiki-media-box.video iframe,
.gf-wiki-media-box.video video{
  width: 100%;
  height: 100%;
  display:block;
}
.gf-wiki-media-cap{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

/* Mobile */
@media (max-width: 860px){
  .gf-wiki-layout{ grid-template-columns: 1fr; }
  .gf-wiki-menu-list{ max-height: 30vh; }
  .gf-wiki-search{ flex-direction: column; }
  .gf-wiki-search .gf-input{ width: 100%; }
}







/* ===== v8 | Wiki: botão limpar alinhado ao tema ===== */
.gf-wiki-clearbtn{
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(145deg, rgba(124,60,255,.22), rgba(45,226,255,.12));
  color: rgba(255,255,255,.96);
  border-radius: 999px;
  padding: 11px 16px;
  cursor:pointer;
  font-weight: 1000;
  white-space: nowrap;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.gf-wiki-clearbtn:hover{
  transform: translateY(-2px);
  filter: brightness(1.06) saturate(1.08);
  border-color: rgba(45,226,255,.35);
  box-shadow: 0 0 16px rgba(45,226,255,.10);
}
.gf-wiki-clearbtn:focus{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}
.gf-btn.on{
  box-shadow:
    0 6px 14px rgba(0,0,0,.6),
    0 0 16px #ffffff99,
    0 0 18px rgba(45, 226, 255, 0.35),
    inset 0 0 10px #b456ff;
  filter: saturate(1.10) brightness(1.04);
}

/* ===== v8 | Livro do Theo: visual original preservado ===== */
#livroContainer.livro-container{
  padding:18px;
  box-sizing:border-box;
}
#livroContainer .livro-mistico{
  width:min(90vw, 800px);
  height:min(580px, calc(100vh - 56px));
  max-width:800px;
  max-height:580px;
  padding:13% 10% 10% 8%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:visible;
}
#livroContainer .pagina-historia{
  position:relative;
  width:100%;
  height:calc(100% - 70px);
  margin:0;
  padding:5% 10% 86px;
  background:rgba(0,0,0,.78);
  border:2px solid rgba(167,139,250,.86);
  box-shadow:0 0 20px rgba(167,139,250,.45);
  border-radius:16px;
  backdrop-filter:blur(4px);
  flex:1;
  overflow:hidden;
  color:#fff;
  font-size:1.05rem;
  font-weight:bold;
  text-align:left;
  line-height:1.6;
  word-break:break-word;
}
#livroContainer .fala{
  display:flex;
  align-items:flex-start;
  gap:16px;
  height:100%;
}
#livroContainer #textoHistoria{
  display:block;
  flex:1;
  max-height:100%;
  overflow:auto;
  padding-right:8px;
  white-space:pre-wrap;
  word-break:break-word;
  scrollbar-width:thin;
  scrollbar-color: rgba(167,139,250,.70) rgba(255,255,255,.08);
}
#livroContainer #textoHistoria::-webkit-scrollbar{ width:8px; }
#livroContainer #textoHistoria::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 999px; }
#livroContainer #textoHistoria::-webkit-scrollbar-thumb{ background: rgba(167,139,250,.72); border-radius: 999px; }
#livroContainer .controles-livro{
  background:none;
  box-shadow:none;
  border:none;
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 28px);
  display:flex;
  justify-content:center;
  gap:12px;
  padding:0;
  flex-wrap:wrap;
}
#livroContainer .controles-livro button{
  background-color:#6a5acd;
  border:none;
  padding:10px 20px;
  color:white;
  font-weight:bold;
  border-radius:12px;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow:0 6px 16px rgba(27,12,56,.35);
}
#livroContainer .controles-livro button:hover{
  background:linear-gradient(145deg, #7b68ee, #9a8fff);
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 8px 20px rgba(27,12,56,.42);
}
#livroBtn{ z-index:9999; }
@media (max-width: 760px){
  #livroContainer.livro-container{ padding:10px; }
  #livroContainer .livro-mistico{
    width:min(100%, calc(100vw - 20px));
    height:min(92vh, 620px);
    padding:74px 20px 68px 18px;
  }
  #livroContainer .pagina-historia{
    padding:16px 16px 92px;
    font-size:1rem;
  }
  #livroContainer .fala{ gap:12px; }
  #livroContainer .avatar-mascote{ width:52px; height:52px; }
  #livroContainer .controles-livro{ gap:8px; width:calc(100% - 20px); }
  #livroContainer .controles-livro button{ min-width:86px; padding:10px 14px; }
}


/* ===== v9 | Performance extrema ===== */
:root{ --gf-body-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
html{ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body{ font-family: var(--gf-body-font); }
img{ max-width:100%; height:auto; }
.gf-wiki-panel, .gf-team-public-wrap, .gf-moveset-wrap, .torneio-publico-wrap, #livroContainer, .descricao-mascote, #gfUpdatesPanel, #gfNewsPanel{ content-visibility:auto; contain-intrinsic-size: 780px 560px; }
.gf-news-card, .gf-team-public-card, .gf-moveset-card, .torneio-card, .gf-wiki-layout, #livroContainer .livro-mistico{ contain: layout paint style; }
.gf-socialbar img, .mascotes img, .logo-container img, #livroBtn img{ user-select:none; -webkit-user-drag:none; }
@supports not (backdrop-filter: blur(4px)){
  .gf-modal-backdrop, .gf-news-panel, .gf-wiki-panel, .torneio-card, #livroContainer .pagina-historia{ backdrop-filter:none !important; }
}
@media (prefers-reduced-motion: reduce), (max-width: 900px){
  .fade-in, .logo-container, .stars::before, .stars::after, body::before, .logo-container::before, .logo-container::after{ animation:none !important; }
  .fade-in{ opacity:1 !important; transform:none !important; }
  body::before{ filter: blur(84px); opacity:.72; }
  .stars{ opacity:.48; }
  .gf-btn, .button-main, .button-download, .botao-android, .button-torneio, .gf-wiki-clearbtn, #livroContainer .controles-livro button{ transition:none !important; }
}
@media (max-width: 900px){
  .logo-container::before, .logo-container::after{ display:none; }
  body::before{ mix-blend-mode:normal; }
}

/* ===== v10 | Mobile real + menus exclusivos ===== */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

#torneioPublicoWrap[aria-hidden="true"]{ display:none !important; }

@media (max-width: 920px){
  body{
    padding: 10px 0 28px;
  }

  .logo-container{
    display:block;
    width:min(76vw, 320px);
    margin: 6px auto 0;
  }

  .logo-container img{
    width:100% !important;
    height:auto !important;
    max-width:320px;
  }

  h1{
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 0 14px;
    font-size: clamp(1.15rem, 4.6vw, 1.65rem);
    line-height: 1.35;
    max-width: 96vw;
  }

  .gf-dock{
    width:min(100vw - 16px, 1120px);
    margin: 10px auto 12px;
  }

  .gf-dock-card,
  .button-container,
  .pacotes-container,
  .pacote-info,
  .descricao-mascote,
  .torneio-publico-wrap{
    width:100%;
    max-width:100%;
  }

  .button-container{
    padding: 0 12px 10px;
    gap: 14px;
  }

  .button-main,
  .button-download,
  .botao-android,
  .button-torneio{
    width:min(100%, 440px);
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    white-space:normal;
    line-height:1.25;
  }

  .pacotes-container{
    padding: 0 4px;
  }

  .pacote{
    display:block;
    width:min(100%, 330px);
    margin: 10px auto;
  }

  .pacote-info{
    width:min(100%, 420px);
  }

  .mascotes{
    transform:none;
    margin-top: 6px;
    padding: 0 6px 8px;
  }

  .mascotes p{
    font-size: 1rem;
    line-height: 1.4;
  }

  .mascotes img{
    width:64px;
    height:64px;
    margin: .35rem;
  }

  .descricao-mascote{
    margin-top: .75rem;
    font-size: .95rem;
  }

  .gf-socialbar{
    flex-wrap:wrap;
    justify-content:flex-start;
  }

  .gf-socialbar a{
    width:36px;
    height:36px;
  }

  .gf-ip-row{
    flex-direction:column;
    align-items:stretch;
  }

  .gf-ip-row > .gf-btn{
    width:100%;
  }

  .livro-mistico-botao{
    left:auto;
    right:12px;
    top:auto;
    bottom:12px;
    transform:none;
    animation:none;
    z-index: 10001;
  }

  .livro-mistico-botao img{
    width:64px !important;
    height:64px !important;
  }

  .tooltip-livro{
    display:none;
  }
}

@media (max-width: 640px){
  .gf-dock-card{
    border-radius: 16px;
  }

  .gf-dock-hd{
    padding: 12px;
    align-items:flex-start;
  }

  .gf-dock-title{
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .gf-tech-font{
    word-break: break-word;
  }

  .gf-btn,
  .gf-wiki-clearbtn,
  .gf-news-btn,
  .gf-paybtn,
  .gf-moveset-close,
  .gf-x{
    min-height: 44px;
  }

  .gf-news-top,
  .gf-team-public-hd,
  .gf-moveset-hd,
  .gf-wiki-panel-hd{
    flex-direction:column;
    align-items:flex-start;
  }

  .gf-news-actions,
  .gf-moveset-actions,
  .gf-wiki-search{
    flex-direction:column;
    align-items:stretch;
  }

  .gf-news-actions > *,
  .gf-moveset-actions > *,
  .gf-wiki-search > *{
    width:100%;
  }

  .gf-news-card{
    grid-template-columns: 1fr;
  }

  .gf-news-media{
    min-height: 180px;
  }

  .gf-moveset-row{
    grid-template-columns: 1fr;
  }

  .gf-role-h,
  .gf-member,
  .torneio-actions{
    flex-direction:column;
    align-items:flex-start;
  }

  .torneio-select{
    width:100%;
  }
}

/* popup de boas-vindas totalmente responsivo */
#popupOverlay{
  padding: 14px !important;
  overflow: auto !important;
  align-items: flex-start !important;
}
#popupOverlay > div{
  width: min(100%, 520px) !important;
  max-width: 100% !important;
  max-height: calc(100vh - 28px) !important;
  overflow: auto !important;
  margin: 4vh auto 24px !important;
}
#popupOverlay a{
  max-width: 100%;
  word-break: break-word;
}

@media (max-width: 640px){
  #popupOverlay{
    padding: 10px !important;
  }
  #popupOverlay > div{
    padding: 18px 14px 16px !important;
    border-radius: 18px !important;
  }
}


@media (max-width: 920px){
  .gf-dock,
  .gf-dock-card,
  .gf-actions,
  .gf-btns,
  .gf-ip,
  .button-container,
  .mascotes,
  .descricao-mascote,
  .pacotes-container,
  .pacote-info,
  .torneio-publico-wrap{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }
}


/* ===== v12 | Mobile polish + spacing standardization ===== */
.button-container{
  --gf-stack-gap: 18px;
  gap: var(--gf-stack-gap) !important;
}

.button-container > .button-main,
.button-container > .button-download,
.button-container > .button-torneio,
.button-container > .botao-android{
  margin-top: 0 !important;
  width: min(100%, 460px);
  box-sizing: border-box;
  white-space: normal;
  line-height: 1.24;
}

.button-container > .opcoes-download,
.button-container > .opcoes-download-mobile,
.button-container > .pacotes-container,
.button-container > .pacote-info,
.button-container > .torneio-publico-wrap,
.button-container > .mascotes,
.button-container > .descricao-mascote{
  width: min(100%, 1000px);
  box-sizing: border-box;
}

@media (max-width: 920px){
  .logo-container{
    width: min(46vw, 188px) !important;
    margin: 4px auto 6px !important;
    animation: none !important;
  }

  .logo-container::before{
    display: block !important;
    width: min(58vw, 220px) !important;
    height: min(58vw, 220px) !important;
    opacity: .92;
    filter: drop-shadow(0 0 8px #a678ff) drop-shadow(0 0 14px #a67aff);
    mask-image: radial-gradient(circle, rgba(255,255,255,.95) 42%, transparent 72%);
  }

  .logo-container::after{
    display: none !important;
  }

  .logo-container img{
    width: 100% !important;
    max-width: 172px !important;
    position: relative;
    z-index: 2;
  }

  .dialog-box{
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    margin-top: 10px !important;
    width: min(92vw, 360px) !important;
    max-width: calc(100vw - 24px) !important;
    min-height: 78px !important;
    height: auto !important;
    padding: 12px 16px !important;
    font-size: .95rem !important;
    line-height: 1.45 !important;
    direction: ltr !important;
    unicode-bidi: normal !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
  }

  .button-container{
    gap: 16px !important;
    padding: 0 12px 8px !important;
  }
}

@media (max-width: 640px){
  .logo-container{
    width: min(44vw, 152px) !important;
    margin-top: 2px !important;
  }

  .logo-container::before{
    width: min(62vw, 188px) !important;
    height: min(62vw, 188px) !important;
  }

  .logo-container img{
    max-width: 146px !important;
  }

  .dialog-box{
    width: min(94vw, 330px) !important;
    min-height: 88px !important;
    padding: 12px 14px !important;
    font-size: .9rem !important;
    border-radius: 14px !important;
  }

  .button-container{
    gap: 14px !important;
    padding: 0 10px 6px !important;
  }

  .button-container > .button-main,
  .button-container > .button-download,
  .button-container > .button-torneio,
  .button-container > .botao-android{
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    font-size: 1rem !important;
    border-radius: 22px !important;
    outline-offset: 1px !important;
  }

  .button-container > .opcoes-download,
  .button-container > .opcoes-download-mobile,
  .button-container > .pacote-info,
  .button-container > .torneio-publico-wrap,
  .button-container > .descricao-mascote{
    width: 100% !important;
    max-width: 100% !important;
  }

  .pacote{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
}


/* ===== v13 | Corrige estilo original dos botões + mobile sem overflow ===== */
/* desktop: volta o tamanho/forma originais; só padroniza o espaçamento */
.button-container{
  gap: 16px !important;
}

.button-container > .button-main,
.button-container > .button-download,
.button-container > .button-torneio,
.button-container > .botao-android{
  width: auto !important;
  max-width: none !important;
  margin-top: 0 !important;
  box-sizing: border-box;
}

/* preserva o visual original de cada botão */
.button-container > .button-main{
  border-radius: 40px !important;
}
.button-container > .button-download,
.button-container > .button-torneio,
.button-container > .botao-android{
  border-radius: 30px !important;
}

/* fundo do dock mais uniforme abaixo do IP, sem mexer na box do copiar IP */
.gf-dock-card{
  background:
    radial-gradient(900px 260px at 12% 8%, rgba(45,226,255,.11), transparent 60%),
    radial-gradient(900px 320px at 90% 26%, rgba(124,60,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(18,10,44,.86), rgba(18,10,44,.86)),
    var(--px-bg) !important;
}

/* mobile: mantém o estilo, só adapta largura e leitura */
@media (max-width: 920px){
  .logo-container{
    width: min(46vw, 188px) !important;
    margin: 4px auto 6px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }

  .logo-container::before{
    display: block !important;
    width: min(58vw, 220px) !important;
    height: min(58vw, 220px) !important;
    opacity: .92;
    filter: drop-shadow(0 0 8px #a678ff) drop-shadow(0 0 14px #a67aff);
    mask-image: radial-gradient(circle, rgba(255,255,255,.95) 42%, transparent 72%);
  }

  .logo-container::after{
    display: none !important;
  }

  .logo-container img{
    width: 100% !important;
    max-width: 172px !important;
    height: auto !important;
    position: relative;
    z-index: 2;
  }

  .dialog-box{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 10px auto 0 !important;
    width: min(92vw, 360px) !important;
    max-width: calc(100vw - 24px) !important;
    min-height: 78px !important;
    height: auto !important;
    padding: 12px 16px !important;
    font-size: .95rem !important;
    line-height: 1.45 !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
  }

  .button-container{
    padding: 0 12px 8px !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .button-container > .button-main,
  .button-container > .button-download,
  .button-container > .button-torneio,
  .button-container > .botao-android{
    width: min(100%, 460px) !important;
    max-width: calc(100vw - 24px) !important;
    white-space: normal;
    line-height: 1.24;
    margin-left: auto;
    margin-right: auto;
  }

  .button-container > .opcoes-download,
  .button-container > .opcoes-download-mobile,
  .button-container > .pacotes-container,
  .button-container > .pacote-info,
  .button-container > .torneio-publico-wrap,
  .button-container > .mascotes,
  .button-container > .descricao-mascote{
    width: min(100%, 1000px) !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

@media (max-width: 700px){
  .gf-dock{
    width: min(calc(100vw - 12px), 1120px) !important;
    max-width: calc(100vw - 12px) !important;
  }

  .gf-actions,
  .gf-btns,
  .gf-ip,
  .gf-wiki-panel,
  .gf-team-public-wrap,
  .gf-moveset-wrap,
  #gfUpdatesPanel,
  #gfNewsPanel,
  .torneio-publico-wrap{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .gf-btns{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .gf-btn,
  #gfCopyIpBtn.gf-btn,
  .gf-input,
  .gf-wiki-clearbtn,
  .gf-news-btn,
  .gf-x,
  .torneio-select{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .gf-ip-row{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .gf-ip-code{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .gf-news-inner,
  .gf-news-card,
  .gf-team-public-card,
  .gf-moveset-card,
  .gf-wiki-layout,
  .gf-wiki-menu,
  .gf-wiki-content{
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .gf-news-actions,
  .gf-moveset-actions,
  .gf-wiki-search,
  .torneio-actions,
  .gf-wiki-panel-hd,
  .gf-news-top,
  .gf-team-public-hd,
  .gf-moveset-hd{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .gf-wiki-layout,
  .gf-news-card,
  .gf-moveset-row,
  .torneio-grid{
    grid-template-columns: 1fr !important;
  }

  .gf-wiki-body,
  .gf-news-text,
  .gf-moveset-results,
  .torneio-panel-b,
  .accBody,
  .gf-role-title,
  .gf-member,
  .gf-tech-font{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 640px){
  .button-container{
    gap: 14px !important;
    padding: 0 10px 6px !important;
  }

  .button-container > .button-main,
  .button-container > .button-download,
  .button-container > .button-torneio,
  .button-container > .botao-android{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    white-space: normal;
  }

  .button-container > .button-main{
    border-radius: 40px !important;
    font-size: 1.08rem !important;
    padding-top: .9rem !important;
    padding-bottom: .9rem !important;
    outline-offset: 4px !important;
  }

  .button-container > .button-download,
  .button-container > .button-torneio,
  .button-container > .botao-android{
    border-radius: 30px !important;
    font-size: 1rem !important;
    padding-top: .9rem !important;
    padding-bottom: .9rem !important;
    outline-offset: 4px !important;
  }

  .logo-container{
    width: min(44vw, 152px) !important;
    margin-top: 2px !important;
  }

  .logo-container::before{
    width: min(62vw, 188px) !important;
    height: min(62vw, 188px) !important;
  }

  .logo-container img{
    max-width: 146px !important;
  }

  .dialog-box{
    width: min(94vw, 330px) !important;
    min-height: 88px !important;
    padding: 12px 14px !important;
    font-size: .9rem !important;
    border-radius: 14px !important;
  }

  .pacote,
  .pacote-info,
  .opcoes-download,
  .opcoes-download-mobile,
  .descricao-mascote,
  .torneio-publico-wrap{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}


/* ===== v14 | Theo mobile centralizado com aura e fala dentro da tela ===== */
@media (max-width: 920px){
  .logo-container{
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    margin: 4px auto 8px !important;
  }

  .logo-container::before{
    top: calc(min(46vw, 188px) / 2 + 6px) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .logo-container img{
    display: block !important;
    margin: 0 auto !important;
  }

  .dialog-box{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 12px auto 0 !important;
    width: min(92vw, 360px) !important;
    max-width: calc(100vw - 24px) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    direction: ltr !important;
    unicode-bidi: normal !important;
  }
}

@media (max-width: 640px){
  .logo-container{
    width: 100% !important;
    max-width: 100% !important;
  }

  .logo-container::before{
    top: calc(min(44vw, 152px) / 2 + 6px) !important;
  }

  .dialog-box{
    width: min(94vw, 330px) !important;
    max-width: calc(100vw - 20px) !important;
    margin: 12px auto 0 !important;
  }
}


/* ===== v17 | Corrige botões internos de download esticados ===== */
.opcoes-download,
.opcoes-download-mobile{
  width: min(100%, 420px) !important;
  max-width: 420px !important;
  margin: 10px auto 0 !important;
  align-items: stretch !important;
}

.opcoes-download button,
.opcoes-download-mobile button{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  margin-top: 8px !important;
  line-height: 1.2 !important;
  font-size: 1rem !important;
  border-radius: 10px !important;
}

@media (max-width: 700px){
  .opcoes-download,
  .opcoes-download-mobile{
    width: min(100%, 340px) !important;
    max-width: 340px !important;
  }

  .opcoes-download button,
  .opcoes-download-mobile button{
    padding: 8px 10px !important;
    font-size: .96rem !important;
  }
}


/* ===== v18 | Restaura comprimento original dos botões internos de download ===== */
.button-container > .opcoes-download,
.button-container > .opcoes-download-mobile,
.opcoes-download,
.opcoes-download-mobile{
  width: max-content !important;
  max-width: calc(100vw - 32px) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
}

.opcoes-download,
.opcoes-download-mobile{
  padding: 20px !important;
}

.opcoes-download button,
.opcoes-download-mobile button{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 6px 6px !important;
  margin-top: 9px !important;
  line-height: normal !important;
}

@media (max-width: 700px){
  .button-container > .opcoes-download,
  .button-container > .opcoes-download-mobile,
  .opcoes-download,
  .opcoes-download-mobile{
    max-width: calc(100vw - 24px) !important;
    padding: 14px !important;
  }

  .opcoes-download button,
  .opcoes-download-mobile button{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}