/* Figurenseiten (z. B. /zauberer/bruno-wolkenbruch/). Ergänzt style.css und nutzt deren Aufbau:
   Start mit Bühne, danach Kapitel in .hscroll (am Computer seitlich, sonst untereinander). */

.crumbs { font-size: 0.8125rem; font-weight: 700; color: var(--muted); margin: 0 0 1.5rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.375rem; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "›"; margin-right: 0.375rem; opacity: .6; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--text); }

.fig-hero h1 em { display: block; font-size: .48em; margin-top: .4em; letter-spacing: 0; color: var(--c, var(--accent)); }
.fig-free { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.25rem; padding: 0.375rem 0.875rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 0.8125rem; font-weight: 900; }
.fig-free::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0.5rem currentColor; }

.fig-story { font-size: 1.125rem; line-height: 1.75; color: var(--text); max-width: 34em; }

/* Zauberliste neben den Karten */
.spell-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.75rem; }
.spell-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.125rem 1rem; padding: 0.875rem 1.125rem; border-radius: 1rem; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.spell-list b { font-size: 1.0625rem; }
.spell-list .meta { grid-row: span 2; align-self: center; text-align: right; font-size: 0.75rem; font-weight: 800; color: var(--accent); white-space: nowrap; }
.spell-list .meta span { display: block; color: var(--muted); font-weight: 700; }
.spell-list p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.spell-list .ultimate { background: linear-gradient(120deg, color-mix(in srgb, var(--c, var(--accent)) 22%, var(--card)), var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }

/* Sprechblasen */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; margin: 0 0 1.5rem; padding: 0; list-style: none; max-width: 36rem; }
.quotes li { position: relative; padding: 1rem 1.125rem; border-radius: 1.125rem 1.125rem 1.125rem 0.25rem; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.quotes li:nth-child(even) { border-radius: 1.125rem 1.125rem 0.25rem 1.125rem; background: var(--card-high); }
.quotes q { display: block; font-weight: 800; font-size: 0.9688rem; line-height: 1.4; quotes: "„" "“"; }
:lang(en) .quotes q { quotes: "“" "”"; }
.quotes span { display: block; margin-top: 0.375rem; font-size: 0.6875rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* Brett-Video bei der Taktik */
.fig-board video { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 1rem; background: var(--bg-deep); }

/* Karten im Kapitel etwas größer als auf der Hauptseite */
.fig-page .collage .card { width: 14rem; }

@media (max-width: 760px) {
  .fig-hero .crumbs { display: none; }
  .fig-hero h1 em { display: block; }
  .fig-hero .fig-free { margin-bottom: 1.5rem; }
  .quotes { grid-template-columns: 1fr; }
  .stack .split .spell-list, .stack .split .quotes, .stack .split .fig-story { order: 5; }
  .fig-page .collage .card { width: 48%; }
}

/* Karten als Links (Rivalen, weitere Figuren, Übersicht) */
a.card { display: block; text-decoration: none; }
a.card:hover { box-shadow: 0 1.875rem 4.375rem rgba(0,0,0,.6), inset 0 0 0 1px var(--accent); }
a.who { text-decoration: none; color: inherit; transition: background .2s; }
a.who:hover { background: var(--card-high); }
.fig-page .lead a { color: var(--text); text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 3px; }
.fig-all { margin: 1.5rem 0 0; }
.fig-overview { display: flex; justify-content: center; margin: 2rem 0 0; }

/* Übersichtsseite */
.fig-over { min-height: 0; padding: 2.5rem 0 4rem; }
.fig-over h1 { font-size: clamp(2.5rem, 5.4vw, 4rem); margin-bottom: 1.25rem; }
.fig-over .lead { margin-bottom: 1.75rem; }
.fig-group { padding: 5rem 0; }
.fig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.fig-grid .card { width: 100%; }
@media (max-width: 760px) {
  .fig-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .fig-over { text-align: left; }
}

/* lange Wirkungstexte auf Karten kürzen */
.fig-page .card .label small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) {
  .fig-page .collage .card .label small { -webkit-line-clamp: 2; font-size: 0.625rem; }
}

/* Spielregeln und Themenseiten */
.rules-sec { padding: 6rem 0; }
.rules-hero { min-height: 0; padding-bottom: 5rem; }
.rules-toc { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.75rem; }
.rules-toc a { padding: 0.375rem 0.875rem; border-radius: 999px; background: var(--card); color: var(--text); font-size: 0.8125rem; font-weight: 800; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.rules-toc a:hover { background: var(--accent); color: var(--on-accent); }
.rules-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.75rem; max-width: 38rem; }
.rules-list li { padding: 0.875rem 1.125rem; border-radius: 1rem; background: var(--card); color: var(--muted); line-height: 1.6; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.rules-list b { color: var(--text); }
.pieces { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.piece { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; align-items: start; padding: 1.125rem; border-radius: 1.125rem; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.piece .glyph { width: 4rem; height: 4rem; border-radius: 1rem; display: grid; place-items: center; font-size: 2.6rem; line-height: 1; color: var(--accent); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 22%, var(--card-high)), var(--card-high)); }
.piece b { font-size: 1.125rem; }
.piece .val { margin-left: 0.5rem; font-size: 0.75rem; font-weight: 800; color: var(--accent); }
.piece p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.rules-figure { display: flex; justify-content: center; gap: 1rem; font-size: 7rem; line-height: 1; color: var(--accent); text-shadow: 0 0 2.5rem color-mix(in srgb, var(--glow) 50%, transparent); }
.rules-figure span:nth-child(2) { translate: 0 2rem; color: var(--text); }
.rules-faq { max-width: 46rem; }
.prose { max-width: 42rem; }
.prose p { color: var(--muted); font-size: 1.0625rem; line-height: 1.8; }
.prose h3 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }
.prose b, .prose strong { color: var(--text); }
.prose a { color: var(--text); text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 3px; }
@media (max-width: 980px) { .pieces { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .rules-sec { padding: 3.5rem 0; }
  .pieces { grid-template-columns: 1fr; }
  .rules-figure { font-size: 4.5rem; margin-bottom: 2rem; }
  .rules-hero { text-align: left; }
  .rules-hero .board-shot { margin-top: 3rem; }
}

/* Ratgeber */
.guide-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; }
.guide-links a { display: block; height: 100%; padding: 1rem 1.25rem; border-radius: 1rem; background: var(--card); color: var(--text); font-weight: 800; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); transition: background .2s; }
.guide-links a::after { content: " →"; color: var(--accent); }
.guide-links a:hover { background: var(--card-high); }
.guide-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.25rem; }
.guide-cards a { display: block; height: 100%; padding: 1.5rem; border-radius: 1.25rem; background: var(--card); text-decoration: none; color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); transition: transform .25s var(--ease), background .2s; }
.guide-cards a:hover { transform: translateY(-3px); background: var(--card-high); }
.guide-cards b { display: block; font-size: 1.25rem; line-height: 1.25; margin-bottom: 0.5rem; }
.guide-cards p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.myth-card { display: grid; place-items: center; }
.myth-card .card { width: 15rem; }
@media (max-width: 760px) {
  .myth-card .card { width: 11rem; margin-bottom: 1.5rem; }
  .myth-item .split { display: flex; flex-direction: column; }
}