/* Joculus Studios — wiki-wuerfel-dungeon.css
   Nur für das Würfel-Dungeon-Wiki: Würfelbecher, Gegnerkarten, Bildkacheln.
   Farben nach dem Spiel: Gold für Hauptaktionen, Rot Angriff, Blau Schild, Grün Heilung. */

.wd-gold { color: #f2c35b; }

/* ---------- Würfelbecher ---------- */
.wd-cup {
  margin: 20px 0 30px; max-width: 560px; padding: 18px; border-radius: var(--radius);
  border: 1px solid #4a3a22;
  background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(242, 195, 91, 0.12), transparent 70%), #17120c;
  box-shadow: var(--shadow-card);
}
.wd-cup-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.86rem; color: var(--text-faint); }
.wd-cup-rolls { color: #f2c35b; white-space: nowrap; }
.wd-cup-dice { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.wd-die {
  aspect-ratio: 1; padding: 0; border: 0; border-radius: 14px; cursor: pointer; background: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.15s;
}
.wd-die svg { display: block; width: 100%; height: 100%; }
.wd-die rect { fill: #f4ead6; stroke: #b99a62; stroke-width: 1.2; }
.wd-die circle { fill: #2a1d12; }
.wd-die:disabled { cursor: default; opacity: 0.55; }
.wd-die.held { transform: translateY(-6px); }
.wd-die.held rect { fill: #f2c35b; stroke: #fff2c8; stroke-width: 1.6; }
.wd-die:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wd-die.rolling { animation: wd-roll 0.42s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes wd-roll {
  0% { transform: translateY(-26px) rotate(-120deg) scale(0.7); opacity: 0.3; }
  70% { transform: translateY(2px) rotate(8deg) scale(1.04); opacity: 1; }
  100% { transform: none; }
}
.wd-cup-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-btn {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border-strong); cursor: pointer;
  background: var(--surface); color: var(--text); font: 600 0.9rem var(--font-body);
}
.wd-btn:hover { background: var(--surface-hover); }
.wd-btn:disabled { opacity: 0.45; cursor: default; }
.wd-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wd-btn-gold { background: linear-gradient(180deg, #f6d27a, #d99a2b); border-color: #f6d27a; color: #2a1d12; }
.wd-btn-gold:hover { background: linear-gradient(180deg, #ffe08f, #e6a633); }
.wd-cup-combos { margin-top: 14px; min-height: 2.4em; }
.wd-combo-list { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 6px; max-width: none !important; }
.wd-combo-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 !important; padding: 8px 12px;
  border-radius: 10px; background: rgba(255, 255, 255, 0.04); border-left: 3px solid #8a7a5c;
}
.wd-combo-list li.tier-2 { border-left-color: #6fb4ff; }
.wd-combo-list li.tier-3 { border-left-color: #b48cff; }
.wd-combo-list li.tier-4 { border-left-color: #f2c35b; }
.wd-combo-list li.tier-5 { border-left-color: #ff6b5a; }
.wd-combo-list b { color: var(--text); flex: 1 1 140px; }
.wd-val { font-variant-numeric: tabular-nums; font-size: 0.9rem; white-space: nowrap; }
.wd-val.atk { color: #ff8a7a; } .wd-val.def { color: #7cc4ff; } .wd-val.heal { color: #7fe0a0; }
.wd-none, .wd-sum { margin: 8px 0 0 !important; font-size: 0.9rem; }

/* Werte in Tabellen */
.wiki-table .atk { color: #ff8a7a; } .wiki-table .def { color: #7cc4ff; } .wiki-table .heal { color: #7fe0a0; }

/* ---------- Gegnerkarten ---------- */
.wd-foes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin: 18px 0 28px; }
.wd-foe {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); scroll-margin-top: 140px;
}
.wd-foe img {
  grid-row: span 3; width: 96px; height: 96px; object-fit: contain; border-radius: 12px;
  background: radial-gradient(circle at 50% 60%, rgba(139, 123, 255, 0.18), transparent 70%), #0d1122;
}
.wd-foe.boss { border-color: #7a5a1e; background: linear-gradient(160deg, rgba(242, 195, 91, 0.08), transparent 60%), var(--bg-elevated); }
.wd-foe h3 { margin: 0 !important; font-size: 1.05rem; }
.wd-foe .wd-flavor { margin: 0 !important; font-size: 0.88rem; font-style: italic; color: var(--text-faint); }
.wd-foe .wd-stats { margin: 4px 0 0 !important; font-size: 0.88rem; line-height: 1.5; }
.wd-tag { display: inline-block; padding: 1px 8px; margin-right: 4px; border-radius: 999px; font-size: 0.75rem; background: var(--surface); color: var(--text-muted); }
.wd-tag.boss { background: rgba(242, 195, 91, 0.16); color: #f2c35b; }

/* ---------- Bildkacheln mit Foto ---------- */
.wd-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; margin: 18px 0 28px; }
.wd-pic { margin: 0 !important; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-elevated); }
.wd-pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.wd-pic figcaption { margin: 0 !important; padding: 10px 14px 12px; font-size: 0.9rem !important; color: var(--text-muted) !important; }
.wd-pic figcaption b { display: block; color: var(--text); }

/* Helden nebeneinander */
.wd-heroes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin: 18px 0 28px; }
.wd-hero { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); }
.wd-hero img { float: right; width: 112px; height: 140px; object-fit: cover; margin: 0 0 8px 12px; border-radius: 12px; border: 1px solid var(--border-strong); }
.wd-hero h3 { margin-top: 0 !important; }
.wd-hero ul { margin-bottom: 0 !important; }

@media (max-width: 600px) {
  .wd-cup { padding: 14px; }
  .wd-cup-dice { gap: 7px; }
  .wd-foe { grid-template-columns: 72px minmax(0, 1fr); }
  .wd-foe img { width: 72px; height: 72px; }
  .wd-hero img { width: 88px; height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .wd-die, .wd-die.rolling { animation: none; transition: none; }
}