/* Hinweise für Einladungen & Meldungen – im Neon-Stil von cued, auch in den Spielen */

.cued-hinweise {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.cued-hinweis {
  pointer-events: auto;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #3A4A66;
  background: rgba(18, 23, 37, 0.97);
  color: #E6EEF8;
  font-family: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: cued-rein 0.25s ease-out;
}
.cued-hinweis p { margin: 0; }
.cued-hinweis.einladung { border-color: #FF4FD8; box-shadow: 0 0 28px rgba(255, 79, 216, 0.35), 0 10px 30px rgba(0, 0, 0, 0.5); }
.cued-hinweis.warten { border-color: #2EE6D6; }
.cued-hinweis.fehler { border-color: #FF6B7A; }

.cued-hinweis-knoepfe { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cued-hinweis-knoepfe button {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid #3A4A66;
  background: transparent;
  color: #E6EEF8;
  font-family: 'Chakra Petch', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.cued-hinweis-knoepfe button.haupt { background: #FF4FD8; border-color: #FF4FD8; color: #0A0D14; }
.cued-hinweis-knoepfe button:focus-visible { outline: 2px solid #2EE6D6; outline-offset: 2px; }

@keyframes cued-rein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }