/* Aetherial Soul Color Quiz — Seelenfarben-Archiv
   Gestaltung: Kodex-Seite auf dunklem Pult. Eisengallus-Tinte auf gealtertem
   Pergament, Ochsenblut und Blattgold als einzige Akzente neben den Pigmenten. */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --desk: #14100c;
    --page: #e8dcc0;
    --page-deep: #ddcfae;
    --ink: #2a2018;
    --ink-soft: #5c4e3a;
    --rule: rgba(42, 32, 24, 0.35);
    --rule-faint: rgba(42, 32, 24, 0.18);
    --oxblood: #7a1f1f;
    --gilt: #8a6a1c;
    --serif: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
}

body {
    font-family: var(--serif);
    background: var(--desk);
    color: var(--ink);
    min-height: 100vh;
    padding: clamp(12px, 4vw, 48px);
    line-height: 1.6;
}

/* Die Kodex-Seite */
.sheet {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.18 0 0 0 0 0.10 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse at 50% 12%, #efe5cd 0%, var(--page) 55%, #dccfab 100%);
    box-shadow:
        inset 0 0 90px rgba(58, 42, 20, 0.28),
        0 2px 6px rgba(0, 0, 0, 0.6),
        0 18px 50px rgba(0, 0, 0, 0.55);
    padding: clamp(24px, 6vw, 64px);
}

/* Doppelter Satzspiegel-Rahmen */
.sheet::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid var(--rule);
    pointer-events: none;
}

.sheet::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid var(--rule-faint);
    pointer-events: none;
}

/* ---------- Kopf ---------- */

.lang-nav {
    text-align: right;
    font-size: 0.8em;
    letter-spacing: 0.14em;
    font-variant-caps: small-caps;
    margin-bottom: 18px;
    color: var(--ink-soft);
}

.lang-nav a {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
}

.lang-nav a:hover,
.lang-nav a:focus-visible {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.lang-nav .lang-current {
    color: var(--ink);
    border-bottom: 1px solid transparent;
}

.masthead {
    text-align: center;
    margin-bottom: 34px;
}

.eyebrow {
    font-variant-caps: small-caps;
    letter-spacing: 0.32em;
    font-size: 0.82em;
    color: var(--ink-soft);
    margin-bottom: 14px;
}

.masthead h1 {
    font-size: clamp(1.9em, 5.5vw, 2.9em);
    font-weight: normal;
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: var(--ink);
}

.subtitle {
    font-style: italic;
    color: var(--ink-soft);
    margin-top: 10px;
    font-size: 1.02em;
}

/* Zierlinie: ——— ✦ ——— */
.ornament {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--ink-soft);
    margin: 26px auto 0;
    max-width: 340px;
    font-size: 0.9em;
}

.ornament::before,
.ornament::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--rule);
}

/* ---------- Abschnitte ---------- */

.section {
    display: none;
}

.section.active {
    display: block;
    animation: settle 0.45s ease-out;
}

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

.stage-caption {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: center;
    text-align: center;
    font-variant-caps: small-caps;
    letter-spacing: 0.22em;
    font-size: 0.88em;
    color: var(--ink-soft);
    margin: 6px 0 26px;
}

.stage-caption::before,
.stage-caption::after {
    content: "";
    flex: 1;
    max-width: 90px;
    border-top: 1px solid var(--rule);
}

.section-lead {
    text-align: center;
    color: var(--ink-soft);
    margin-bottom: 26px;
}

.section-lead .fine {
    font-size: 0.9em;
    font-style: italic;
}

/* ---------- Intro ---------- */

.intro p {
    margin-bottom: 18px;
}

.intro .invocation {
    font-size: 1.14em;
    text-align: center;
}

/* Liste der sieben Grundfarben */
.pigment-index {
    list-style: none;
    margin: 22px 0;
    border-top: 1px solid var(--rule-faint);
}

.pigment-index li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 7px 4px;
    border-bottom: 1px solid var(--rule-faint);
}

.pigment-index .gloss {
    margin-left: auto;
    font-style: italic;
    color: var(--ink-soft);
    font-size: 0.9em;
}

.swatch {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
    border: 1px solid rgba(42, 32, 24, 0.55);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
    flex: none;
    align-self: center;
}

/* Regelwerk-Kasten */
.codex-note {
    border: 1px solid var(--rule);
    background: var(--page-deep);
    padding: 20px 24px;
    margin: 26px 0;
    box-shadow: inset 0 0 24px rgba(58, 42, 20, 0.12);
}

.codex-note h3 {
    font-variant-caps: small-caps;
    letter-spacing: 0.18em;
    font-size: 0.92em;
    font-weight: normal;
    margin-bottom: 10px;
    color: var(--ink);
}

.codex-note ul {
    list-style: none;
}

.codex-note li {
    padding: 3px 0;
    color: var(--ink-soft);
}

.codex-note li strong {
    color: var(--ink);
}

.honest-note {
    font-style: italic;
    color: var(--ink-soft);
    text-align: center;
    margin-top: 22px;
}

/* ---------- Knöpfe ---------- */

.btn-row {
    display: flex;
    gap: 22px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.btn {
    font-family: inherit;
    font-size: 0.95em;
    font-variant-caps: small-caps;
    letter-spacing: 0.14em;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--ink);
    outline: 1px solid var(--rule);
    outline-offset: 3px;
    padding: 11px 30px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}

.btn:hover {
    background: var(--ink);
    color: var(--page);
}

.btn:focus-visible {
    outline: 2px solid var(--gilt);
    outline-offset: 3px;
}

.btn.quiet {
    border-color: var(--ink-soft);
    color: var(--ink-soft);
}

.btn.quiet:hover {
    background: var(--ink-soft);
    color: var(--page);
}

/* ---------- Miracle-Wahl ---------- */

.miracle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
    margin: 30px 0 10px;
}

.miracle-card {
    border: 1px solid var(--rule);
    padding: 26px 24px;
    cursor: pointer;
    text-align: center;
    background: transparent;
    transition: background 0.18s, border-color 0.18s;
}

.miracle-card h3 {
    font-size: 1.7em;
    font-weight: normal;
    letter-spacing: 0.2em;
    font-variant-caps: small-caps;
    margin-bottom: 12px;
}

.miracle-card.yes h3 {
    color: var(--gilt);
}

.miracle-card.no h3 {
    color: var(--ink-soft);
}

.miracle-card p {
    color: var(--ink-soft);
    font-size: 0.96em;
}

.miracle-card:hover,
.miracle-card:focus-visible {
    background: var(--page-deep);
    border-color: var(--ink);
}

/* ---------- Fragen ---------- */

.progress {
    height: 3px;
    background: var(--rule-faint);
    margin: 0 auto 30px;
    max-width: 420px;
}

.progress-bar {
    height: 100%;
    width: 0;
    background: var(--ink);
    transition: width 0.3s ease-out;
}

.question-number {
    text-align: center;
    font-variant-caps: small-caps;
    letter-spacing: 0.2em;
    color: var(--ink-soft);
    font-size: 0.9em;
    margin-bottom: 14px;
}

.question {
    font-size: 1.34em;
    line-height: 1.45;
    text-align: center;
    margin: 0 auto 28px;
    max-width: 560px;
}

.options {
    border-top: 1px solid var(--rule);
    max-width: 640px;
    margin: 0 auto;
}

.option {
    display: grid;
    grid-template-columns: 2.4em 1fr;
    gap: 4px 10px;
    padding: 13px 10px 13px 6px;
    border-bottom: 1px solid var(--rule-faint);
    cursor: pointer;
    transition: background 0.15s;
}

.option:hover,
.option:focus-visible {
    background: var(--page-deep);
}

/* Buchstaben-Marginalie; beim Zeigen erscheint der Manikel */
.option .marker {
    grid-row: 1 / span 2;
    text-align: right;
    color: var(--ink-soft);
    font-style: italic;
}

.option .marker .hand {
    display: none;
    font-style: normal;
}

.option:hover .marker .letter,
.option:focus-visible .marker .letter {
    display: none;
}

.option:hover .marker .hand,
.option:focus-visible .marker .hand {
    display: inline;
}

