/* === 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;
}

/* Tablet quer / kleinere Screens: 5 Spalten */
@media (max-width: 1200px) {
  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Smartphones: 4 Spalten Minimum */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Ganz kleine Phones: weiter 4 Spalten, nur enger */
@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 (rechts: Fragen, Antworten, Log) === */
.panel {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  margin-top: 20px;
}
@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 / Statusanzeige === */
.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; }

/* === Formular & 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: 8px;
}
.quick-questions button {
  flex: 1 1 calc(50% - 8px);
  font-size: clamp(13px, 2.8vw, 16px);
  padding: 10px;
}
@media (max-width: 500px) {
  .quick-questions button { flex: 1 1 100%; }
}

/* === Log / Chat === */
.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; }

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


/* === Martsoft Release Enhancements (safe append) === */

/* Brand header */
.header-brand {
  display:flex; align-items:center; justify-content:space-between;
  width:min(100%, var(--board-max, 900px)); margin:12px auto 8px; gap:.75rem;
}
.header-left { display:flex; align-items:center; gap:.5rem; }
.header-left .logo-dot { width:10px; height:10px; border-radius:9999px; background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.8); }
.header-left .brand { font-weight:800; letter-spacing:.3px; font-size:clamp(16px, 3.6vw, 20px); }
.header-actions { display:flex; align-items:center; gap:.5rem; }
.header-actions button { height:36px; padding:0 12px; }

/* Theme toggle */
.theme-toggle { border:1px solid rgba(148,163,184,.25); background:transparent; border-radius:8px; }
.theme-toggle:focus { outline:none; box-shadow:0 0 0 2px rgba(59,130,246,.35); }

/* Player color accents */
:root {
  --playerA:#60a5fa; /* blue-400 */
  --playerB:#f87171; /* red-400 */
}
.badge.turnA { background: rgba(96,165,250,.15); color:#bfdbfe; border:1px solid rgba(96,165,250,.35); }
.badge.turnB { background: rgba(248,113,113,.15); color:#fecaca; border:1px solid rgba(248,113,113,.35); }

/* Secret border per player slot applied via .secretA / .secretB on .tile */
.tile.secretA { border:2px solid var(--playerA); box-shadow:0 0 0 3px rgba(96,165,250,.25) inset; }
.tile.secretB { border:2px solid var(--playerB); box-shadow:0 0 0 3px rgba(248,113,113,.25) inset; }

/* Card flip-ish animation */
.tile { transition: transform .18s ease, box-shadow .18s ease; transform-origin:center; }
.tile:active { transform: scale(.97); }
.tile.down .face img { filter: grayscale(.9) brightness(.8); opacity:.6; }
.tile.down { box-shadow: inset 0 0 0 9999px rgba(15,23,42,.55); }

/* Log fade-in */
#log > div { animation: logfade .25s ease; }
@keyframes logfade { from { opacity:0; transform: translateY(4px);} to {opacity:1; transform:none;} }

/* Stats block */
#stats {
  width:min(100%, var(--board-max, 900px)); margin:10px auto 8px; display:flex; flex-wrap:wrap; gap:8px;
}
#stats .stat { flex:1 1 120px; background:rgba(148,163,184,.08); border:1px solid rgba(148,163,184,.18); border-radius:10px; padding:8px 10px; }
#stats .stat b { display:block; font-size:clamp(14px,3vw,15px); }
#stats .stat span { font-size:clamp(12px,2.5vw,13px); opacity:.85; }

/* Ask panel width to match board/log */
#askPanel, #log, #board { width:min(100%, var(--board-max, 900px)); margin-left:auto; margin-right:auto; }

/* Quick questions responsive 2-per-row on phones */
#quickQuestions { display:flex; flex-wrap:wrap; gap:8px; }
#quickQuestions button { flex:1 1 calc(33.33% - 8px); }
@media (max-width:600px){ #quickQuestions button { flex:1 1 calc(50% - 8px);} }

/* QR Modal */
#qrModal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:50; }
#qrModal .inner { background:#0b1220; color:#e2e8f0; border:1px solid rgba(148,163,184,.25); padding:16px; border-radius:12px; width: 90%; max-width: 360px; text-align:center; }
#qrModal img { display:block; margin:10px auto; }
#qrModal button { margin-top:8px; }

/* Theme (light support) */
:root.light { color-scheme: light; }
:root.light body { background:#f6f7fb; color:#0f172a; }
:root.light .tile.down { box-shadow: inset 0 0 0 9999px rgba(0,0,0,.07); }
:root.light #qrModal .inner { background:white; color:#111827; }

/* --- FIX: Board als Grid + Bildgröße bändigen --- */
#board{
  display: grid;
  gap: 8px;
  width: min(100%, var(--board-max, 900px));
  margin: 8px auto;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}

/* Mindestens 4 Spalten auf Phones */
@media (max-width: 600px){
  #board{
    grid-template-columns: repeat(4, 1fr); /* genau 4 pro Reihe */
  }
}

/* Kachel-Layout */
#board .tile{
  background: #0f172a;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 10px;
  overflow: hidden;
}

/* Quadratisches Bildfeld */
#board .tile .face{
  aspect-ratio: 1 / 1;
}

/* Bilder sauber einpassen (keine Monster-Bilder) */
#board .tile .face img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Namen unter dem Bild */
#board .tile .name{
  text-align: center;
  font-size: 12px;
  padding: 4px 6px;
  color: #cbd5e1;
}