/* Paleta basada en la estrella */
:root {
  --bg-main: #1f2226;
  --bg-panel: #262a30;
  --bg-panel-soft: #30353c;

  --primary: #f7931e;      /* naranja estrella */
  --primary-2: #ffb347;
  --secondary: #315c6b;    /* azul sombra */

  --text-main: #f9fafb;
  --text-muted: #9ca3af;
}

/* Solo fuente, fondo y color de texto general */
body {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
}

/* LOGIN: dejamos que tus CSS manden en tamaños, solo cambiamos fondo/texto */
#wrapper,
section#main {
  background: transparent;
  color: var(--text-main);
}

/* Panel principal de juego / login: solo color de fondo y texto */
#principal,
.panel-body-flower {
  background-color: var(--bg-panel);
  color: var(--text-main);
}

/* Zona de mensajes: solo color; NO tocamos overflow, ni tamaños */
#messages {
  background-color: var(--bg-panel-soft);
  color: var(--text-main);
}

/* Textos secundarios */
p,
label,
small,
span {
  color: inherit;
}

/* Enlaces: solo color */
a {
  color: var(--primary);
}

a:hover {
  color: var(--primary-2);
}

/* Botones: solo colores, nada de padding/width/height */
.button,
.btn_desconecta,
#boton-jugar,
input[type="submit"],
button {
  background-image: linear-gradient(135deg, var(--primary), var(--primary-2));
  background-color: var(--primary);
  color: #111827;
  border-color: transparent;
}

/* Para que mensajes de error se sigan viendo bien */
[style*="color: red"] {
  color: #ff6b6b !important;
}
/* Botón de respuesta seleccionado: sin degradado, verde azulado */
.button.selected {
    background-image: none !important;    /* quita el degradado naranja */
    background-color: #00cec9 !important; /* tu color verde azulado */
    color: #000;
    box-shadow: 0 0 10px #00cec9;
    transform: scale(1.03);
    transition:
        transform 0.12s ease-out,
        box-shadow 0.15s ease-out,
        background-color 0.2s ease-out;
    animation: tapSelected 120ms ease-out;
}

@keyframes tapSelected {
    0%   { transform: scale(0.97); }
    100% { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
    .button.selected {
        animation: none;
    }
}