.option-text {
    font-size: 1.02em;
}

.option-detail {
    font-size: 0.86em;
    font-style: italic;
    color: var(--ink-soft);
}

/* Moral-Randnotiz: schmale Kante in Blattgold bzw. Ochsenblut */
.option.divine {
    box-shadow: inset 3px 0 0 rgba(138, 106, 28, 0.5);
}

.option.corrupted {
    box-shadow: inset 3px 0 0 rgba(122, 31, 31, 0.5);
}

.back-row {
    text-align: center;
    margin-top: 26px;
}

/* ---------- Review ---------- */

.review-header {
    font-variant-caps: small-caps;
    letter-spacing: 0.18em;
    font-size: 0.95em;
    font-weight: normal;
    text-align: center;
    color: var(--ink);
    margin: 26px 0 10px;
}

.review-list {
    border-top: 1px solid var(--rule);
    margin-bottom: 8px;
}

.review-row {
    display: grid;
    grid-template-columns: 2.6em 1fr auto;
    gap: 2px 12px;
    align-items: baseline;
    padding: 10px 8px 10px 4px;
    border-bottom: 1px solid var(--rule-faint);
    cursor: pointer;
    transition: background 0.15s;
}

.review-row:hover,
.review-row:focus-visible {
    background: var(--page-deep);
}

.review-row .numeral {
    text-align: right;
    color: var(--ink-soft);
    font-style: italic;
}

.review-row .review-q {
    font-size: 0.97em;
}

.review-row .review-choice {
    grid-column: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    font-variant-caps: small-caps;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    white-space: nowrap;
}

.review-row .morality-divine {
    color: var(--gilt);
}

.review-row .morality-corrupted {
    color: var(--oxblood);
}

/* ---------- Ergebnis ---------- */

.result-heading {
    text-align: center;
    font-weight: normal;
    font-size: 1.5em;
    margin-bottom: 24px;
}

/* Das Pigment: ein ungleichmäßiger Farbklecks, wie nasse Tusche */
.soul-blot-frame {
    text-align: center;
    margin: 26px 0;
}

#soulColorDisplay {
    display: inline-block;
    width: 250px;
    height: 240px;
    border-radius: 47% 53% 55% 45% / 52% 46% 56% 44%;
    transform: rotate(-2deg);
    position: relative;
    box-shadow:
        inset 0 0 34px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(42, 32, 24, 0.35);
    animation: bloom 0.9s ease-out;
}

/* Zweite, leicht versetzte Umrandung – wie von Hand nachgezogen */
#soulColorDisplay::after {
    content: "";
    position: absolute;
    inset: -9px;
    border: 1px solid var(--rule);
    border-radius: 51% 49% 47% 53% / 47% 55% 45% 53%;
    pointer-events: none;
}

@keyframes bloom {
    from {
        opacity: 0;
        transform: rotate(-2deg) scale(0.94);
    }
    to {
        opacity: 1;
        transform: rotate(-2deg) scale(1);
    }
}

/* Auren als stille Ringe statt Leuchtanimation */
#soulColorDisplay.divine-aura {
    box-shadow:
        inset 0 0 34px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(42, 32, 24, 0.35),
        0 0 0 14px rgba(138, 106, 28, 0.14),
        0 0 0 15px rgba(138, 106, 28, 0.35);
}

#soulColorDisplay.corrupted-aura {
    box-shadow:
        inset 0 0 54px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(20, 12, 8, 0.7),
        0 6px 22px rgba(20, 8, 4, 0.35);
}

#soulColorDisplay.miracle-glow::before {
    content: "";
    position: absolute;
    inset: -20px;
    border: 1px dashed var(--rule);
    border-radius: 49% 51% 53% 47% / 51% 47% 55% 45%;
    pointer-events: none;
}

/* Siegel-Plaketten */
.badges {
    text-align: center;
    margin-bottom: 14px;
}

.seal {
    display: inline-block;
    padding: 7px 20px;
    margin: 4px 6px;
    font-variant-caps: small-caps;
    letter-spacing: 0.14em;
    font-size: 0.85em;
    color: var(--page);
    border-radius: 46% 54% 50% 50% / 60% 55% 45% 40%;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.25), inset 0 -3px 6px rgba(0, 0, 0, 0.3);
}

