/**
 * SESSION-SCHREIBTISCH CSS
 * Modernes 3-Phasen Workflow-System für QRENA
 * Version: 1.2 - Responsive Global Pills
 */

/* ==================== GLOBAL WORKFLOW PILLS CONTAINER ==================== */


/* ── HOVER-COLLAPSE: Standard zeigt nur Kreise (~36px hoch) ─── */

/* ── HOVER: Expandiert auf volle Ansicht ────────────────────── */

/* Volle Ansicht (Default - auf Schreibtisch) */


/* Kompakte Ansicht (auf anderen Seiten) */


/* ==================== WORKFLOW PILLS (Basis-Styles) ==================== */


/* Connector zwischen Pills */

/* Phase Colors */

/* Active State */


/* Completed State */


/* Connector wird gefärbt wenn Phase completed */

/* Mobile Responsive */
@media (max-width: 600px) {


}

/* ==================== MINI WORKFLOW INDICATOR (für andere Seiten) ==================== */


.mini-num {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.mini-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.2s ease;
}


/* Phase Colors für Mini-Pills */

/* Active State */


/* Completed State */


/* Mobile */
@media (max-width: 480px) {


  .mini-label {
    display: none;
  }

}

/* ==================== LEGACY WORKFLOW TABS (kept for compatibility) ==================== */


/* Tab Colors */


.tab-number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.3s ease;
  position: relative; /* Für ::after positioning */
}


@keyframes completePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--tab-color-rgb), 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(var(--tab-color-rgb), 0);
  }
  100% {
    box-shadow: 0 0 20px rgba(var(--tab-color-rgb), 0.6);
  }
}


@keyframes checkmarkPop {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-45deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}


.tab-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.tab-subtitle {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

.tab-status {
  font-size: 0.75rem;
  color: var(--tab-color);
  font-weight: 600;
  margin-top: 4px;
}

/* ==================== TASK TYPE DONUT CHART (DESIGN-11) ==================== */

.task-type-donut-card {
  min-width: 200px;
  flex: 1.5;
}

.task-type-donut-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* SVG Donut Chart */
.donut-chart {
  width: 90px;
  height: 90px;
  transform: rotate(-90deg);
  flex-shrink: 0;
}

.donut-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 12;
}

.donut-segment {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 0 251.2;
  stroke-dashoffset: 0;
  transition: stroke-dasharray 0.6s ease;
}

/* Center Text */
.donut-center-count {
  font-size: 18px;
  font-weight: 800;
  fill: #fff;
  text-anchor: middle;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}

.donut-center-label {
  font-size: 7px;
  fill: rgba(255, 255, 255, 0.6);
  text-anchor: middle;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}

/* Legende */
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
}

.legend-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  min-width: 20px;
  text-align: right;
}

