/* === Reset / Basis === */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  line-height: 1.4;
  font-size: 16px;
}
a { color: #38bdf8; text-decoration: none; }
a:hover { text-decoration: underline; }

/* === Layout === */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  background: #0f172a;
  padding: 8px 0;
  z-index: 10;
}

/* === Avatar-Grid === */
.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  justify-content: center;
}
@media (max-width: 1200px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 500px)  { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } }

/* === Avatar-Kacheln === */
.tile {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 6px;
  text-align: center;
  cursor: pointer;
  transition: transform .12s, opacity .12s;
}
.tile:hover { transform: translateY(-2px); }
.tile.down { opacity: .3; transform: none; filter: grayscale(1); }
.face { width: 100%; aspect-ratio: 1 / 1; display:flex; align-items:center; justify-content:center; }
.face img, .face svg { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.tile .name { margin-top: 4px; font-size: clamp(12px, 2.5vw, 16px); color: #f1f5f9; }

/* === Panels === */
.panel { display: grid; grid-template-columns: 1fr 300px; gap: 5px; margin-top: 10px; }
@media (max-width: 900px) { .panel { grid-template-columns: 1fr; } }
.card { background:#1e293b; border:1px solid #334155; border-radius: 12px; padding: 12px; margin-bottom: 16px; }
h1, h2, h3 { margin-bottom: 8px; font-weight: 600; }

/* === Badge === */
.badge { display:inline-flex; align-items:center; background:#0ea5e9; color:#072f35; font-weight:600; padding:6px 12px; border-radius:999px; font-size:clamp(13px,2.5vw,15px); margin-bottom:10px; }
.panel .badge { grid-column: 1 / -1; }

/* === Form / Buttons === */
input, select, textarea, button { font-family: inherit; font-size: clamp(14px, 2.8vw, 16px); border-radius: 8px; border: 1px solid #334155; padding: 10px 12px; background: #0f172a; color: #e2e8f0; }
button { background: #38bdf8; border: none; color: #0f172a; font-weight: 600; cursor: pointer; transition: background .2s; }
button:hover { background: #0ea5e9; }
button:disabled { background: #475569; cursor: not-allowed; }

/* === Schnellfragen === */
.quick-questions { display:flex; flex-wrap:wrap; gap:6px; }
.quick-questions button { flex: 1 1 calc(25% - 8px); font-size: clamp(13px, 2.8vw, 14px); padding: 10px; }
@media (max-width: 500px) { .quick-questions button { flex: 1 1 100%; } }

/* === Log === */
.log { background:#0b1220; border:1px solid #1f2937; border-radius:8px; padding:8px; max-height:220px; overflow-y:auto; font-size:clamp(13px,2.6vw,15px); }
.log div { margin-bottom: 4px; }

/* === Muted === */
.muted { color:#94a3b8; font-size: clamp(13px, 2.6vw, 15px); }

/* === Floating Controls === */
.floating-controls { position: fixed; bottom: 12px; right: 12px; display:flex; flex-direction:column; gap:10px; z-index:50; }
.floating-controls button { width:44px; height:44px; border-radius:50%; background: rgba(30,41,59,0.85); color:#e2e8f0; border:1px solid #475569; display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; transition: background .2s; }
.floating-controls button:hover { background: rgba(51,65,85,0.95); }


/* Geheimfigur optisch markieren */
.tile.secret {
  border: 2px solid #ff0000;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25) inset;
}

/* Gesperrte Controls klar „grau“ */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

/* Gemeinsame Breitenbegrenzung für Board & Eingabezeile */
:root {
  /* Passe den Wert an deinen Geschmack an; das ist die Obergrenze. */
  --board-max: 900px;
}

/* Board und Steuerleisten zentriert und gleich breit */
#board,
#askBox {
  width: min(100%, var(--board-max));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Fragezeile: Input füllt, Button bleibt kompakt */
#askBox {
  display: flex;
  gap: 0.5rem;            /* Abstand zwischen Input & Button */
  align-items: stretch;   /* gleiche Höhe */
}

#txtQuestion {
  flex: 1;
  min-width: 0;           /* verhindert Überlaufen bei langen Platzhaltern */
}

#btnAsk {
  flex: 0 0 auto;         /* bleibt so breit wie nötig */
}

/* Auf sehr schmalen Phones lieber untereinander */
@media (max-width: 380px) {
  #askBox { 
    flex-direction: column;
  }
  #btnAsk {
    width: 100%;
  }
}

/* Optional: gleiche Innenabstände wie beim Board (wenn du magst) */
#askBox input,
#askBox button {
  height: 44px;                   /* fingerfreundlich */
}

/* Schnellfragen als flexibles Grid */
#quickQuestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Standard (Tablet/Desk): frei skalierend */
#quickQuestions button {
  flex: 1 1 calc(33.33% - 8px); /* 3 pro Reihe als Default – kannst du ändern */
}

/* Smartphones: genau 2 pro Reihe */
@media (max-width: 600px) {
  #quickQuestions button {
    flex: 1 1 calc(50% - 8px);
  }
}