.seal.divine-badge {
    background: var(--gilt);
}

.seal.corrupted-badge {
    background: var(--oxblood);
}

.seal.balanced-badge {
    background: var(--ink-soft);
}

.soul-color-name {
    text-align: center;
    font-size: 1.9em;
    font-weight: normal;
    line-height: 1.35;
    margin: 14px 0 26px;
}

.soul-color-name .variant {
    display: block;
    font-size: 0.58em;
    font-style: italic;
    color: var(--ink-soft);
    margin-top: 6px;
}

.soul-color-name .delta {
    font-size: 0.85em;
    color: var(--ink-soft);
}

.soul-color-name details {
    font-size: 0.5em;
    font-style: normal;
    color: var(--ink-soft);
    margin-top: 12px;
}

.soul-color-name summary {
    cursor: pointer;
    user-select: none;
    font-variant-caps: small-caps;
    letter-spacing: 0.12em;
}

.alt-list {
    margin-top: 10px;
    border-top: 1px solid var(--rule-faint);
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.alt-list div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--rule-faint);
    text-align: left;
}

/* Moral-Skala: Messlatte in Tinte */
.morality-bar {
    position: relative;
    max-width: 460px;
    height: 14px;
    margin: 30px auto 8px;
    border: 1px solid var(--rule);
    background:
        repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), var(--rule-faint) calc(10% - 1px), var(--rule-faint) 10%),
        linear-gradient(90deg, rgba(122, 31, 31, 0.55), rgba(221, 207, 174, 0.4) 50%, rgba(138, 106, 28, 0.55));
}

.morality-indicator {
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    background: var(--page);
    border: 1.5px solid var(--ink);
    transform: translateY(-50%) rotate(45deg);
    transition: left 0.5s ease-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.morality-labels {
    display: flex;
    justify-content: space-between;
    max-width: 460px;
    margin: 0 auto 26px;
    font-variant-caps: small-caps;
    letter-spacing: 0.12em;
    font-size: 0.85em;
    color: var(--ink-soft);
}

.morality-labels .label-corrupted {
    color: var(--oxblood);
}

.morality-labels .label-divine {
    color: var(--gilt);
}

/* Farbkomposition */
.color-breakdown {
    border: 1px solid var(--rule);
    background: var(--page-deep);
    padding: 22px 26px;
    margin: 28px auto;
    max-width: 480px;
}

.color-breakdown-title {
    font-variant-caps: small-caps;
    letter-spacing: 0.18em;
    font-size: 0.95em;
    font-weight: normal;
    text-align: center;
    margin-bottom: 16px;
}

.color-component {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--rule-faint);
}

.color-component .swatch {
    width: 26px;
    height: 26px;
}

.mix-symbol {
    text-align: center;
    font-size: 1.3em;
    color: var(--ink-soft);
    padding: 4px 0;
}

.soul-color-description {
    max-width: 560px;
    margin: 26px auto;
    text-align: center;
    font-size: 1.06em;
    line-height: 1.7;
}

/* Radar & Balken */
.trait-radar-container {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    margin: 34px 0;
    align-items: center;
    justify-content: center;
}

.radar-chart {
    flex: 0 0 auto;
    max-width: 100%;
    height: auto;
}

.trait-bars {
    flex: 1 1 280px;
    min-width: 260px;
    max-width: 420px;
}

.trait-bars h3 {
    font-variant-caps: small-caps;
    letter-spacing: 0.18em;
    font-size: 0.95em;
    font-weight: normal;
    text-align: center;
    margin-bottom: 16px;
}

.trait-bar-item {
    margin: 12px 0;
}

.trait-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
    font-size: 0.9em;
    font-variant-caps: small-caps;
    letter-spacing: 0.1em;
}

.trait-bar-label .swatch {
    width: 10px;
    height: 10px;
    margin-right: 7px;
}

.trait-bar-bg {
    height: 12px;
    border: 1px solid var(--rule);
    background: rgba(42, 32, 24, 0.06);
}

