:root{
  /* Estados e acento */
  --qf-ok: #22c55e;     /* verde sucesso */
  --qf-bad: #ef4444;    /* vermelho vivo */
  --qf-accent: #0d6efd; /* destaque/seleção azul como no mock */

  /* Paleta principal (verde predominante) */
  --qf-g900: #0b5d2a; /* fundo mais escuro */
  --qf-g800: #0e6e33;
  --qf-g700: #107a38;
  --qf-g600: #138a40;
  --qf-g500: #16a34a;
  --qf-g400: #22c55e; /* coincide com ok */
  --qf-chip-bg: #c8ee7f; /* verde-lima claro para as palavras */
  --qf-chip-text: #14532d; /* texto do chip */
}

/* Fundo geral em tons de verde vibrante */
html, body{
  min-height: 100%;
  background: radial-gradient(1200px 600px at 20% -10%, var(--qf-g600), transparent 60%),
              radial-gradient(1200px 600px at 120% 20%, var(--qf-g700), transparent 55%),
              linear-gradient(180deg, var(--qf-g700), var(--qf-g900));
  color: #eafbea;
}

.qf-board, .qf-pool, .qf-result{
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02))
              , var(--qf-g800);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  color: #f0fff4;
}

.qf-build{ min-height: 64px; }

/* Slots de montagem */
.qf-slot{
  min-width: 64px;
  min-height: 40px;
  padding: 6px 12px;
  border: 2px dashed rgba(255,255,255,0.35);
  border-radius: 10px;
  background: rgba(0,0,0,0.12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

.qf-slot.over{
  border-color: var(--qf-accent);
  background: rgba(13,110,253,0.12);
  box-shadow: 0 0 0 2px rgba(13,110,253,0.18) inset;
}
.qf-slot.ok{
  border-style: solid;
  border-color: var(--qf-ok);
  background: rgba(34,197,94,0.16);
  color: #eaffea;
}
.qf-slot.bad{
  border-style: solid;
  border-color: var(--qf-bad);
  background: rgba(239,68,68,0.12);
}

/* Palavras (chips) */
.qf-word{
  user-select: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--qf-chip-bg);
  color: var(--qf-chip-text);
  border: 1px solid rgba(0,0,0,0.12);
  font-weight: 700;
  letter-spacing: .2px;
  cursor: grab;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

.qf-word:active{ cursor: grabbing; }

/* Seleção por toque/click no mobile */
.qf-word.selected{
  outline: 2px solid var(--qf-accent);
  background: #e7f0ff;
}
.qf-slot.selected{
  border-color: var(--qf-accent);
  background: rgba(13,110,253,0.12);
  box-shadow: 0 0 0 2px rgba(13,110,253,0.18) inset;
}

/* Melhora resposta ao toque */
.qf-build, .qf-pool{ touch-action: manipulation; }

.qf-overlay{
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.75); z-index: 1000; opacity: 0; transition: opacity 180ms ease;
}
.qf-overlay.d-none{ display: none; }
.qf-overlay.show{ opacity: 1; }

.qf-win-card{
  background: #fff; color: #212529; border-radius: 10px; padding: 20px; min-width: 320px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.35);
}

.qf-result{ max-width: 900px; margin: 0 auto; }

/* Não exibir a frase original ao jogador */
.qf-original{ display: none; }

/* Legendas e textos secundários: amarelo suave para evitar confusão com o verde */
.text-muted{ color: #ffe08a !important; }
#tip{ color: #ffe08a; }

/* Botões com alto contraste sobre o fundo verde */
#verifyBtn.btn{
  background-color: #0e7490; /* ciano-escuro */
  border-color: #075985;
  color: #ffffff;
}
#verifyBtn.btn:hover, #verifyBtn.btn:focus{ background-color: #075985; border-color:#064e73; color:#fff; }

#restartBtn.btn{
  background-color: #f59e0b; /* âmbar vivo */
  border-color: #d97706;
  color: #111827; /* quase preto para contraste AA */
}
#restartBtn.btn:hover, #restartBtn.btn:focus{ background-color:#d97706; border-color:#b45309; color:#ffffff; }

#closeBtn.btn{
  background-color: #b91c1c; /* vermelho forte */
  border-color: #991b1b;
  color: #ffffff;
}
#closeBtn.btn:hover, #closeBtn.btn:focus{ background-color:#991b1b; border-color:#7f1d1d; color:#fff; }

/* Inputs e botões com contraste sobre o fundo verde */
.form-select{
  background-color: var(--qf-g800);
  border-color: rgba(255,255,255,0.25);
  color: #f0fff4;
}
.form-select:focus{ border-color: var(--qf-g400); box-shadow: 0 0 0 .2rem rgba(34,197,94,.25); }

/* Dropdown de níveis: limite de altura com rolagem */
.dropdown-menu.levels-menu{
  max-height: 260px;
  overflow-y: auto;
  min-width: 220px;
}

.btn-outline-secondary{ color:#eafbea; border-color: rgba(255,255,255,0.35); }
.btn-outline-secondary:hover{ background: rgba(255,255,255,0.1); color:#fff; }
.btn-outline-primary{ color:#eafbea; border-color: var(--qf-g400); }
.btn-outline-primary:hover{ background: var(--qf-g600); border-color: var(--qf-g600); }

.btn-blink{
  animation: qf-blink 1s ease-in-out infinite;
}

@keyframes qf-blink{
  0%,100%{
    box-shadow: 0 0 0 rgba(255,255,255,0);
    transform: translateY(0);
    opacity: 1;
  }
  50%{
    box-shadow: 0 0 12px rgba(255,255,255,0.45);
    transform: translateY(-1px);
    opacity: 0.8;
  }
}