/* Mobile */
@media (max-width: 480px) {
  .task-type-donut-wrapper {
    flex-direction: column;
    gap: 12px;
  }

  .donut-chart {
    width: 70px;
    height: 70px;
  }

  .donut-legend {
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .legend-label {
    font-size: 0.75rem;
  }
}

/* ── Phase 1 Donut: Portrait → Donut ausblenden, nur Typen-Liste zeigen ── */
@media (orientation: portrait) and (max-width: 1024px) {
  .donut-chart { display: none; }
  .task-type-donut-wrapper { gap: 6px; }
  .donut-legend { gap: 6px; }
}

/* ==================== POINTS DISTRIBUTION (FIX-3) ==================== */

.points-distribution-card {
  min-width: 180px;
  flex: 1.2;
}

.points-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.points-total {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.points-total-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #10b981;
}

.points-total-label {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
}

.points-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.points-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.points-bar-label {
  min-width: 40px;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: right;
}

.points-bar-track {
  flex: 1;
  height: 20px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.points-bar-fill {
  height: 100%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  transition: width 0.5s ease;
  min-width: fit-content;
}

.points-bar-count {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
}

/* Farben für verschiedene Punktstufen */
.points-bar-fill.low { background: linear-gradient(90deg, #10b981, #34d399); }
.points-bar-fill.medium { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.points-bar-fill.high { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.points-bar-fill.very-high { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

/* Mobile */
@media (max-width: 480px) {
  .points-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .points-bar-label {
    min-width: 35px;
    font-size: 0.7rem;
  }

  .points-bar-track {
    height: 16px;
  }
}

/* ==================== PHASE CONTAINERS ==================== */

.phase-container {
  display: none;
}

.phase-container.active {
  display: block;
  animation: viewFadeIn 0.22s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================== PHASE 1: AUFGABEN ==================== */

.phase-1-content {
  display: grid;
  gap: 24px;
}

.tasks-overview-card {
  padding: 24px;
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.1) 0%,
    rgba(59, 130, 246, 0.05) 100%);
  border: 2px solid rgba(59, 130, 246, 0.3);
}

.tasks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.tasks-count {
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tasks-label {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 4px;
}

.tasks-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--qr-primary-light);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--muted);
}

.tasks-type-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.task-type-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.task-type-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.task-type-icon {
  font-size: 1.2rem;
}

.task-type-count {
  font-weight: 700;
  color: var(--qr-primary-light);
}

.task-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

/* ==================== EMPTY STATE – PERSONALISIERTE BEGRÜSSUNG ==================== */
.empty-tasks-state {
  text-align: center;
  padding: 0;
  overflow: hidden;
}

/* Greeting Hero Section */
/* ═══════════════════════════════════════════════════════════════════════════
   RALLYE-KOPFBEREICH   (umgebaut 2026-09-03, Etappe 7)

   Dominic: "Bei der Modus Rallye ist der Header ebenfalls viel zu gross! Das
   Icon sieht zu kindisch aus und nimmt viel zu viel Platz weg. Warum ist er
   nicht auch so cool transparent wie der SOL header?"

   Beides zutreffend. Vorher: padding 36/28/24 — das 2,6-fache des Mockup-Hero
   und deutlich mehr als der SOL-Kopf. Das Emoji (3rem + 14px Marge) waren
   62 px REINE Dekoration, dazu eine Dauer-Float-Animation. Und ein Emoji als
   Strukturelement verbietet die eigene QA-Liste des Projekts (Punkt 12,
   "nur SVG-Icons") — bei den SOL-Schaltern war das schon korrigiert, dieser
   Block wurde uebersehen.

   Jetzt dasselbe Rezept wie der SOL-Kopf, aber in der ARENA-Identitaet:
   Dot-Grid, asymmetrischer Glow oben links, Ghost-Wort, Gradient-Text.
   Umrechnung 16,185,129 -> 59,130,246; Akzent #34d399 -> #60a5fa.
   Statt des Emojis das bereits vorhandene qrena_rallye_logo.png, genau wie
   SOL sein Logo nutzt — kein neues Asset noetig.
   ═══════════════════════════════════════════════════════════════════════════ */
.empty-greeting {
  position: relative;
  overflow: hidden;
  text-align: left;
  padding: 14px 16px 12px;
  background: rgba(59, 130, 246, 0.07);
  background-image: radial-gradient(circle, rgba(59,130,246,0.18) 1px, transparent 1px);
  background-size: 22px 22px;
  border-bottom: 0;
}

/* Asymmetrisch oben links, wie bei SOL — nicht zentriert wie vorher. */
.empty-greeting-glow {
  position: absolute;
  top: -50px; left: -10px;
  width: 260px; height: 180px;
  background: radial-gradient(ellipse, rgba(59,130,246,0.22) 0%, transparent 65%);
  pointer-events: none;
}

/* Emoji ausgeblendet, Huelle bleibt: window.updateEmptyGreeting() schreibt
   weiterhin hinein (☀️ ⚡ 🎯 🌆 🌙) und muss nicht angefasst werden. Exakt das
   Muster, das der SOL-Kopf seit laengerem nutzt (#solGreetingEmoji). */
.empty-greeting-emoji { display: none; }

.empty-greeting-logo {
  width: 44px; height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
}

.empty-greeting-row { display: flex; align-items: center; gap: 14px; min-width: 0; }

/* Ghost-Wort rechts unten — Muster aus dem SOL-Kopf, kostet null Hoehe. */
.empty-greeting::after {
  content: 'ARENA';
  position: absolute;
  right: -8px; bottom: -18px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 5rem; font-weight: 900; line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(59, 130, 246, 0.06);
  pointer-events: none; user-select: none;
}

.empty-greeting-line {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #60a5fa;
  line-height: 1;
  margin-bottom: 5px;
}

.empty-greeting-name {
  font-size: 1.25rem;
  font-weight: 900;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  line-height: 1.15;
  margin: 0;
  background: linear-gradient(135deg, #e2e8f0 0%, #93c5fd 55%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Fuellsatz raus (Dominic: "gross und leer") — Element bleibt im DOM, weil
   updateEmptyGreeting() hineinschreibt. */
.empty-greeting-sub { display: none; }

/* Divider */
.empty-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px 0;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.empty-divider::before,
.empty-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.07);
}

/* Action Buttons Row */
.empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px 24px 28px;
}

/* ==================== PHASE 2: KONFIGURATION ==================== */

.phase-2-content {
  display: grid;
  gap: 24px;
}

.config-section {
  padding: 24px;
}

.config-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.config-icon {
  font-size: 2rem;
}

.config-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}

.config-options {
  display: grid;
  gap: 16px;
}

.config-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.option-info {
  flex: 1;
}

.option-label {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.option-description {
  font-size: 0.85rem;
  color: var(--muted);
}

.option-control {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.2);
  transition: 0.4s;
  border-radius: 28px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--qr-success);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

/* Number Input */
.number-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.number-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.2rem;
  color: white;
  font-family: inherit;
}

.number-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.number-display {
  min-width: 48px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
}

/* ==================== PHASE 3: LOS GEHT'S ==================== */

.phase-3-content {
  display: grid;
  gap: 24px;
}

.ready-banner {
  padding: 32px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.15) 0%,
    rgba(16, 185, 129, 0.05) 100%);
  border: 2px solid var(--qr-success);
  text-align: center;
}