.trait-bar-fill {
    height: 100%;
    transition: width 0.6s ease-out;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}

/* Eigenschaften-Verzeichnis */
.traits-list {
    margin: 32px 0;
}

.traits-list h3 {
    font-variant-caps: small-caps;
    letter-spacing: 0.18em;
    font-size: 0.95em;
    font-weight: normal;
    text-align: center;
    margin-bottom: 14px;
}

.trait-item {
    padding: 14px 6px;
    border-bottom: 1px solid var(--rule-faint);
}

.trait-item:first-of-type {
    border-top: 1px solid var(--rule);
}

.trait-title {
    font-variant-caps: small-caps;
    letter-spacing: 0.1em;
    margin-bottom: 3px;
}

.trait-description {
    color: var(--ink-soft);
    font-size: 0.94em;
    font-style: italic;
}

.share-note {
    text-align: center;
    font-size: 0.88em;
    color: var(--ink-soft);
    margin-top: 12px;
    word-break: break-all;
}

/* ---------- Galerie ---------- */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2px;
    border: 1px solid var(--rule);
    background: var(--rule-faint);
    margin: 26px 0;
}

.gallery-card {
    background: var(--page);
    padding: 20px 14px;
    text-align: center;
}

.gallery-card .dab {
    width: 62px;
    height: 58px;
    margin: 0 auto 12px;
    border-radius: 47% 53% 55% 45% / 52% 46% 56% 44%;
    border: 1px solid rgba(42, 32, 24, 0.4);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.18);
}

.gallery-card .name {
    font-variant-caps: small-caps;
    letter-spacing: 0.1em;
}

.gallery-card .tags {
    font-size: 0.82em;
    font-style: italic;
    color: var(--ink-soft);
    margin-top: 3px;
}

.gallery-stats {
    border: 1px solid var(--rule);
    background: var(--page-deep);
    padding: 22px 26px;
    margin: 26px 0;
}

.gallery-stats h3 {
    font-variant-caps: small-caps;
    letter-spacing: 0.18em;
    font-size: 0.95em;
    font-weight: normal;
    text-align: center;
    margin-bottom: 16px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 18px;
    text-align: center;
}

.stats-grid .stat-value {
    font-size: 1.5em;
}

.stats-grid .stat-label {
    font-size: 0.85em;
    font-style: italic;
    color: var(--ink-soft);
}

.gallery-stats details {
    margin-top: 16px;
    text-align: center;
}

.gallery-stats summary {
    cursor: pointer;
    user-select: none;
    font-variant-caps: small-caps;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
}

.stats-all {
    margin-top: 12px;
    columns: 2;
    column-gap: 30px;
    text-align: left;
}

.stats-all div {
    display: flex;
    justify-content: space-between;
    padding: 4px 2px;
    border-bottom: 1px solid var(--rule-faint);
    break-inside: avoid;
}

.stats-empty {
    text-align: center;
    font-style: italic;
    color: var(--ink-soft);
}

/* ---------- Fußzeile ---------- */

.colophon {
    text-align: center;
    margin-top: 44px;
    padding-top: 18px;
    border-top: 1px solid var(--rule-faint);
    font-variant-caps: small-caps;
    letter-spacing: 0.18em;
    font-size: 0.78em;
    color: var(--ink-soft);
}

.colophon a {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
}

.colophon a:hover {
    color: var(--ink);
}

/* ---------- Mobil ---------- */

@media (max-width: 640px) {
    body {
        padding: 8px;
    }

    .sheet {
        padding: 26px 18px;
    }

    .question {
        font-size: 1.16em;
    }

    #soulColorDisplay {
        width: 200px;
        height: 192px;
    }

    .option {
        min-height: 56px;
        touch-action: manipulation;
    }

    .review-row {
        grid-template-columns: 2.2em 1fr;
    }

    .review-row .review-choice {
        grid-column: 2;
    }

    .stats-all {
        columns: 1;
    }

    .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section.active,
    #soulColorDisplay {
        animation: none;
    }

    .progress-bar,
    .morality-indicator,
    .trait-bar-fill {
        transition: none;
    }
}