/* Öffentliche Streamer-Übersicht — baut auf pixel-theme.css auf (muss davor
   eingebunden werden, siehe streamers.ejs). Enthält nur, was für DIESE Seite
   spezifisch ist (Hero, Karten-Grid); Farben/Font/.pixel-panel/.pixel-btn/
   .section-title kommen aus der gemeinsamen Basis. */

/* ── Hero-Kopf (volle Breite) ── */
.streamers-hero {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 64px 20px 48px;
  border-bottom: 1px solid var(--gold-outline);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(200,168,75,0.10) 0%, transparent 65%),
    radial-gradient(ellipse at 50% 100%, rgba(163,199,122,0.05) 0%, transparent 60%);
}

.streamers-logo-frame {
  width: 168px; height: 168px;
  padding: 8px;
  flex-shrink: 0;
}
.streamers-logo-frame img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }

.streamers-hero h1 {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--gold-bright);
  letter-spacing: 3px;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #000;
}
.streamers-sub { font-size: 17px; color: var(--tan); text-shadow: 1px 1px 0 #000; }

/* ── Seiteninhalt ── */
.streamers-page {
  max-width: 1500px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

.streamers-empty {
  text-align: center;
  padding: 60px 20px;
  font-size: 15px;
  color: var(--tan);
  text-shadow: 1px 1px 0 #000;
}

/* ── Karten-Grid ──
   justify-content:center statt einfach mehr Spalten zulassen: bei wenigen
   Karten (z.B. nur 2 live) sollen die vorhandenen Karten als Gruppe
   mittig stehen, statt oben links zu kleben und rechts einen toten
   Leerraum zu lassen. */
.streamers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.streamer-card {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.streamer-card.is-live {
  border-color: var(--red);
  outline-color: var(--red-outline);
  box-shadow: 0 0 0 1px #000, 4px 4px 0 #000, 0 0 22px rgba(224,85,85,0.25);
}
.streamer-card.is-live::before, .streamer-card.is-live::after,
.streamer-card.is-live .corner-bl, .streamer-card.is-live .corner-br { background: var(--red); }

.streamer-card.is-minecraft {
  border-color: var(--green);
  outline-color: var(--green-outline);
  box-shadow: 0 0 0 1px #000, 4px 4px 0 #000, 0 0 26px rgba(163,199,122,0.3);
}
.streamer-card.is-minecraft::before, .streamer-card.is-minecraft::after,
.streamer-card.is-minecraft .corner-bl, .streamer-card.is-minecraft .corner-br { background: var(--green); }

.streamer-card.is-offline { opacity: 0.5; }

.streamer-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.streamer-avatar-frame {
  width: 52px; height: 52px;
  flex-shrink: 0;
  padding: 3px;
  background: var(--panel-bg);
  border: 3px solid var(--gold-outline);
}
.streamer-avatar-frame img,
.streamer-avatar-frame .no-avatar {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: #2a2013;
}

.streamer-identity { min-width: 0; flex: 1; }
.streamer-name {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold-bright);
  text-shadow: 1px 1px 0 #000;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.streamer-mc-name {
  font-size: 12px;
  color: #7a9c5a;
  text-shadow: 1px 1px 0 #000;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.streamer-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.live-badge, .mc-badge {
  font-family: var(--font-display);
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  text-shadow: 1px 1px 0 #000;
}
.live-badge {
  background: #2a0e0e; color: var(--red); border: 2px solid var(--red);
}
.live-badge .live-dot {
  width: 6px; height: 6px; background: var(--red);
  box-shadow: 0 0 6px rgba(224,85,85,0.8);
  animation: pixel-pulse 1s steps(2) infinite;
}
.mc-badge {
  background: #0e1e0e; color: var(--green); border: 2px solid var(--green);
}

.streamer-game-line {
  font-size: 12px;
  color: var(--tan);
  text-shadow: 1px 1px 0 #000;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.streamer-game-line .viewers { color: var(--tan-dim); }

.streamer-bio {
  font-size: 12px;
  color: var(--tan);
  text-shadow: 1px 1px 0 #000;
  line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.streamer-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}

.streamer-social-link {
  width: 30px; height: 30px;
  font-size: 14px;
}

.streamer-watch-link {
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 8px 14px;
  margin-left: auto;
  color: var(--gold-bright);
}

@media (max-width: 480px) {
  .streamers-grid { grid-template-columns: 1fr; }
  .streamers-hero { padding: 44px 20px 32px; }
  .streamers-logo-frame { width: 108px; height: 108px; }
  .streamers-hero h1 { font-size: 32px; }
}