/* Joculus Studios — wiki-pitbreakers.css
   Nur für das Pitbreakers-Wiki: Motto, Schritte, Zieldemo, Karten für Bälle, Helden, Gegner und Gebäude, Galerien.
   Farben aus dem Spiel (docs/ART_BIBLE.md): Gold #F6BD58, Schieferblau #102033, Kanten #435A72, Feuer #FF6A1A, Blitz #5AD7FF. */

.pb-motto {
  margin: 18px 0; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em;
  color: #f6bd58; text-shadow: 0 0 18px rgba(246, 189, 88, 0.4);
}
.pb-caption { font-size: 0.86rem; color: var(--text-faint); }
.pb-stat { margin: 0 0 4px; font-size: 0.82rem; color: #f6bd58; font-weight: 600; }
.pb-stat.boss { color: #ff6a1a; }

/* ---------- Schritte ---------- */
.wiki-content ol.pb-steps { padding-left: 1.3em; }
.pb-steps li { margin-bottom: 8px; }

/* ---------- Zieldemo ---------- */
.pb-demo { margin: 20px 0 30px; max-width: 420px; }
.pb-canvas {
  display: block; width: 100%; height: auto; border-radius: 14px; background: #102033;
  border: 1px solid #435a72; box-shadow: 0 18px 40px rgba(3, 8, 20, 0.45);
  cursor: crosshair; touch-action: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.pb-canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pb-demo-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 0.86rem; color: var(--text-faint); min-height: 1.6em; }
.pb-demo-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.pb-btn {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); cursor: pointer;
  background: var(--surface); color: var(--text); font: 600 0.88rem var(--font-body);
}
.pb-btn:hover { background: var(--surface-hover); }
.pb-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pb-btn[aria-pressed="true"] { border-color: #f6bd58; color: #f6bd58; background: rgba(246, 189, 88, 0.1); }

/* ---------- Karten ---------- */
.pb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 16px 0 24px; }
.pb-card {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: radial-gradient(ellipse at 0% 0%, rgba(246, 189, 88, 0.08), transparent 60%), var(--bg-elevated);
}
.pb-card img { width: 72px; height: 72px; object-fit: contain; border-radius: 12px; background: radial-gradient(circle, rgba(246, 189, 88, 0.16), transparent 70%); }
.wiki-content .pb-card h3 { margin: 0 0 4px; font-size: 1rem; }
.pb-card h3 small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; color: var(--text-faint); }
.pb-card p { margin: 0 0 4px; font-size: 0.9rem; line-height: 1.55; }
.pb-card.boss { border-color: rgba(255, 106, 26, 0.45); background: radial-gradient(ellipse at 50% 0%, rgba(255, 106, 26, 0.12), transparent 65%), var(--bg-elevated); }
.pb-cards-big .pb-card { grid-template-columns: 96px minmax(0, 1fr); }
.pb-cards-big .pb-card img { width: 96px; height: 96px; }

/* Ballfarbe als Punkt vor dem Namen */
.pb-dot { display: inline-block; width: 0.8em; height: 0.8em; margin-right: 6px; border-radius: 50%; vertical-align: -0.05em; background: var(--pb-dot, #f6bd58); box-shadow: 0 0 8px var(--pb-dot, #f6bd58); }

/* Kleines Symbol in Tabellenzeilen */
.wiki-table .pb-icon { width: 32px; height: 32px; margin-right: 6px; vertical-align: middle; border-radius: 8px; }

/* ---------- Galerien ---------- */
.pb-gallery { display: grid; gap: 12px; margin: 16px 0 24px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pb-gallery figure { margin: 0; }
.pb-gallery img { display: block; width: 100%; height: auto; border-radius: 12px; }
.pb-gallery figcaption { margin-top: 4px; font-size: 0.84rem; color: var(--text-faint); text-align: center; }

/* ---------- Biome ---------- */
.pb-biome { margin: 8px 0 6px; font-size: 0.86rem; letter-spacing: 0.06em; color: #f6bd58; font-weight: 700; }

@media (max-width: 560px) {
  .pb-card, .pb-cards-big .pb-card { grid-template-columns: 64px minmax(0, 1fr); }
  .pb-card img, .pb-cards-big .pb-card img { width: 64px; height: 64px; }
}