.ready-icon {
  font-size: 4rem;
  margin-bottom: 16px;
}

.ready-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--qr-success);
}

.ready-subtitle {
  font-size: 1.1rem;
  color: var(--muted);
  margin-bottom: 24px;
}

.ready-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.ready-stat {
  text-align: center;
}

.ready-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--qr-primary-light);
}

.ready-stat-label {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 4px;
}

.pin-display-large {
  padding: 24px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  border: 2px solid var(--qr-primary);
  text-align: center;
  margin-bottom: 24px;
}

.pin-label-large {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 12px;
}

.pin-code-display {
  font-size: 3.5rem;
  font-weight: 900;
  letter-spacing: 8px;
  color: var(--qr-primary-light);
  margin-bottom: 16px;
  font-family: 'Courier New', monospace;
}

.pin-copy-btn {
  margin: 0 auto;
}

.launch-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.launch-card {
  padding: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.launch-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--qr-primary);
  transform: translateY(-4px);
}

.launch-card-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.launch-card-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.launch-card-description {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 20px;
}

.launch-card-button {
  width: 100%;
}

/* Lobby Section */
.lobby-section {
  padding: 24px;
}

.lobby-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.lobby-title {
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}

.team-counter-badge {
  padding: 4px 12px;
  background: var(--qr-primary);
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
}

.lobby-teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.lobby-team-card {
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.lobby-team-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--qr-primary);
}

.team-emoji {
  font-size: 2rem;
  margin-bottom: 8px;
}

.team-name {
  font-weight: 700;
  margin-bottom: 8px;
}

.team-members {
  font-size: 0.85rem;
  color: var(--muted);
}

.lobby-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1024px) {


  .tasks-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ready-stats {
    gap: 20px;
  }

  .launch-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .tab-subtitle {
    display: none;
  }

  .tasks-count {
    font-size: 2rem;
  }

  .stat-value {
    font-size: 1.4rem;
  }

  .pin-code-display {
    font-size: 2.5rem;
    letter-spacing: 4px;
  }

  .ready-icon {
    font-size: 3rem;
  }

  .ready-title {
    font-size: 1.5rem;
  }

  .lobby-teams-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================== UTILITY CLASSES ==================== */

.phase-nav-buttons {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}

.btn-phase-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
}

.btn-phase-nav.btn-back {
  flex: 0 0 auto;
}

.btn-phase-nav.btn-next {
  flex: 1;
  justify-content: center;
}

/* 🆕 Optische Aufwertung nur für den Phase-1-Nav-Container (erscheint erst nach Moduswahl,
   siehe setModeGatedVisibility() in lehrkraft.html) — die anderen beiden .phase-nav-buttons
   (Phase 2/3) bleiben unverändert. */
#phase1NavButtons {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#phase1NavButtons .btn-phase-nav.btn-next {
  font-size: 1.05rem;
  padding: 14px 28px;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

#phase1NavButtons .btn-phase-nav.btn-next:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(37, 99, 235, 0.5);
}

/* ════════════════════════════════════════════════════════════════
   GLOBALES RESPONSIVE FRAMEWORK — session-desk.css Ergänzungen
   ════════════════════════════════════════════════════════════════ */

/* ── FIX: Hover-Expand für full-view + compact-view deaktivieren ───
   Pills bleiben immer stabil, kein Größenwechsel bei Mouse-Over.
   ─────────────────────────────────────────────────────────────── */


/* ── MOBILE: Pills komprimiert (nur Nummern, kein Text) ─────────── */
@media (max-width: 640px) {
}

/* ── Phase-Nav-Buttons: auf kleinen Bildschirmen umbrechen ─────── */
@media (max-width: 480px) {
  .phase-nav-buttons { flex-wrap: wrap; gap: 8px; }
  .btn-phase-nav { flex: 1 1 calc(50% - 4px); min-width: 120px; font-size: 0.82rem; }
  .btn-phase-nav.btn-back { flex: 0 0 100%; order: 3; }
}

/* ── Team Lobby Card (Warteraum Phase 3) ── */
.team-lobby-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  text-align: center;
}

.team-lobby-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.team-lobby-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  word-break: break-word;
}

.team-lobby-status {
  font-size: 0.7rem;
  color: #10b981;
  font-weight: 500;
}