body { font-family: sans-serif; background: #121214; color: #fff; margin: 0; padding: 20px; user-select: text; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
h1 { color: #8a2be2; margin: 0; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.active-user-box { 
  display: flex; 
  align-items: center; 
  gap: 6px; 
  background: #1e1e24; 
  padding: 4px 10px; 
  border-radius: 6px; 
  border: 1px solid #8a2be2;
  font-weight: bold;
}

input, select, textarea, button { padding: 8px 12px; background: #2a2a32; border: 1px solid #444; color: #fff; border-radius: 4px; font-size: 14px; }
button { background: #8a2be2; border: none; cursor: pointer; font-weight: bold; }
button:hover { background: #9d4edd; }
button.secondary { background: #444; }
button.danger { background: #dc2626; }
button.danger:hover { background: #ef4444; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

/* =========================================
   KARTEN DESIGN (Nach deiner Skizze)
   ========================================= */
.card { 
  background: #1e1e24; 
  border: 2px solid #333; /* Äußerer Rahmen wie auf dem Bild */
  border-radius: 8px; 
  display: flex; 
  flex-direction: column; 
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 12px; /* Padding innen, damit das Bild eingerahmt wirkt */
}
.card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 20px rgba(138, 43, 226, 0.3);
  border-color: #8a2be2;
}

/* Der Rahmen um das Bild */
.card-image-container {
  border: 2px solid #444; 
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}
.card-image-container img { 
  width: 100%; 
  height: 280px; /* Hier kannst du die Bildgröße für den PC anpassen! */
  object-fit: cover; 
  display: block;
  background: #222; 
}

.card-content { display: flex; flex-direction: column; }
.card-title {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: #fff;
}

.card-stars {
  font-size: 14px;
  margin-top: 5px;
  letter-spacing: 2px;
}

/* Das 2-Spalten Layout darunter */
.card-body {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

/* Linke Spalte (Boxen) */
.card-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
}

/* Die Boxen im Skizzen-Style */
.sketch-box { 
  display: inline-block; 
  padding: 4px 10px; 
  border-radius: 4px; 
  font-size: 12px; 
  font-weight: bold; 
  border: 1px solid #fff; /* Fester Rahmen */
}
.user-box { border-color: #8a2be2; background: rgba(138, 43, 226, 0.1); color: #c48df5; }
.status-box { border-color: #2563eb; background: rgba(37, 99, 235, 0.1); color: #93c5fd; }
.platform-box { border-color: #059669; background: rgba(5, 150, 105, 0.1); color: #6ee7b7; }

/* Rechte Spalte (Tags) */
.card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Rechtsbündig untereinander */
  gap: 4px;
}
.sketch-tag {
  font-size: 12px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-notes { color: #888; margin-top: 15px; display: block; border-top: 1px dashed #444; padding-top: 8px; }

/* Modal Overlay */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal.hidden { display: none; }
.modal-content { background: #1e1e24; padding: 20px; border-radius: 8px; width: 420px; display: flex; flex-direction: column; gap: 10px; max-height: 90vh; overflow-y: auto; position: relative; }
.modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

/* Custom Multi-Select Dropdowns */
.custom-dropdown { position: relative; width: 100%; }
.dropdown-header { 
  background: #2a2a32; 
  border: 1px solid #444; 
  padding: 8px 12px; 
  border-radius: 4px; 
  cursor: pointer; 
  font-size: 14px;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dropdown-header::after {
  content: "▼";
  font-size: 10px;
  color: #aaa;
}

.dropdown-list { 
  position: absolute; 
  top: calc(100% + 4px); 
  left: 0; 
  width: 100%; 
  background: #2a2a32; 
  border: 1px solid #555; 
  border-radius: 4px; 
  max-height: 160px; 
  overflow-y: auto; 
  z-index: 1010; 
  box-shadow: 0 6px 16px rgba(0,0,0,0.6);
  box-sizing: border-box;
}
.dropdown-list.hidden { display: none; }

.dropdown-item { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  padding: 8px 12px; 
  cursor: pointer; 
  font-size: 13px;
  user-select: none;
}
.dropdown-item:hover { background: #3f3f4e; }
.dropdown-item input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; }

/* =========================================
   MOBILE DESIGN (Aufgeräumte Tabs & Grid)
   ========================================= */
@media (max-width: 650px) {
  body { padding: 10px; }

  header { 
    flex-direction: column; 
    align-items: stretch; 
    gap: 15px; 
  }

  /* Die Tabs/Controls in ein sauberes Grid packen */
  .controls { 
    display: grid; 
    grid-template-columns: 1fr 1fr; /* Zwei gleich große Spalten */
    gap: 8px; 
    width: 100%; 
  }

  /* Elemente, die die volle Breite nehmen sollen */
  .active-user-box, 
  #searchInput, 
  #openModalBtn { 
    grid-column: 1 / -1; 
  }

  /* Alle Eingabefelder füllen ihre jeweilige Zelle aus */
  .controls input, 
  .controls select, 
  .controls button, 
  .active-user-box { 
    width: 100%; 
    box-sizing: border-box; 
    margin: 0;
    font-size: 13px; /* Schrift minimal verkleinern für Handys */
  }

  /* Spiele-Karten: 2 Karten nebeneinander auf dem Handy */
  .grid { 
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei gleich große Spalten */
    gap: 10px; /* Abstand minimal verkleinern */
  }
  
  /* Bilder etwas niedriger machen, damit die Proportionen bei schmalen Karten stimmen */
  .card-image-container img { height: 160px; } 

  /* Schriften in den Boxen minimal verkleinern, damit alles in die schmalen Karten passt */
  .card-title { font-size: 1.1rem; }
  .sketch-box { font-size: 10px; padding: 2px 6px; }
  .sketch-tag { font-size: 10px; }

  /* Modal (Pop-Up) für kleine Displays anpassen */
  .modal-content { 
    width: 95%; 
    padding: 15px; 
    max-height: 85vh; 
  }
  .modal-actions { flex-direction: column; gap: 10px; }
  .modal-actions button { width: 100%; margin: 0; }
  .modal-actions div { display: none; }
}