/* Trava o modelo de caixas para que padding não aumente a largura dos elementos */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Impede que a página passe da largura da tela e esconde a barra de rolagem horizontal */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
/* --- RESET BÁSICO E CONFIGURAÇÕES GERAIS --- */
* {
  box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
p,
ul,
li {
  margin: 0;
  padding: 0;
  font-weight: normal;
}
body {
  background-color: #e6e6e6;
  font-family: "Comic Sans MS", Arial, sans-serif;
  color: #000000;
  overflow-x: hidden; /* Evita rolagem horizontal indesejada */
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Faz o corpo ter pelo menos 100% da altura da tela */
  margin: 0;
}
a {
  color: #0000cc;
  text-decoration: underline;
}
a:visited {
  color: #800080;
}

/* --- HEADER 100% DA TELA --- */
.site-header {
  background-color: #0000ff;
  color: #ffffff;
  padding: 20px;
  border-bottom: 4px solid #ff0000;
  text-align: center;
  width: 100%;
}

.site-header a {
  color: #ffffff;
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  text-decoration: none;
  font-weight: bold;
}

.site-header a:hover {
  text-decoration: underline;
  color: #00ff00; /* Aquele verde neon clássico de hover! */
}

/* Título amarelo com SOMBRA DUPLA (Estilo idêntico ao da Home) */
.site-header h1 {
  font-weight: bold;
  color: #ffff00;
  text-shadow:
    2px 2px 0px #ff0000,
    3px 3px 0px #000000;
  font-size: clamp(28px, 5vw, 42px);
  margin-top: 5px;
  letter-spacing: 1px;
}

.site-logo {
  font-weight: bold;
  font-size: clamp(32px, 5vw, 48px); /* Texto cresce e diminui fluido */
  color: #ffff00;
  text-shadow:
    2px 2px 0px #ff0000,
    3px 3px 0px #000000;
  margin-bottom: 5px;
}
.site-tagline {
  font-size: clamp(12px, 2vw, 16px);
  color: #ffffff;
  font-style: italic;
  font-family: "Courier New", Courier, monospace;
}

/* --- WRAPPER DE CONTEÚDO (Para não ficar infinito em TVs, mas encher monitores normais) --- */
.content-wrapper {
  max-width: 1600px;
  margin: 0 auto;
  padding: 15px;
  background-color: #ffffff;
  min-height: 80vh;
  flex: 1;
  width: 100%;
}

/* --- ÁREA DE CONTEÚDO PRINCIPAL --- */
.main-content-area {
  display: flex;
  gap: 15px;
}
.primary-content {
  flex: 1;
}

/* --- BLOCOS DE CONTEÚDO GENÉRICOS --- */
.side-menu,
.center-game-box,
.mini-games-gallery {
  background-color: #ffffcc;
  border: 3px solid #ff0000;
  margin-bottom: 15px;
  box-shadow: 2px 2px 0px #000;
}
.menu-header,
.block-header,
.gallery-header {
  background-color: #ff0000;
  color: #ffffff;
  font-weight: bold;
  padding: 8px 10px;
  text-align: center;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
}

/* --- TOP GAMES GRID --- */
.top-games-grid {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

/* Menu */
.side-menu {
  width: 220px;
  flex-shrink: 0; /* Impede o menu de encolher demais */
}
.side-menu ul {
  list-style: none;
  padding: 10px;
}
.side-menu li {
  padding: 8px 0;
  border-bottom: 1px dashed #ff0000;
}
.side-menu li:last-child {
  border-bottom: none;
}
.side-menu li a {
  text-decoration: none;
  font-weight: bold;
  color: #000000;
  display: flex;
  align-items: center;
}
.side-menu li a:hover {
  color: #ff0000;
  background-color: #ffffff;
}
.menu-icon {
  font-size: 20px;
  margin-right: 10px;
}

/* Jogo Central */
.center-game-box {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.block-content {
  padding: 20px;
  background-color: #ffffff;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.block-content h3 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: bold;
  margin-bottom: 10px;
  color: #0000ff;
}
.game-desc {
  font-size: 16px;
  margin-bottom: 20px;
}

.fake-image-box {
  width: 200px;
  height: 120px;
  background-color: #008000;
  border: 4px inset #cccccc;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 50px;
}

.jogar-link {
  display: inline-block;
  background-color: #ffcc00;
  color: #000000;
  border: 4px outset #ffffff;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 25px;
  font-size: 18px;
  box-shadow: 2px 2px 0px #000000;
}
.jogar-link:active {
  border: 4px inset #ffffff;
}

/* Lista da Direita */
.right-games-list {
  width: 200px;
  flex-shrink: 0;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 15px;
}
.sub-game-box {
  background-color: #e6e6fa;
  border: 3px solid #000000;
  padding: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 2px 2px 0px #000;
}
.sub-game-box h4 {
  font-weight: bold;
  margin-bottom: 5px;
  color: #800080;
  font-size: 18px;
}
.clique-jogue-link,
.jogar-small-link {
  font-size: 14px;
  background-color: #c0c0c0;
  padding: 5px 10px;
  border: 3px outset #fff;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  margin-top: 10px;
}
.clique-jogue-link:active,
.jogar-small-link:active {
  border: 3px inset #fff;
}

/* --- ESTRUTURA DE ANÚNCIOS (AD_TECH) --- */
.ad-placeholder {
  background: transparent;
  border: none;
  color: transparent;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
}

.ad-mobile-only {
  display: none;
} /* Oculto por padrão no Desktop */
.ad-desktop-only {
  display: flex;
  flex-direction: column;
}

/* Tamanhos Flexíveis conforme AdLayout */
.ad-336x280-flex {
  width: 336px;
  height: 280px;
  max-width: 100%;
}
.ad-300x600 {
  width: 300px;
  height: 600px;
  margin-bottom: 20px;
}
.ad-300x250 {
  width: 300px;
  height: 250px;
  margin-bottom: 20px;
}

/* --- MINI GAMES GALLERY --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 15px;
  background-color: #87ceeb;
}
.mini-game-item {
  background-color: #ffffff;
  border: 3px solid #000000;
  text-align: center;
  padding: 20px 10px;
  cursor: pointer;
  box-shadow: 2px 2px 0px #000;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mini-game-item:hover {
  background-color: #ffcc00;
}
.mini-icon {
  font-size: 40px;
  margin-bottom: 10px;
}
.mini-game-item p {
  font-size: 15px;
  font-weight: bold;
}

/* --- FOOTER E MARQUEE 100% --- */
.site-footer {
  background-color: #0000ff;
  border-top: 4px solid #ff0000;
  padding: 10px;
  width: 100%;
  margin-top: auto;
}
.marquee-90s {
  color: #ffff00;
  font-size: 16px;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
}

/* =========================================================
           RESPONSIVIDADE (MOBILE E TABLETS)
           ========================================================= */

/* Telas médias (Tablets até 1024px) */
@media (max-width: 1024px) {
  .main-layout-flex {
    flex-direction: column;
    align-items: center;
  }
  .side-menu {
    width: 100%;
    max-width: 900px;
    margin-bottom: 10px;
  }

  /* Ativa a troca de anúncios para Mobile */
  .ad-mobile-only {
    display: flex !important;
  }
  .ad-desktop-only {
    display: none !important;
  }
}

/* Telas pequenas (Celulares até 768px) */
@media (max-width: 768px) {
  .top-games-grid {
    flex-direction: column;

    /* Centraliza os links e os ícones do menu aberto no mobile */
    .side-menu li a {
      justify-content: center;
      width: 100%;
    }
  }

  .side-menu {
    width: 100%;
  }
  .side-menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  .side-menu li {
    border-bottom: none;
    border-right: 1px dashed #ff0000;
    padding-right: 10px;
  }
  .side-menu li:last-child {
    border-right: none;
  }

  .right-games-list {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ads-sidebar {
    flex-direction: column;
    align-items: center;
  }
  .ad-box {
    max-width: 300px;
  }
}

/* Telas muito pequenas (Celulares antigos até 480px) */
@media (max-width: 480px) {
  .right-games-list {
    grid-template-columns: 1fr;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .side-menu ul {
    flex-direction: column;
    align-items: center;
  }
  .side-menu li {
    border-right: none;
    border-bottom: 1px dashed #ff0000;
    width: 100%;
    text-align: center;
  }
  .side-menu li a {
    justify-content: center;
  }
}

/* --- CURSOR RETRÔ ANOS 90 --- */
body,
a,
button {
  /* Seta pixelada branca com borda preta (maior que o normal) */
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M2,2 L2,26 L8,20 L13,31 L18,29 L13,18 L22,18 Z' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E"),
    auto !important;
}

/* Quando a classe 'clicando' for ativada pelo JavaScript, tudo vira um globo! */
body.clicando,
body.clicando * {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style='font-size:26px'%3E%3Ctext y='26'%3E%F0%9F%8C%90%3C/text%3E%3C/svg%3E"),
    pointer !important;
}

/* --- ESTRUTURA DE ANÚNCIOS --- */
.ad-placeholder {
  background: transparent;
  border: none;
  color: transparent;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
}
.ad-mobile-only {
  display: none;
}
.ad-desktop-only {
  display: flex;
  flex-direction: column;
}
.ad-336x280-flex {
  width: 336px;
  height: 280px;
  max-width: 100%;
}
.ad-300x600 {
  width: 300px;
  height: 600px;
  margin-bottom: 20px;
}
.ad-300x250 {
  width: 300px;
  height: 250px;
  margin-bottom: 20px;
}

/* --- ESTILOS INTERNOS DO JOGO --- */
.game-desc {
  font-size: 18px;
  margin-bottom: 20px;
}
.country-display {
  font-size: clamp(24px, 5vw, 42px);
  font-weight: bold;
  color: #008000;
  margin: 20px 0;
  padding: 20px;
  background-color: #e6e6fa;
  border: 3px inset #ccc;
  text-transform: uppercase;
}
.btn-start {
  background-color: #ffcc00;
  color: #000;
  border: 4px outset #fff;
  font-weight: bold;
  padding: 15px 30px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 2px 2px 0px #000;
  margin-bottom: 20px;
  font-family: "Comic Sans MS", Arial, sans-serif;
}
.btn-start:active {
  border: 4px inset #fff;
}

.play-area {
  display: none;
}
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ff0000;
  color: #fff;
  padding: 10px 20px;
  font-weight: bold;
  font-size: 20px;
  border: 2px solid #000;
  margin-bottom: 20px;
}
.input-box {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 15px;
  font-size: 20px;
  border: 3px inset #ccc;
  font-family: Arial, sans-serif;
  margin-bottom: 20px;
  text-align: center;
}
.answers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.answer-slot {
  background-color: #f0f0f0;
  border: 2px solid #999;
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #ccc;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
.answer-slot.correct {
  background-color: #008000;
  color: #fff;
  font-weight: bold;
  border-color: #000;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.answer-slot.missed {
  background-color: #ff0000;
  color: #fff;
  font-weight: bold;
  border-color: #000;
}
.victory-msg,
.game-over-msg {
  display: none;
  color: #000;
  border: 3px dashed #ff0000;
  padding: 20px;
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
}
.victory-msg {
  background-color: #ffff00;
}
.game-over-msg {
  background-color: #ffb6c1;
}
/* --- ESTRUTURA GERAL DAS PÁGINAS DE JOGO --- */
.main-layout-flex {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
}

.game-main-area {
  flex: 1;
  max-width: 900px;
  background-color: #ffffff;
  border: 4px outset #cccccc;
  box-shadow: 3px 3px 0px #000000;
  padding: 20px;
  text-align: center;
}

.ads-sidebar {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.continent-display {
  font-size: clamp(24px, 5vw, 42px);
  font-weight: bold;
  color: #0000ff;
  margin: 20px 0;
  padding: 20px;
  background-color: #ffffe0;
  border: 3px inset #ccc;
  text-transform: uppercase;
}

/* --- ESTILOS: JOGO DE CAPITAIS --- */
.region-display {
  font-size: clamp(24px, 5vw, 42px);
  font-weight: bold;
  color: #800080;
  margin: 20px 0;
  padding: 20px;
  background-color: #e6e6fa;
  border: 3px inset #ccc;
  text-transform: uppercase;
}

/* NOVO GRID PARA CAPITAIS */
.answers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 20px;
}
.country-card {
  background-color: #f0f0f0;
  border: 3px solid #999;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.country-card.correct {
  background-color: #008000;
  border-color: #000;
  color: #fff;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.country-card.missed {
  background-color: #ff0000;
  border-color: #000;
  color: #fff;
}
.country-name {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
  text-transform: uppercase;
  text-align: center;
}
.capital-input {
  width: 100%;
  padding: 5px;
  font-size: 14px;
  border: 2px inset #ccc;
  font-family: Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
}
.capital-input:disabled {
  background-color: transparent;
  border: none;
  font-weight: bold;
  color: #fff;
  font-size: 16px;
}

/* --- ESTILOS: JOGO DE BANDEIRAS --- */
/* ÁREA DA BANDEIRA CORRIGIDA (Sem Fundo/Bordas) */
.flag-container {
  width: 100%;
  max-width: 450px;
  height: 280px;
  margin: 0 auto 30px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flag-image {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}

/* CONTROLES DE INPUT E PULO */
.input-group {
  display: flex;
  gap: 10px;
  max-width: 600px;
  margin: 0 auto 10px auto;
}
.btn-skip {
  background-color: #c0c0c0;
  color: #000;
  border: 3px outset #fff;
  font-weight: bold;
  padding: 10px 15px; /* Deixa o botão mais compacto */
  font-size: 14px; /* Fonte um pouco menor */
  cursor: pointer;
  font-family: Arial, sans-serif;
  white-space: nowrap; /* A MÁGICA AQUI: Impede que o emoji caia para a linha de baixo */
  align-self: center; /* Centraliza o botão verticalmente ao lado do input */
}
.btn-skip:active {
  border: 3px inset #fff;
}

/* FEEDBACK VISUAL */
.feedback-message {
  font-size: 20px;
  font-weight: bold;
  height: 30px;
  margin-bottom: 15px;
}
.feedback-wrong {
  color: #ff0000;
}

@media (max-width: 600px) {
  .input-group {
    flex-direction: column;
  }
  .btn-skip {
    padding: 15px;
  }
  .flag-container {
    height: 200px;
  }
}

/* --- ESTILOS: JOGO CAÇA-PALAVRAS --- */
.instructions {
  font-size: 14px;
  font-weight: bold;
  color: #0000ff;
  margin-bottom: 20px;
  background-color: #ffff00;
  padding: 5px;
  border: 2px dashed #ff0000;
  display: inline-block;
}

.game-flex-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* A GRADE DE LETRAS */
.grid-container {
  background-color: #fff;
  border: 4px inset #ccc;
  padding: 10px;
  display: inline-block;
  user-select: none;
}
.grid-row {
  display: flex;
}
.grid-cell {
  width: clamp(25px, 4vw, 35px);
  height: clamp(25px, 4vw, 35px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: clamp(14px, 2vw, 18px);
  border: 1px solid #eee;
  cursor: pointer;
  transition: all 0.1s;
}
.grid-cell:hover {
  background-color: #ffffcc;
  border-color: #000;
}
.grid-cell.selected {
  background-color: #ffcc00;
  color: #000;
  border-color: #000;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.grid-cell.found {
  background-color: #4169e1;
  color: #fff;
  border-color: #00008b;
}

/* LISTA DE PALAVRAS A ENCONTRAR */
.words-to-find {
  background-color: #e6e6fa;
  border: 3px solid #000;
  padding: 15px;
  min-width: 200px;
  text-align: left;
}
.words-to-find h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #800080;
  border-bottom: 2px dashed #000;
  padding-bottom: 5px;
}
.word-item {
  font-family: Arial, sans-serif;
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: bold;
}
.word-item.found-word {
  text-decoration: line-through;
  color: #999;
}

/* --- ESTILOS: JOGO DE MAPA (ONDE FICA) --- */
.status-bar-map {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #000;
  color: #00ff00;
  padding: 10px 20px;
  font-weight: bold;
  font-size: 20px;
  border: 4px ridge #888;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
  font-family: "Courier New", Courier, monospace;
}
.right-stats {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.timer-box {
  background-color: #333;
  color: #ff0000;
  padding: 5px 15px;
  border: 3px inset #555;
  font-size: 24px;
}
.skip-box {
  color: #ffff00;
}
.btn-action {
  background-color: #ffcc00;
  color: #000;
  border: 4px outset #fff;
  font-weight: bold;
  padding: 15px 30px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 2px 2px 0px #000;
  font-family: "Comic Sans MS", Arial, sans-serif;
  margin-bottom: 10px;
}
.btn-action:active {
  border: 4px inset #fff;
}
.btn-action:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  border-style: solid;
  box-shadow: none;
}

.roulette-box {
  background-color: #000;
  border: 6px inset #444;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: inset 0 0 15px #00ff00;
  position: relative;
}
.roulette-title {
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  margin-bottom: 5px;
}
.roulette-text {
  color: #00ff00;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(24px, 5vw, 40px);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 5px #00ff00;
  min-height: 45px;
}

/* MAPA VETORIAL - ESTILO RADAR DOS ANOS 90 */
.map-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background-color: #001100;
  border: 8px ridge #888;
  box-shadow: 5px 5px 0px #000;
  overflow: hidden;
}
.map-wrapper::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(0, 255, 0, 0.03), rgba(0, 255, 0, 0.01));
  z-index: 10;
  background-size:
    100% 4px,
    3px 100%;
  pointer-events: none;
}
#mapContainer svg {
  width: 100%;
  height: auto;
  display: block;
}
.country-path {
  fill: #003300;
  stroke: #00ff00;
  stroke-width: 0.5px;
  transition: fill 0.2s;
}
.country-unplayable {
  fill: #001a00;
  stroke: #004400;
  pointer-events: none;
}
.playable-hover:hover {
  fill: #009900;
  cursor: crosshair;
}
.found-correct {
  fill: #00ff00 !important;
  stroke: #fff;
  stroke-width: 1px;
  pointer-events: none;
}
.found-wrong {
  fill: #ff0000 !important;
  stroke: #fff;
  stroke-width: 1px;
  pointer-events: none;
}
.wrong-click {
  fill: #ff8800 !important;
}
.reveal-country {
  animation: blink 1s infinite;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

.custom-alert {
  display: none;
  padding: 20px;
  margin-top: 20px;
  border: 4px dashed #000;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}
.alert-success {
  background-color: #90ee90;
  border-color: #006400;
  color: #006400;
}
.alert-error {
  background-color: #ffcccc;
  border-color: #cc0000;
  color: #cc0000;
}

#loadingText {
  color: #00ff00;
  font-family: "Courier New", Courier, monospace;
  font-size: 20px;
  padding: 50px;
  background: #000;
  margin-bottom: 20px;
  border: 4px inset #fff;
}

/* --- ESTILOS: JOGO DE CHARADAS --- */
.round-prize {
  background-color: #ffd700;
  color: #000;
  padding: 2px 8px;
  border-radius: 5px;
  border: 2px solid #000;
}

.riddle-card {
  background-color: #f9f9f9;
  border: 3px dashed #000;
  padding: 30px 20px;
  margin: 20px 0;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.riddle-text {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.4;
  color: #333;
  margin-bottom: 20px;
}

.hint-text-box {
  font-size: 18px;
  color: #0000ff;
  font-weight: bold;
  text-align: center;
  background-color: #ffff00;
  padding: 10px 15px;
  border: 2px dashed #ff0000;
  margin-bottom: 20px;
  display: block;
  width: auto;
  box-sizing: border-box;
}

.hint-text {
  font-size: 16px;
  color: #0000ff;
  font-style: italic;
  font-weight: bold;
  display: none;
  background: #e6e6fa;
  padding: 10px 15px;
  border: 2px solid #800080;
  width: 90%;
}

.input-box-charada {
  padding: 15px;
  font-size: 20px;
  border: 3px inset #ccc;
  width: 100%;
  max-width: 500px;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
}

.btn-hint {
  background-color: #c0c0c0;
  font-size: 16px;
  margin-bottom: 15px;
  padding: 10px 15px;
}

.answer-highlight {
  display: inline-block;
  margin-top: 10px;
  color: #000;
  font-size: 24px;
  background: #ffff00;
  padding: 5px 15px;
  border-radius: 5px;
  border: 2px solid #000;
}

/* --- ESTILOS: JOGO DA FORCA --- */
.ascii-monitor {
  background-color: #000;
  color: #00ff00;
  font-family: "Courier New", Courier, monospace;
  padding: 20px;
  border: 6px ridge #888;
  border-radius: 10px;
  width: fit-content;
  margin: 0 auto 20px auto;
  text-align: left;
  font-size: 22px;
  line-height: 1.2;
  box-shadow: inset 0px 0px 15px rgba(0, 255, 0, 0.2);
}

.word-category {
  background-color: #ffff00;
  border: 2px dashed #ff0000;
  padding: 5px 15px;
  font-weight: bold;
  font-size: 18px;
  display: inline-block;
  margin-bottom: 15px;
  color: #000;
}

.word-display {
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(24px, 5vw, 40px);
  font-weight: bold;
  letter-spacing: 10px;
  margin-bottom: 20px;
  color: #000;
  background-color: #f0f0f0;
  border: 3px solid #000;
  padding: 15px;
}

/* TECLADO VIRTUAL */
.keyboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.key-btn {
  background-color: #e0e0e0;
  border: 3px outset #fff;
  font-size: 20px;
  font-weight: bold;
  width: 45px;
  height: 45px;
  cursor: pointer;
  font-family: "Arial", sans-serif;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.key-btn:active {
  border: 3px inset #fff;
  background-color: #ccc;
}
.key-btn.correct {
  background-color: #90ee90;
  color: #006400;
  border-color: #006400;
  pointer-events: none;
}
.key-btn.wrong {
  background-color: #ffcccc;
  color: #cc0000;
  border-color: #cc0000;
  pointer-events: none;
  text-decoration: line-through;
}

@media (max-width: 500px) {
  .key-btn {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }
  .ascii-monitor {
    font-size: 16px;
  }
}

/* --- ESTRUTURA GLOBAL (Garante o lado a lado) --- */
.main-layout-flex {
  display: flex;
  flex-direction: row; /* Força ficar um do lado do outro no PC */
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
  margin-top: 20px;
}

/* --- ESTILOS: PALAVRAS EMBARALHADAS --- */
.global-timer {
  background-color: #000;
  color: #00ff00;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid #fff;
  font-family: "Courier New", Courier, monospace;
}

.timer-warning {
  color: #ffff00;
}

.scramble-board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
  background-color: #222;
  padding: 25px;
  border: 6px ridge #888;
  border-radius: 5px;
  box-shadow:
    inset 3px 3px 10px rgba(0, 0, 0, 0.5),
    3px 3px 0px #000;
}

.letter-block {
  width: clamp(45px, 8vw, 65px);
  height: clamp(55px, 10vw, 75px);
  background: linear-gradient(180deg, #0000ff, #00008b);
  color: #ffff00;
  border: 4px outset #00ffff;
  font-size: clamp(28px, 5vw, 45px);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  text-shadow: 2px 2px 0px #000;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.letter-block.spin {
  animation: tornado 0.6s ease-in-out;
}

@keyframes tornado {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.hint-text-box {
  font-size: 18px;
  color: #0000ff;
  font-weight: bold;
  text-align: center;
  background-color: #ffff00;
  padding: 10px 15px;
  border: 2px dashed #ff0000;
  margin-bottom: 20px;
  display: block;
  width: 100%;
}

.input-box-scramble {
  padding: 15px;
  font-size: 22px;
  border: 4px inset #ccc;
  width: 100%;
  max-width: 400px;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
  background-color: #ffffe0;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

/* Botões do Jogo com as Cores Corretas */
.game-btn-area {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.btn-game-scramble {
  border: 4px outset #fff;
  font-weight: bold;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 2px 2px 0px #000;
  font-family: "Comic Sans MS", Arial, sans-serif;
  transition: all 0.1s;
  min-width: 140px;
  text-transform: uppercase;
}

.btn-game-scramble:active {
  border: 4px inset #fff;
  transform: translateY(2px);
}

.btn-responder {
  background-color: #008000;
  color: #fff;
}
.btn-pular {
  background-color: #ff8800;
  color: #000;
}
.btn-tornado {
  background-color: #ff00ff;
  color: #fff;
}
.btn-tornado:disabled {
  background-color: #666;
  color: #ccc;
  cursor: not-allowed;
  border: 4px solid #444;
}

@media (max-width: 600px) {
  .btn-game-scramble {
    width: 100%;
    margin-bottom: 5px;
  }
}
/* --- CORREÇÃO DEFINITIVA: BARRA DE STATUS --- */
.status-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  height: auto !important; /* 👈 O SEGREDO ESTÁ AQUI: Força a caixa verde a esticar para baixo */
  min-height: fit-content !important;
  padding: 15px !important;
}

.round-prize {
  white-space: nowrap; /* Impede corte de texto */
  margin: 5px 0; /* Dá um respiro caso encoste nos outros itens */
}

/* --- ESTILOS: JOGO DOS ERROS (BANDEIRAS) --- */
.status-bar-erros {
  background-color: #000 !important;
  color: #ffff00 !important;
  border: 4px ridge #888 !important;
}

.right-stats {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.timer-box {
  background-color: #000;
  color: #ff0000;
  padding: 5px 15px;
  border: 3px inset #555;
  font-family: "Courier New", Courier, monospace;
  font-size: 24px;
  font-weight: bold;
}

.country-title {
  background-color: #000080;
  border: 3px dashed #fff;
  padding: 10px 20px;
  font-weight: bold;
  font-size: 28px;
  display: inline-block;
  margin-bottom: 20px;
  color: #fff;
  text-transform: uppercase;
  font-family: "Courier New", Courier, monospace;
}

.instruction {
  font-size: 22px;
  font-weight: bold;
  color: #ff0000;
  margin-bottom: 20px;
  animation: blink 1.5s infinite;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ÁREA DE COMPARAÇÃO */
.vs-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 30px;
  background: repeating-linear-gradient(
    45deg,
    #eee,
    #eee 10px,
    #fff 10px,
    #fff 20px
  );
  padding: 30px 10px;
  border: 4px dashed #999;
}
.vs-text {
  font-size: 30px;
  font-weight: bold;
  font-family: Impact, sans-serif;
  color: #000;
  text-shadow: 2px 2px 0 #fff;
}

.flag-box {
  width: clamp(200px, 40vw, 280px);
  aspect-ratio: 3 / 2;
  border: 6px solid #000;
  box-shadow: 8px 8px 0px #555;
  cursor: pointer;
  transition: transform 0.1s;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}
.flag-box:hover {
  transform: scale(1.05);
  border-color: #0000ff;
}
.flag-box:active {
  transform: scale(0.95);
  box-shadow: 4px 4px 0px #555;
}

.alert-victory {
  background-color: #ffd700;
  border-color: #b8860b;
  color: #000;
  box-shadow: inset 0 0 20px #fff;
}

@media (max-width: 768px) {
  .vs-container {
    flex-direction: column;
    gap: 20px;
  }
  .vs-text {
    transform: rotate(90deg);
    margin: 10px 0;
  }
}

/* --- PAINEL DE STATUS (Placar + Relógio) --- */
.stats-panel {
  display: flex;
  justify-content: center;
  gap: 15px; /* Espaço entre o placar e o relógio */
  margin-bottom: 20px;
  width: 100%;
}

/* Faz a barra vermelha antiga se adaptar ao novo espaço */
.score-box {
  margin-bottom: 0 !important;
  flex: 1; /* Faz o placar esticar e ocupar a maior parte da tela */
}

/* O novo visual exclusivo do relógio */
.timer-box {
  background-color: #0047ab; /* Azul vibrante (pode alterar a cor se quiser) */
  color: #ffffff;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 10px 20px;
  border: 2px solid #000; /* Borda padrão do site */
  box-shadow: 2px 2px 0px #000; /* Sombrinha padrão do site */
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
}

/* Ajustes para Celular (Responsividade) */
@media (max-width: 768px) {
  .main-layout-flex {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }

  .content-wrapper {
    padding: 10px; /* Reduz o padding geral no mobile para não espremer os jogos */
    width: 100%;
    max-width: 100%;
  }

  .side-menu {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    position: static;
    margin-left: 0; /* Reseta qualquer margem que possa empurrar o menu pra direita */
    margin-right: 0;
  }

  .game-main-area {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    margin: 0;
  }

  h1 {
    font-size: 1.5rem;
  }

  .btn-start,
  .btn-action {
    width: 100%;
    font-size: 1.1rem;
  }

  .ad-desktop-only {
    display: none !important;
  }

  .stats-panel {
    flex-direction: column;
    gap: 10px;
  }
}

/* =========================================
   MENU HAMBÚRGUER (MOBILE) - CORRIGIDO
========================================= */

/* Esconde o botão no desktop para manter a visão original */
.hamburger-btn {
  display: none;
}

/* Regras aplicadas APENAS em telas de celular (mobile) */
@media (max-width: 768px) {
  /* Remove o fundo amarelo e a borda da caixa inteira para não sobrar espaço vazio */
  .side-menu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 20px;
  }

  /* Mantém a barra vermelha, centraliza o conteúdo e ajusta as bordas */
  .menu-header {
    display: flex;
    justify-content: center; /* Centraliza o botão ☰ */
    align-items: center;
    background-color: #ff0000;
    padding: 10px;
    border: 2px solid #000;
  }

  /* Esconde o texto "OUTROS JOGOS" ou "MENU PRINCIPAL" apenas no celular */
  .menu-header span {
    display: none;
  }

  /* Exibe o botão hambúrguer no centro */
  .hamburger-btn {
    display: block;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.2rem; /* Ícone um pouco maior */
    cursor: pointer;
    padding: 0;
    margin: 0;
  }

  /* Transfere o fundo amarelo clarinho apenas para a lista (quando estiver aberta) */
  .side-menu ul {
    display: none;
    flex-direction: column;
    background-color: #ffffe0; /* Fundo amarelo do seu layout */
    border: 2px solid #000;
    border-top: none;
    padding: 10px 0;
  }

  /* Classe ativada pelo main.js para mostrar a lista */
  .side-menu ul.show-menu {
    display: flex;
  }
}

/* --- Estilos específicos para o Desafio Diário --- */
.daily-wrapper {
  background-color: #fff;
  border: 4px outset #ccc;
  box-shadow: 3px 3px 0px #000;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
  font-family: "Comic Sans MS", Arial, sans-serif;
}

.daily-header {
  background-color: #ffcc00;
  color: #000;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  border: 2px solid #000;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-size: 1.2rem;
  box-shadow: 2px 2px 0px #000;
}

.flag-daily-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 450px;
  margin: 0 auto 20px auto;
  border: 4px solid #000;
  box-shadow: 4px 4px 0px #000;
  background-color: #b0b0b0;
  overflow: hidden;
}

#flagCanvas {
  width: 100%;
  height: auto;
  display: block;
  /* Efeito de Blur Progressivo */
  filter: blur(25px);
  transition: filter 0.5s ease-in-out;
}

.guesses-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.guess-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 2px solid #000;
  padding: 10px;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  font-size: 1.1rem;
  box-shadow: 2px 2px 0px #000;
}

.guess-item.correct {
  background: #008000;
  color: #fff;
}

.guess-item.wrong {
  background: #ffcccc;
  color: #000;
}

.guess-data {
  display: flex;
  gap: 15px;
}

.daily-input-group {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.input-box {
  width: 100%;
  max-width: 350px;
  padding: 10px;
  border: 2px solid #000;
  text-transform: uppercase;
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  text-align: center;
  box-shadow: 2px 2px 0px #000;
}

.input-box:focus {
  outline: none;
  border-color: #0000ff;
}

/* --- ESTILIZAÇÃO DO BOTÃO DE COMPARTILHAR --- */
.btn-share {
  background: linear-gradient(180deg, #4caf50 0%, #2e7d32 100%);
  border: 4px solid #000;
  color: #fff;
  font-family: "Comic Sans MS", Arial, sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  padding: 15px 20px;
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  box-shadow: 4px 4px 0px #000;
  text-transform: uppercase;
}
.btn-share:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0px #000;
}
.btn-share:hover {
  background: linear-gradient(180deg, #45a049 0%, #1d611f 100%);
}