/* css/style.css */
:root { --primary: #6c5ce7; --secondary: #00cec9; --bg: #f0f3f7; --text: #2d3436; }
body { font-family: 'Poppins', sans-serif; background: var(--bg); margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
#game-card { background: white; width: 95%; max-width: 650px; border-radius: 40px; padding: 30px; box-shadow: 0 15px 0 #dfe6e9; border: 6px solid var(--primary); text-align: center; }
.character-group { display: flex; justify-content: space-around; margin: 20px 0; background: #f9f9f9; border-radius: 20px; padding: 15px; }
.toca-char { font-size: 3rem; display: flex; flex-direction: column; }
.toca-char span { font-size: 0.7rem; font-weight: bold; color: var(--primary); }
.btn-select { border: 3px solid #eee; border-radius: 20px; padding: 15px; cursor: pointer; background: white; transition: 0.3s; font-weight: 800; margin: 5px; }
.btn-select:hover { border-color: var(--secondary); background: #e3fdfd; }
.active { border-color: var(--primary) !important; background: #efeeff !important; }
input[type="text"] { padding: 15px; border-radius: 15px; border: 3px solid #eee; width: 80%; font-size: 1.1rem; margin: 10px 0; text-align: center; }
.start-btn { background: var(--primary); color: white; border: none; padding: 18px 35px; border-radius: 30px; font-weight: 800; cursor: pointer; font-size: 1.1rem; box-shadow: 0 5px 0 #4834d4; }
.color-circle { width: 65px; height: 65px; border-radius: 50%; cursor: pointer; border: 4px solid white; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: inline-block; margin: 10px; transition: transform 0.2s; }
.friend-box { background: #e0f7fa; padding: 18px; border-radius: 20px; border-left: 6px solid #00acc1; text-align: left; margin-top: 25px; }
.hidden { display: none !important; }
.card-paises { cursor: pointer; border-radius: 25px; overflow: hidden; transition: transform 0.2s; box-shadow: 0 8px 15px rgba(0,0,0,0.1); background: white; border: 4px solid #eee; margin: 10px; }
.card-paises:hover { transform: scale(1.05); border-color: var(--primary); }
.card-header { padding: 10px; font-weight: 800; color: white; text-transform: uppercase; }
@keyframes stamp {
    0% { transform: scale(3); opacity: 0; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.1); }
}
/* Estilo padrão: apagadinho */
.visto-opaco {
    opacity: 0.2;
    filter: grayscale(100%);
    transition: all 0.5s ease;
}

/* Estilo quando conquistado: colorido e brilhante */
.visto-conquistado {
    opacity: 1 !important;
    filter: grayscale(0%) !important;
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px gold) !important;
}

.continentes-grid, .paises-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.card-enciclopedia {
  border: 3px solid #ddd;
  border-radius: 16px;
  background: #fff;
  padding: 12px;
  text-align: center;
  cursor: pointer;
}

.card-enciclopedia .emoji { font-size: 2rem; }
.card-enciclopedia.pais img { width: 85px; height: auto; border-radius: 8px; }

.selos-box {
  background: #f8f9ff;
  border: 2px dashed var(--primary);
  border-radius: 16px;
  padding: 12px;
}

.selos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.selo-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: .75rem;
}

.selo-mini img { width: 60px; height: auto; }
.selo-status { font-size: .8rem; font-weight: 700; }
.selo-status.ok { color: #2e7d32; }
.ficha-pais { border: 3px solid #ddd; border-radius: 20px; padding: 16px; text-align: left; }
.ficha-pais h2, .ficha-pais h3 { text-align: center; }
.img-abertura { width: 100%; max-width: 460px; border-radius: 16px; display: block; margin: 0 auto 12px; }
.quiz-opcoes { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 20px 0; }