/* ========================================
   Bloomiepedia - Wiki im Look der Spiel-UI
   Farben, Schrift und Sprites stammen direkt aus dem Spiel
   (StandardThemeAlex.tres, UI/Grafiken, UI/Fonts).

   Aufbau: Pixel-Landschaft als Banner oben (Bloomies stehen auf der Wiese),
   darunter eine ruhige, flache Leseflaeche. Hierarchie ueber Schrift und
   Abstaende, Rahmen nur dort, wo sie etwas zusammenhalten.
   ======================================== */

/* Pixelschrift aus dem Spiel. Designraster: 16px pro Geviert,
   scharf nur bei 16 / 32 / 48px. Lizenz: CC BY-SA 4.0 (YukiPixels) */
@font-face {
    font-family: 'BoldPixels';
    src: url('../fonts/BoldPixels.ttf') format('truetype');
    font-display: swap;
}

:root {
    --soil: #2a1f1a;         /* Seitenhintergrund unter der Wiese */
    --panel: #372921;        /* Karten, Tafeln */
    --panel-deep: #221813;   /* Einlassungen in Karten */
    --row: #43322a;          /* Hover, Zeilen im Wechsel */
    --line: #4d3a30;         /* Trennlinien und Kartenraender */
    --ink: #1d1411;          /* Pixel-Umriss (Sprites, Plaketten) */
    --wood-hi: #926d51;
    --wood: #825e43;
    --wood-lo: #6c4d39;
    --cream: #f6ecdf;        /* Text */
    --cream-dim: #c8b4a0;    /* Nebentext */
    --sprout: #9eff44;       /* Marken-Gruen (Links, aktiv) */
    --coin: #ffc233;         /* Spielbegriffe, Zahlen */

    --strong: #ffffff;       /* hervorgehobener Text */
    --head-shadow: 0 3px 0 var(--ink);
    --h3: var(--coin);

    --font-pixel: 'BoldPixels', 'M PLUS Rounded 1c', sans-serif;
    --font-ui: 'M PLUS Rounded 1c', sans-serif;

    /* Pixel-Umriss fuer weissen Text auf der Landschaft, wie im Spiel */
    --outline-2: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
                 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink);
    --outline-3: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
                 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink),
                 0 6px 0 var(--ink);
    --wood-grad: linear-gradient(var(--wood-hi) 0 3px, var(--wood) 3px 55%, var(--wood-lo) 55%);
}

html {
    scroll-padding-top: 72px;
}

body.wiki-page {
    font-family: var(--font-ui);
    font-weight: 500;
    color: var(--cream);
    background: var(--soil);
}

body.wiki-page img {
    image-rendering: pixelated;
}

body.wiki-page .wiki-logo,
body.wiki-page .wiki-title-img,
body.wiki-page .site-topbar-home img {
    image-rendering: auto;
}

/* ---------- Helles Wiki (Klasse .bp): Key-Art hinter allem, helle Fenster darauf ---------- */
body.bp {
    --cream: #000000;        /* Text */
    --cream-dim: #3b2d22;    /* Nebentext (dunkel genug fuer gute Lesbarkeit auf Beige) */
    --strong: #000000;
    --panel: #f0e2c9;        /* Karten im Fenster (heller als das Fenster) */
    --panel-deep: #d3b991;   /* Einlassungen (dunkler) */
    --row: #e9d7b8;
    --line: #c8a97f;
    --sprout: #1e6a12;       /* Links */
    --coin: #8a5000;         /* Spielbegriffe, Zahlen */
    --h3: #6e4529;
    --head-shadow: none;
    /* Fenster leicht durchsichtig, Key-Art schimmert durch (wie im Stardew-Wiki).
       Verlauf bezogen aufs Browserfenster (fixed) */
    --window: linear-gradient(rgba(234, 214, 181, 0.9), rgba(220, 194, 155, 0.9)) fixed;
    /* Fliesstext in der Systemschrift (Windows: Segoe UI) - scharf auf jedem Bildschirm */
    --font-ui: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Keine Pixelschrift im Wiki: Ueberschriften ebenfalls in der Systemschrift */
    --font-pixel: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    /* Key-Art direkt auf dem body (wie im Stardew-Wiki): so bleibt der Grund deckend und
       Chrome glaettet Text auf den halbtransparenten Fenstern weiter mit ClearType.
       Eine eigene fixed-Ebene (::before) wuerde den Inhalt auf eine durchsichtige Ebene
       zwingen, dann nur Graustufen-Glaettung und deutlich weichere Schrift. */
    background: #63aef5 url('../images/background.jpg') center 42% / cover no-repeat fixed;
}

/* Touch-Geraete (iOS kennt kein background-attachment: fixed): Bild auf eigener fester Ebene */
@media (hover: none) and (pointer: coarse) {
    body.bp {
        background-attachment: scroll;
    }

    body.bp::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background: #63aef5 url('../images/background.jpg') center 42% / cover no-repeat;
        pointer-events: none;
    }
}

/* ---------- Layout wie im Stardew-Wiki ----------
   Links angedockt: Logo + Leiste mit Rahmen. Rechts daneben mit kleinem Abstand
   das Inhaltsfenster, fast bis zum rechten Rand. */
.wiki-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 14px 0 0;
    align-items: start;
}

.wiki-side {
    min-width: 0;
}

/* Logo + "Bloomiepedia" ueber der Leiste */
.wiki-hero {
    position: relative;
    z-index: 3; /* ueber den Schlaf-Zs des Schlaefers auf der Seitenleiste (.wiki-sleeper) */
    padding: 4px 12px 16px;
    text-align: center;
}

.wiki-logo {
    display: block;
    width: 182px;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 4px 0 rgba(29, 20, 17, 0.45));
}

.wiki-title {
    display: block;
    margin-top: 6px;
    font-family: var(--font-pixel);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: #ffffff;
    text-shadow: var(--outline-2), 0 3px 0 var(--ink);
}

/* Schriftzug "Wiki" unter dem Logo (statt Text) */
.wiki-title-img {
    display: block;
    width: 95px;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 3px 0 rgba(29, 20, 17, 0.45));
}

.wiki-home-link {
    display: block;
    text-decoration: none;
}

.wiki-home-link:hover .wiki-title-img,
.wiki-home-link:focus-visible .wiki-title-img {
    filter: drop-shadow(0 3px 0 rgba(29, 20, 17, 0.45)) brightness(1.1);
}

.wiki-home-link:hover .wiki-title,
.wiki-home-link:focus-visible .wiki-title {
    color: #9eff44;
}

/* Helle Fenster mit Holzkante, leicht durchsichtig */
.bp .wiki-sidebar,
.bp .wiki-content {
    background: var(--window);
    border: 3px solid var(--wood);
    box-shadow: 0 6px 0 rgba(38, 26, 22, 0.25);
}

/* Leiste klebt am linken Rand: dort kein Rahmen */
.bp .wiki-sidebar {
    border-left: none;
}

.wiki-content {
    min-width: 0;
    padding: 24px 34px 36px;
}

/* ---------- Bloomies auf der Holzkante (js/wiki-walkers.js) ----------
   Oben eine dicke Holzleiste wie die Topbar, darauf laufen, schlafen und idlen
   zufaellige Bloomies (einer je 100px Breite). Platz darueber fuer die groessten Sprites (2-fach). */
.has-walkers {
    position: relative;
    margin-top: 80px;
}

.bp .has-walkers {
    border-top-width: 12px;
}

.has-walkers::before {
    content: "";
    position: absolute;
    top: -12px;
    left: -3px;
    right: -3px;
    height: 12px;
    background: linear-gradient(var(--wood-hi) 0 3px, var(--wood) 3px 7px, var(--wood-lo) 7px);
}

.wiki-walkers {
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 0;
    z-index: 2;
    pointer-events: none;
}

/* Seitenleiste: mittig schlaeft immer ein kleiner Bloomie auf der Kante, darueber etwas Platz */
.wiki-sidebar.has-sleeper {
    position: relative;
    margin-top: 28px;
}

.wiki-sleeper {
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 0;
    z-index: 2;
    pointer-events: none;
}

.wiki-walker {
    position: absolute;
    left: 0;
    bottom: 0;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    pointer-events: auto;
    will-change: transform;
}

.wiki-walker:hover {
    filter: brightness(1.15);
}

/* Schlaf-Zs wie schlafpartikel.tscn: wachsen, steigen, werden erst schwarz -> weiss, dann durchsichtig */
.wiki-walker-z {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 12px;
    height: 14px;
    margin-left: -6px;
    background: url('../images/wiki/walkers/zzz.png') 0 0 / 100% 100% no-repeat;
    image-rendering: pixelated;
    animation: wiki-walker-z 4s linear forwards;
}

@keyframes wiki-walker-z {
    0% {
        transform: translate(var(--x), var(--y)) scale(0.05) rotate(0deg);
        filter: brightness(0);
        opacity: 1;
    }
    46% {
        filter: brightness(1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) - 52px)) scale(1) rotate(var(--rot));
        filter: brightness(1);
        opacity: 0;
    }
}

/* ---------- Seitenleiste: schlichte Liste ---------- */
.wiki-sidebar {
    padding: 12px 10px 14px 12px;
}

.wiki-search-box {
    position: relative;
    margin-bottom: 14px;
}

.wiki-search {
    width: 100%;
    padding: 6px 8px 6px 28px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 13px;
    color: var(--cream);
    background: #f8eedc url('../images/wiki/globe.png') 8px center / 14px 14px no-repeat;
    border: 2px solid var(--line);
    border-radius: 0;
}

.wiki-search::placeholder {
    color: var(--cream-dim);
}

.wiki-search:focus {
    outline: none;
    border-color: var(--sprout);
}

.wiki-search-results {
    list-style: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 5;
    background: var(--panel);
    border: 2px solid var(--line);
    border-top: none;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3);
}

.wiki-search-results a {
    display: block;
    padding: 9px 12px;
    text-decoration: none;
    color: var(--cream-dim);
    font-size: 14px;
    line-height: 1.45;
}

.wiki-search-results li + li a {
    border-top: 2px solid var(--line);
}

.wiki-search-results a:hover,
.wiki-search-results a:focus-visible {
    background: var(--row);
}

.wiki-search-results b {
    display: block;
    font-weight: 700;
    font-size: 15px;
    color: var(--sprout);
}

.wiki-search-results mark {
    background: none;
    color: var(--coin);
    font-weight: 700;
}

.wiki-search-empty {
    padding: 10px 12px;
    font-size: 14px;
    color: var(--cream-dim);
}

.wiki-nav ol {
    list-style: none;
}

.wiki-nav-group + .wiki-nav-group {
    margin-top: 12px;
}

.wiki-nav-group h2 {
    margin: 0 0 3px;
    padding: 0 0 2px 2px;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    color: var(--coin);
    border-bottom: 1px solid var(--line);
}

.wiki-nav a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px 2px 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--cream);
    text-decoration: none;
    border-left: 2px solid transparent;
}

.wiki-nav a:hover {
    color: var(--cream);
    background: var(--panel);
}

.wiki-nav a.is-active {
    font-weight: 700;
    color: var(--cream);
    background: var(--panel);
    border-left-color: var(--sprout);
}

/* Icons werden beim Bauen weich auf 64 px gebracht (build.py) und hier gefiltert verkleinert */
body.wiki-page .wiki-nav-icon,
body.wiki-page .wiki-portal-icon {
    flex: 0 0 auto;
    image-rendering: auto;
}

.wiki-nav li.is-hidden {
    display: none;
}

.wiki-no-results {
    display: none;
    padding: 24px 0;
    font-weight: 700;
    color: var(--cream-dim);
}

.wiki-no-results.is-visible {
    display: block;
}

/* ---------- Artikel ---------- */
.wiki-article {
    margin-bottom: 56px;
}

.wiki-article.is-hidden {
    display: none;
}

.wiki-article p,
.wiki-article li {
    font-size: 17px;
    line-height: 1.7;
}

.bp .wiki-article p,
.bp .wiki-article li {
    font-size: 16px;
}

.wiki-article p {
    margin-bottom: 18px;
    max-width: 52em;
}

.wiki-article ul,
.wiki-article ol {
    margin: 0 0 20px 24px;
    max-width: 52em;
}

.wiki-article li {
    margin-bottom: 6px;
    padding-left: 4px;
}

.wiki-article li::marker {
    color: var(--coin);
    font-weight: 700;
}

.wiki-article strong {
    font-weight: 700;
    color: var(--strong);
}

/* Spielbegriffe (Skills, Optionen) in Muenzgelb, wie hervorgehobene Woerter im Spiel */
.wiki-article em {
    font-style: normal;
    font-weight: 700;
    color: var(--coin);
}

.wiki-article a {
    color: var(--sprout);
    font-weight: 700;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(158, 255, 68, 0.35);
    text-underline-offset: 4px;
}

.wiki-article a:hover {
    text-decoration-color: currentColor;
}

.wiki-article a:hover {
    color: var(--strong);
}

/* Seitentitel: grosse Pixelschrift ohne Kasten */
.wiki-page-title {
    margin: 0 0 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--line);
    font-family: var(--font-pixel);
    font-weight: 400;
    font-size: 48px;
    line-height: 1.1;
    text-align: left;
    color: var(--strong);
    text-shadow: var(--head-shadow);
}

.wiki-section-title {
    margin: 56px 0 20px;
    font-family: var(--font-pixel);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.2;
    text-align: left;
    color: var(--strong);
    text-shadow: var(--head-shadow);
}

.wiki-article h3 {
    margin: 40px 0 12px;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: var(--h3);
}

.wiki-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: -6px;
    margin: 0 2px;
}

/* ---------- Hinweise: Tafel mit farbiger Kante ---------- */
.wiki-tip {
    margin: 24px 0;
    max-width: 52em;
    padding: 14px 18px 16px;
    background: var(--panel);
    border-left: 4px solid var(--sprout);
}

.wiki-tip p:last-child {
    margin-bottom: 0;
}

.wiki-tip-title {
    display: block;
    margin-bottom: 2px;
    font-weight: 700;
    font-size: 15px;
    color: var(--sprout);
}

.wiki-tip.is-warning {
    border-left-color: #ff7a7a;
}

.wiki-tip.is-warning .wiki-tip-title {
    color: #ff8f8f;
}

/* ---------- Tabellen ---------- */
.wiki-table-wrap {
    overflow-x: auto;
    margin: 20px 0 28px;
    border: 2px solid var(--line);
}

.wiki-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.wiki-table th,
.wiki-table td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: middle;
}

.wiki-table thead th {
    font-weight: 700;
    font-size: 14px;
    color: var(--cream-dim);
    background: var(--panel);
    border-bottom: 2px solid var(--line);
    white-space: nowrap;
}

.wiki-table tbody tr {
    background: transparent;
}

.wiki-table tbody tr + tr {
    border-top: 2px solid var(--panel);
}

.wiki-table tbody th {
    font-weight: 700;
    white-space: nowrap;
}

/* Gruppenzeilen (Farming, Eggs ...) in der Skill-Tabelle */
.wiki-table tbody th[colspan] {
    font-weight: 700;
    font-size: 14px;
    color: var(--coin) !important;
    background: var(--panel);
}

/* ---------- Element-Plaketten ---------- */
.el {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px 4px 2px 0;
    padding: 2px 9px 2px 5px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--panel-deep);
    box-shadow: inset 0 -2px 0 currentColor;
}

.el img {
    width: 16px;
    height: 16px;
}

.el-fire     { color: #ff8a5c; }
.el-water    { color: #6fb0ff; }
.el-grass    { color: #6fe070; }
.el-electric { color: #ffd84a; }
.el-ice      { color: #9eeaff; }
.el-earth    { color: #d9a86e; }
.el-light    { color: #fff4c2; }
.el-chaos    { color: #d08cf0; }

/* ---------- Schadenszahlen: wie sie im Spiel aufploppen ---------- */
.dmg-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 20px 0 28px;
}

.dmg-item {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cream-dim);
    background: var(--panel);
}

.dmg-number {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-pixel);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.1;
    text-shadow: var(--outline-2);
}

.dmg-white  { color: #ffffff; }
.dmg-green  { color: #3dff3d; }
.dmg-red    { color: #ff4040; }
.dmg-yellow { color: #ffff00; font-size: 48px; }
.dmg-aqua   { color: #00ffff; }
.dmg-magenta { color: #ff00ff; font-size: 48px; }

/* ---------- Raenge: Umrandungsfarben aus dem Spiel ---------- */
.rank-scale {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin: 20px 0 28px;
}

.rank-chip {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cream-dim);
    background: var(--panel);
    box-shadow: inset 0 -3px 0 var(--rank-color);
}

.rank-chip b {
    display: block;
    font-weight: 700;
    font-size: 18px;
    color: var(--rank-color);
}

.rank-chip.is-rainbow {
    box-shadow: none;
    border-bottom: 3px solid transparent;
    background:
        linear-gradient(var(--panel), var(--panel)) padding-box,
        linear-gradient(90deg, #ff5e5e, #ffd84d, #5fd264, #5aa2ff, #c07ae0) border-box;
}

.rank-chip.is-rainbow b {
    background: linear-gradient(90deg, #ff5e5e, #ffd84d, #5fd264, #5aa2ff, #c07ae0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Skill-Tabelle ---------- */
.wiki-skill {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    font-weight: 700;
}

.wiki-skill-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* ---------- FAQ: aufklappbare Zeilen ---------- */
.wiki-faq details {
    max-width: 52em;
    border-bottom: 2px solid var(--line);
}

.wiki-faq details:first-of-type {
    border-top: 2px solid var(--line);
}

.wiki-faq summary {
    cursor: pointer;
    padding: 14px 4px;
    font-size: 17px;
    font-weight: 700;
    list-style: none;
}

.wiki-faq summary:hover {
    color: var(--sprout);
}

.wiki-faq summary::-webkit-details-marker {
    display: none;
}

.wiki-faq summary::before {
    content: '+';
    display: inline-block;
    width: 26px;
    font-family: var(--font-pixel);
    font-size: 16px;
    color: var(--coin);
}

.wiki-faq details[open] summary::before {
    content: '-';
}

.wiki-faq details > p {
    margin: 0;
    padding: 0 4px 18px 30px;
    color: var(--cream-dim);
}

/* ---------- Footer: weisse Schrift mit Pixel-Umriss auf der Wiese, wie im Spiel ---------- */
.bp .pk-footer {
    margin: 0;
    padding: 28px 24px 48px 246px;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    text-shadow: var(--outline-2);
    background: none;
    border-top: none;
}

.bp .pk-footer a {
    color: #ffffff;
}

.bp .pk-footer a:hover {
    color: #9eff44;
}

.wiki-credit {
    margin-top: 8px;
    font-size: 13px;
}

/* ---------- Brotkrumen ---------- */
.wiki-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cream-dim);
}

.wiki-breadcrumb a {
    color: var(--cream-dim);
    font-weight: 700;
    text-decoration: none;
}

.wiki-breadcrumb a:hover {
    color: var(--sprout);
}

/* ---------- Vor / Zurueck ---------- */
.wiki-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 28px;
    border-top: 2px solid var(--line);
}

.wiki-pager a {
    display: block;
    padding: 12px 16px 14px;
    font-size: 17px;
    font-weight: 700;
    color: var(--cream);
    text-decoration: none;
    background: var(--panel);
}

.wiki-pager a:hover {
    background: var(--row);
    color: var(--sprout);
}

.wiki-pager small {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--cream-dim);
}

.wiki-pager-prev small::before {
    content: '‹ ';
}

.wiki-pager-next {
    grid-column: 2;
    text-align: right;
}

.wiki-pager-next small::after {
    content: ' ›';
}

/* ---------- Grosse Ueberschriften-Leiste (Browse the guide, Skill-Gruppen) als Holzblock ---------- */
.bp .wiki-section-title,
.bp .wiki-article .skill-group {
    padding: 8px 14px 10px;
    font-size: 32px;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 3px 0 var(--ink);
    background: var(--wood-hi);
    box-shadow: inset 0 3px 0 #a57d5f, inset 0 -3px 0 var(--wood), 0 5px 0 rgba(0, 0, 0, 0.3);
}

/* ---------- Artikeluebersicht auf der Hauptseite ---------- */
.wiki-portal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 28px 12px;
}

/* Kategorie-Kopf als Holzblock, Farben der Spiel-Buttons (buttonbase.png) */
.wiki-article .wiki-portal-group h3 {
    margin: 0 0 12px;
    padding: 7px 12px 9px;
    font-size: 17px;
    line-height: 1.3;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 2px 0 var(--ink);
    background: var(--wood-hi);
    box-shadow: inset 0 3px 0 #a57d5f, inset 0 -3px 0 var(--wood), 0 5px 0 rgba(0, 0, 0, 0.4);
}

.wiki-article .wiki-portal-group ul {
    list-style: none;
    margin: 0;
}

.wiki-article .wiki-portal-group li {
    margin: 0;
    padding: 0;
}

.wiki-article .wiki-portal-group a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 4px;
    font-size: 17px;
    text-decoration: none;
    color: var(--cream);
}

.wiki-article .wiki-portal-group a:hover {
    color: var(--sprout);
}

/* ---------- Boss-Liste: Sprites als Schatten-Version wie im Kampf ---------- */
/* Idle-Animation des Bosses (aus dem Spiel exportiert, 2-fach) ueber dem Namen.
   Feste Buehnenhoehe, damit alle Bosse auf derselben Linie stehen. */
.wiki-boss {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.wiki-boss-stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 96px;
}

.wiki-boss-stage img,
.wiki-boss-stage canvas {
    display: block;
    filter: drop-shadow(0 0 4px rgba(192, 122, 224, 0.55));
}

/* Prismara: Shader im Browser nachgerechnet (js/sprite-shader.js), Canvas in Spielpixeln */
.wiki-boss-stage canvas,
.dex-stage canvas {
    image-rendering: pixelated;
}

/* ---------- Mobile ---------- */
.wiki-toc-toggle {
    display: none;
}

@media (max-width: 900px) {
    .wiki-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 12px 8px 0;
    }

    .wiki-hero {
        padding: 4px 8px 10px;
    }

    .wiki-logo {
        width: 180px;
    }

    .wiki-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 12px;
    }

    .bp .wiki-sidebar {
        border-left: 3px solid var(--wood);
    }

    .wiki-content {
        padding: 18px 16px 28px;
    }

    .bp .pk-footer {
        padding: 24px 16px 40px;
    }

    .wiki-search-box {
        margin-bottom: 10px;
    }

    .wiki-toc-toggle {
        display: block;
        width: 100%;
        padding: 10px 12px;
        font-family: var(--font-ui);
        font-size: 15px;
        font-weight: 700;
        text-align: left;
        color: var(--cream);
        cursor: pointer;
        background: var(--panel);
        border: 2px solid var(--line);
    }

    .wiki-nav {
        display: none;
        margin-top: 10px;
    }

    .wiki-nav.is-open {
        display: block;
    }

    .wiki-page-title {
        font-size: 32px;
        text-shadow: var(--head-shadow);
    }

    .wiki-article p,
    .wiki-article li {
        font-size: 16px;
    }

    .wiki-table th,
    .wiki-table td {
        padding: 8px 10px;
    }

    .wiki-table thead th {
        white-space: normal;
    }

    .wiki-skill {
        min-width: 140px;
        gap: 8px;
    }

    .wiki-skill-icon {
        width: 28px;
        height: 28px;
    }

    .wiki-pager {
        grid-template-columns: 1fr;
    }

    .wiki-pager-next {
        grid-column: 1;
    }
}

/* ---------- Tastatur-Fokus ---------- */
.wiki-nav a:focus-visible,
.wiki-article a:focus-visible,
.wiki-faq summary:focus-visible,
.wiki-toc-toggle:focus-visible,
.wiki-pager a:focus-visible,
.wiki-home-link:focus-visible,
.bp .pk-footer a:focus-visible {
    outline: 3px solid var(--sprout);
    outline-offset: 2px;
}

/* ========================================
   Bloomiedex (Seite wird von wiki-src/dex.py erzeugt)
   Liste aller Bloomies (Nr. / Bloomie / Element), jedes Bloomie hat eine eigene Seite
   (wiki/bloomie-*.html) mit Kopf und Buehne wie im MonDex im Spiel.
   ======================================== */

/* ---------- Element-Filter ueber der Liste ---------- */
.dex-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.dex-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    color: var(--cream);
    cursor: pointer;
    background: var(--panel);
    border: 2px solid var(--line);
}

.dex-filter img {
    width: 32px;
    height: 32px;
}

.dex-filter[data-el]:not([data-el=""]) {
    padding: 0 3px;
}

.dex-filter:hover {
    background: var(--row);
}

.dex-filter.is-active {
    background: var(--panel);
    box-shadow: inset 0 -4px 0 var(--sprout);
}

/* ---------- Liste: Nr. / Bloomie / Element ---------- */
/* Zebrastreifen per Klasse statt nth-child, damit sie beim Filtern stimmen (dex.js) */
.wiki-table.dex-list tbody tr:hover {
    background: var(--panel);
}

.dex-list tbody tr[hidden] {
    display: none;
}

.wiki-table.dex-list td {
    padding-top: 3px;
    padding-bottom: 3px;
}

.dex-list thead th:first-child {
    width: 4.5em;
}

.dex-list thead th:last-child {
    width: 40%;
}

.dex-list-no {
    font-family: var(--font-pixel);
    font-size: 16px;
    color: var(--cream-dim);
}

.wiki-article .dex-list-mon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.wiki-article .dex-list-mon:hover {
    text-decoration: underline;
}

/* Box-Icons dreifach, schmale Icons mittig im selben Platz */
.dex-list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
}

.dex-list .el {
    margin: 0;
}

/* ---------- Spoiler (Prismara): verschwommen, bis man aufdeckt ----------
   Nur mit JavaScript (Klasse dex-js), ohne bleibt alles sichtbar. Aufgedeckt = dex-spoilers-open. */
.dex-js:not(.dex-spoilers-open) .dex-spoiler-blur {
    filter: blur(5px);
    user-select: none;
}

.dex-spoiler {
    position: relative;
}

.dex-js:not(.dex-spoilers-open) .dex-spoiler > .dex-entry {
    filter: blur(18px) saturate(0.6);
    pointer-events: none;
    user-select: none;
}

.dex-spoiler-cover {
    display: none;
}

.dex-js:not(.dex-spoilers-open) .dex-spoiler-cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 90px 16px 0;
}

.dex-spoiler-box {
    max-width: 30em;
    padding: 18px 22px 22px;
    text-align: center;
    background: var(--panel-deep);
    border: 2px solid var(--line);
    box-shadow: 0 6px 0 rgba(38, 26, 22, 0.5), inset 0 -4px 0 #ff5b5b;
}

.wiki-article .dex-spoiler-box p {
    margin: 0 auto 14px;
}

.wiki-article .dex-spoiler-title {
    font-family: var(--font-pixel);
    font-size: 32px;
    line-height: 1.15;
    color: #ff5b5b;
    text-shadow: var(--head-shadow);
}

.dex-spoiler-reveal {
    padding: 9px 22px 11px;
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    color: var(--cream);
    cursor: pointer;
    background: var(--panel);
    border: 2px solid var(--line);
}

.dex-spoiler-reveal:hover {
    background: var(--row);
}

.dex-spoiler-reveal:focus-visible {
    outline: 3px solid var(--sprout);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .wiki-article .dex-spoiler-title {
        font-size: 16px;
    }

    .dex-js:not(.dex-spoilers-open) .dex-spoiler-cover {
        padding-top: 40px;
    }
}

/* ---------- Bloomie-Seite: Vorheriges / Liste / Naechstes ---------- */
.dex-mon-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    margin: 0 0 16px;
}

.wiki-article .dex-mon-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 10px;
    font-weight: 700;
    color: var(--cream);
    text-decoration: none;
    background: var(--panel);
}

.wiki-article .dex-mon-nav a:hover {
    background: var(--row);
}

.dex-mon-nav small {
    display: block;
    font-size: 12px;
    color: var(--coin);
}

.wiki-article .dex-mon-next {
    flex-direction: row-reverse;
    text-align: right;
}

.wiki-article .dex-mon-list {
    justify-content: center;
}

/* ---------- Rang-Auswahl ---------- */
.dex-rankbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 22px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cream-dim);
}

.dex-rankbar label {
    color: var(--cream);
}

.dex-rankbar select {
    padding: 6px 10px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    color: var(--coin);
    background: var(--panel-deep);
    border: 2px solid var(--line);
    border-radius: 0;
}

.dex-rankbar span {
    flex: 1 1 18em;
    font-weight: 500;
}

/* ---------- Ein Eintrag ---------- */
.dex-entry {
    margin-bottom: 36px;
}

.dex-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}

.dex-head h1 {
    margin: 0;
    font-family: var(--font-pixel);
    font-weight: 400;
    font-size: 48px;
    line-height: 1.1;
    color: var(--strong);
    text-shadow: var(--head-shadow);
}

/* Box-Icon im Kopf, wechselt mit der gewaehlten Palette (2-fach) */
.dex-head-icon {
    flex: 0 0 auto;
}

.dex-no {
    font-family: var(--font-pixel);
    font-size: 16px;
    color: var(--coin);
}

/* Links Buehne + Paletten, rechts Beschreibung + Element-Zeilen.
   Die drei Element-Zeilen stehen auf Hoehe der drei Paletten-Leisten, damit nichts mit
   der Beschreibungslaenge springt. Spaltenbreite = laengste Palette (21 Farben) ohne Umbruch. */
.dex-body {
    --dex-row: 54px;
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    grid-template-areas:
        "stage desc"
        "variants types";
    gap: 10px 22px;
    margin-top: 16px;
}

.dex-body .dex-stage    { grid-area: stage; }
.dex-body .dex-desc     { grid-area: desc; }
.dex-body .dex-variants { grid-area: variants; }
.dex-body .dex-types    { grid-area: types; }

/* Buehne: Bloomie steht auf dem Schatten aus dem Spiel-Dex (4-fach) */
.dex-stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 200px;
    padding-bottom: 26px;
    background:
        url('../images/wiki/dex-shadow.png') center bottom 18px / 96px 28px no-repeat,
        linear-gradient(var(--panel) 0 70%, var(--row) 70%);
    border: 2px solid var(--line);
}

.dex-stage img,
.dex-stage canvas {
    display: block;
}

/* ---------- Paletten: jede Leiste schaltet das Sprite um ---------- */
.dex-variants {
    display: grid;
    gap: 6px;
}

/* Name oben, alle Farben darunter in einer Reihe */
.dex-variant {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: var(--dex-row);
    padding: 3px 8px;
    line-height: 1.2;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    color: var(--cream-dim);
    cursor: pointer;
    background: var(--panel-deep);
    border: 2px solid var(--line);
}

.dex-variant:hover {
    color: var(--cream);
    background: var(--row);
}

.dex-variant.is-active {
    color: var(--sprout);
    background: var(--panel);
    border-color: var(--sprout);
}

.dex-variant[data-variant="shiny"].is-active {
    color: var(--coin);
    border-color: var(--coin);
}

.dex-variant[data-variant="evil"].is-active {
    color: #d08cf0;
    border-color: #d08cf0;
}

/* Die Paletten sind 1 Pixel pro Farbe - hier als grosse Farbfelder */
.dex-swatches {
    display: flex;
    gap: 1px;
}

.dex-swatches i {
    box-sizing: border-box;
    display: block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid var(--ink);
}

.dex-variant:focus-visible {
    outline: 3px solid var(--sprout);
    outline-offset: 2px;
}

.wiki-article .dex-desc {
    margin: 0;
}

.dex-types {
    display: grid;
    align-content: start;
    gap: 6px;
    margin: 0;
}

.dex-types > div {
    display: grid;
    grid-template-columns: 8.5em minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: var(--dex-row);
}

.dex-types dt,
.dex-stat dt {
    font-size: 14px;
    font-weight: 700;
    color: var(--cream-dim);
}

.dex-types dd {
    margin: 0;
}

.dex-rank-note {
    font-size: 14px;
    color: var(--cream-dim);
}

.dex-rank-label {
    color: var(--coin);
}

/* ---------- Werte auf Level 100 ---------- */
.dex-stats {
    display: grid;
    gap: 8px;
    max-width: 36em;
}

.dex-stat {
    display: grid;
    grid-template-columns: 6em minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.dex-stat dd {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.dex-bar {
    flex: 1;
    height: 18px;
    background: var(--panel-deep);
    border: 2px solid var(--line);
}

.dex-bar > span {
    display: block;
    height: 100%;
    background: currentColor;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}

.dex-num {
    min-width: 3.2em;
    font-size: 16px;
    font-weight: 700;
    text-align: right;
    color: var(--strong);
}

.dex-stat-str .dex-bar { color: #ff6b6b; }
.dex-stat-def .dex-bar { color: #6be4ff; }
.dex-stat-spd .dex-bar { color: #6bff8f; }
.dex-stat-hp  .dex-bar { color: var(--coin); }

/* ---------- Herkunft: Eier + Entwicklung ---------- */
.wiki-article .dex-sources {
    list-style: none;
    margin: 0;
    display: grid;
    gap: 6px;
}

.wiki-article .dex-sources li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 6px 12px;
    background: var(--panel);
    border: 2px solid var(--line);
}

.wiki-article .dex-sources li:nth-child(even) {
    background: var(--row);
}

.dex-sources img {
    flex: 0 0 auto;
}

.dex-egg-name {
    flex: 1;
    font-weight: 700;
}

.dex-egg-chance {
    font-size: 16px;
    font-weight: 700;
    color: var(--coin);
}

.wiki-article .dex-evo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: none;
}

.dex-evo-mon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 6px;
    font-weight: 700;
    text-decoration: none;
    background: var(--panel);
    border: 2px solid var(--line);
}

.wiki-article a.dex-evo-mon {
    color: var(--cream);
}

.wiki-article a.dex-evo-mon:hover {
    color: var(--sprout);
}

span.dex-evo-mon {
    color: var(--sprout);
    border-color: var(--sprout);
}

.dex-evo-lv {
    font-size: 14px;
    font-weight: 700;
    color: var(--coin);
}

.dex-evo-lv::after {
    content: " \25B8";
}

.dex-filter:focus-visible,
.dex-rankbar select:focus-visible {
    outline: 3px solid var(--sprout);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .dex-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "stage" "variants" "desc" "types";
    }

    /* Auf schmalen Bildschirmen duerfen lange Paletten umbrechen */
    .dex-variant {
        height: auto;
        min-height: var(--dex-row);
        padding: 5px 8px;
    }

    .dex-swatches {
        flex-wrap: wrap;
    }

    .dex-types > div {
        grid-template-columns: 1fr;
        gap: 2px;
        min-height: 0;
    }

    /* Liste oben ueber die volle Breite, Vor/Zurueck darunter nebeneinander */
    .dex-mon-nav {
        grid-template-columns: 1fr 1fr;
    }

    .wiki-article .dex-mon-list {
        grid-column: 1 / -1;
        order: -1;
    }

    .dex-mon-nav > span:empty {
        display: none;
    }
}

/* ========================================
   Egg Guide (Seite wird von wiki-src/dex.py erzeugt)
   Pro Ei eine Tafel: Samen + Bezugsquelle links, schluepfende Bloomies rechts.
   ======================================== */
.egg-card {
    margin: 0 0 22px;
    background: var(--panel);
    border: 2px solid var(--line);
    scroll-margin-top: 72px;
}

.egg-card:target {
    border-color: var(--sprout);
}

.egg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 8px 14px;
    background: var(--panel-deep);
    border-bottom: 3px solid var(--ink);
}

.egg-head h2 {
    margin: 0;
    font-family: var(--font-pixel);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.25;
    color: var(--strong);
    text-shadow: var(--head-shadow);
}

.egg-hatch {
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--cream-dim);
    text-align: right;
}

/* Zeit mit allen Skills unter der Grundzeit */
.egg-hatch small {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--sprout);
}

.egg-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 22px;
    padding: 14px 16px 16px;
}

.wiki-article .egg-col h3 {
    margin: 0 0 10px;
    font-size: 16px;
}

.egg-seed {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.egg-seed + .egg-seed {
    margin-top: 14px;
}

.egg-seed img {
    flex: 0 0 auto;
    margin-top: 4px;
}

.wiki-article .egg-seed p {
    margin: 0;
}

.wiki-article .egg-seed-grow {
    font-size: 15px;
    color: var(--cream-dim);
}

.wiki-article .egg-seed-src {
    list-style: none;
    margin: 6px 0 0;
}

.wiki-article .egg-seed-src li {
    position: relative;
    margin: 0 0 2px;
    padding-left: 16px;
    font-size: 14px;
    line-height: 1.5;
}

/* Kleines Pixel-Quadrat statt Aufzaehlungspunkt */
.wiki-article .egg-seed-src li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--coin);
}

.wiki-article .egg-none {
    color: var(--cream-dim);
}

.wiki-article .egg-mons {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px;
    margin: 0;
    max-width: none;
}

.wiki-article .egg-mons li {
    margin: 0;
}

.wiki-article .egg-mons a,
.wiki-article .egg-mon-random {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 6px;
    font-size: 14px;
    color: var(--cream);
    text-decoration: none;
    background: var(--row);
    border: 2px solid var(--line);
}

.wiki-article .egg-mons a:hover {
    color: var(--sprout);
    background: var(--panel-deep);
}

.egg-mon-name {
    flex: 1;
    min-width: 0;
}

.egg-mon-chance {
    font-weight: 700;
    color: var(--coin);
}

.wiki-article .egg-note {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--cream-dim);
}

/* Ei-Namen im Bloomiedex verlinken zur Egg Guide */
/* Ei-Zeilen im Bloomiedex: ganze Zeile verlinkt auf die Egg Guide */
.wiki-article .dex-sources li.dex-src-egg {
    padding: 0;
}

.wiki-article .dex-src-egg a {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    color: var(--cream);
    text-decoration: none;
}

.wiki-article .dex-src-egg a:hover {
    background: var(--panel-deep);
}

.wiki-article .dex-src-egg .dex-egg-name {
    text-decoration: underline;
    text-decoration-color: var(--sprout);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.wiki-article .dex-src-egg a:hover .dex-egg-name {
    color: var(--sprout);
}

@media (max-width: 900px) {
    .egg-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ========================================
   Seed Guide (Seite wird von wiki-src/dex.py erzeugt)
   Nutzt die Tafeln der Egg Guide, dazu eine Leiste mit allen Wachstumsstufen.
   ======================================== */
.seed-growth {
    padding: 14px 16px 0;
}

.wiki-article .seed-stages {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    max-width: none;
}

.wiki-article .seed-stages li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 128px;
    margin: 0;
    padding: 0 0 8px;
    background: var(--panel-deep);
    border: 2px solid var(--line);
}

/* Alle Stufen stehen auf derselben Bodenlinie, wie auf dem Acker im Spiel */
.seed-stage-img {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 150px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    background: linear-gradient(transparent 0 calc(100% - 10px), var(--wood-lo) calc(100% - 10px));
}

.seed-stage-no {
    font-size: 12px;
    font-weight: 700;
    color: var(--coin);
}

.seed-stage-time {
    padding: 0 6px;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    color: var(--cream-dim);
}

.wiki-article .seed-regrow {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--cream-dim);
}

.wiki-article .egg-seed-name a {
    font-weight: 700;
    color: var(--strong);
}

.wiki-article .egg-seed-name a:hover {
    color: var(--sprout);
}

@media (max-width: 900px) {
    .wiki-article .seed-stages li {
        width: calc(50% - 4px);
    }
}

/* ---------- Konversationen: Emotionen (18px-Sprites, 3-fach) ---------- */
.wiki-article .emo-group-title {
    margin: 18px 0 8px;
    font-weight: 700;
    font-size: 16px;
}

.emo-double  { color: #ff8ab0; }
.emo-good    { color: var(--sprout); }
.emo-bad     { color: #ff8a5c; }
.emo-neutral { color: var(--cream-dim); }

.emo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}

.emo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 96px;
    margin: 0;
    padding: 8px 4px 6px;
    background: var(--panel-deep);
    border: 2px solid var(--line);
}

.emo-card img {
    width: 54px;
    height: 54px;
}

.emo-card figcaption {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* ---------- Skill-Links: <em>Skillname</em> verlinkt auf seine Zeile (build.py: link_skills) ---------- */
.wiki-article a.skill-link em {
    font-style: normal;
}

.wiki-article a.skill-link {
    text-decoration-color: rgba(255, 194, 51, 0.4);
}

.wiki-article a.skill-link:hover {
    text-decoration-color: var(--coin);
}

/* Angesprungene Skill-Zeile in Goldgelb markieren */
.wiki-table tbody tr:target {
    background: #7a5a2c;
    animation: skill-target 0.6s steps(2, jump-none) 3;
}

.wiki-table tbody tr:target > td {
    box-shadow: inset 0 3px 0 var(--coin), inset 0 -3px 0 var(--coin);
}

.wiki-table tbody tr:target > td:first-child {
    box-shadow: inset 3px 3px 0 var(--coin), inset 0 -3px 0 var(--coin);
}

.wiki-table tbody tr:target > td:last-child {
    box-shadow: inset -3px 3px 0 var(--coin), inset 0 -3px 0 var(--coin);
}

.wiki-table tbody tr:target .wiki-skill {
    color: var(--coin);
}

@keyframes skill-target {
    50% { background: var(--panel); }
}

@media (prefers-reduced-motion: reduce) {
    .wiki-table tbody tr:target {
        animation: none;
    }
}

/* ---------- Skill-Karten (wiki-src/skills.py, Regler per js/skills.js) ---------- */
/* Gold fuer alle Skills auf Max (oben auf der Seite) */
.skill-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin: 20px 0 8px;
    padding: 14px 16px;
    background: var(--panel-deep);
    border: 2px solid var(--line);
}

.skill-sum-coin {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
}

.skill-sum-text {
    flex: 1 1 auto;
}

.wiki-article .skill-sum p {
    margin: 0;
    max-width: none;
}

.wiki-article .skill-sum-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--cream-dim);
}

.wiki-article .skill-sum-gold {
    font-family: var(--font-pixel);
    font-size: 32px;
    line-height: 1.1;
    color: var(--coin);
    text-shadow: var(--head-shadow);
}

.skill-sum-parts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    font-size: 13px;
}

.skill-sum-parts dt {
    color: var(--cream-dim);
}

.skill-sum-parts dd {
    margin: 0;
    font-weight: 700;
    color: var(--coin);
}

.wiki-article .skill-group {
    margin: 48px 0 16px;
    font-family: var(--font-pixel);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.2;
    text-align: left;
    color: var(--strong);
    text-shadow: var(--head-shadow);
}

.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 14px;
    align-items: start;
}

.skill-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0; /* sonst drueckt die breite Stufen-Tabelle die Karte ueber den Rand */
    padding: 12px 14px 14px;
    background: var(--panel);
    border: 2px solid var(--line);
}

.wiki-article .skill-card p {
    margin: 0;
    max-width: none;
}

.skill-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.skill-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.skill-title {
    flex: 1;
    min-width: 0;
}

.wiki-article .skill-name {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: var(--strong);
}

.wiki-article .skill-card .skill-desc {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cream-dim);
}

.skill-badge {
    flex: 0 0 auto;
    padding: 2px 8px 3px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--coin);
    background: var(--panel-deep);
}

.skill-card.is-endgame .skill-badge {
    color: var(--sprout);
}

/* Start -> Max */
.wiki-article .skill-card .skill-range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cream-dim);
}

.skill-range span:last-child {
    color: var(--sprout);
}

.skill-arrow {
    color: var(--coin);
}

/* Kosten je Stufe als Balken, gekaufte Stufen in Muenzgelb */
.skill-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 48px;
    padding: 4px;
    background: var(--panel-deep);
}

.skill-bar {
    flex: 1;
    min-width: 2px;
    height: var(--h);
    background: var(--wood-lo);
}

.has-calc .skill-bar {
    cursor: pointer;
}

.has-calc .skill-bar:hover {
    background: var(--wood-hi);
}

.skill-bar.is-bought,
.has-calc .skill-bar.is-bought:hover {
    background: var(--coin);
}

.skill-bar.is-next {
    background: var(--cream-dim);
}

/* Stufen-Regler wie ein Spiel-Slider: Holzknopf auf dunkler Rinne */
.skill-slider {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cream-dim);
}

.skill-slider input[type="range"] {
    flex: 1;
    min-width: 0;
    height: 14px;
    margin: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(var(--coin), var(--coin)) 0 0 / var(--p, 0%) 100% no-repeat, var(--panel-deep);
    border: 2px solid var(--line);
}

.skill-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 26px;
    background: var(--panel);
    border: 2px solid var(--line);
    border-radius: 0;
}

.skill-slider input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 22px;
    background: var(--panel);
    border: 2px solid var(--line);
    border-radius: 0;
}

.skill-slider input[type="range"]::-moz-range-track {
    background: transparent;
}

.skill-slider input[type="range"]:focus-visible {
    outline: 3px solid var(--sprout);
    outline-offset: 3px;
}

.skill-slider output {
    min-width: 4.2em;
    text-align: right;
    color: var(--strong);
    font-variant-numeric: tabular-nums;
}

.skill-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 10px 0 0;
}

.skill-stats > div {
    min-width: 0;
    padding: 5px 9px 7px;
    background: var(--panel-deep);
}

.skill-stats dt {
    font-size: 11px;
    font-weight: 700;
    color: var(--cream-dim);
}

.skill-stats dd {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--strong);
    overflow-wrap: anywhere;
}

.skill-stats [data-out="next"],
.skill-stats [data-out="spent"] {
    color: var(--coin);
}

.skill-card.is-maxed [data-out="next"] {
    color: var(--sprout);
}

.wiki-article .skill-card .skill-total,
.wiki-article .skill-card .skill-note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--cream-dim);
}

.wiki-article .skill-card .skill-gold {
    color: var(--coin);
}

/* Alle Stufen als Tabelle */
.skill-levels {
    overflow-x: auto;
}

.skill-levels summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--sprout);
    list-style: none;
}

.skill-levels summary::-webkit-details-marker {
    display: none;
}

.skill-levels summary::before {
    content: '+';
    display: inline-block;
    width: 16px;
    font-family: var(--font-pixel);
    color: var(--coin);
}

.skill-levels[open] summary::before {
    content: '-';
}

.skill-levels summary:focus-visible {
    outline: 3px solid var(--sprout);
    outline-offset: 2px;
}

.skill-table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    border: 2px solid var(--line);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.skill-table th,
.skill-table td {
    padding: 4px 8px;
    text-align: left;
    white-space: nowrap;
}

.skill-table td:nth-child(3),
.skill-table td:nth-child(4),
.skill-table th:nth-child(3),
.skill-table th:nth-child(4) {
    text-align: right;
}

.skill-table thead th {
    font-weight: 700;
    color: var(--cream-dim);
    background: var(--panel-deep);
}

.skill-table tbody tr:nth-child(even) {
    background: var(--row);
}

.skill-table tbody tr.is-current {
    background: #7a5a2c;
    color: var(--strong);
    font-weight: 700;
}

/* Angesprungene Karte (Link aus einem anderen Artikel) blinkt kurz goldgelb */
.skill-card:target {
    outline: 3px solid var(--coin);
    animation: skill-card-target 0.6s steps(2, jump-none) 3;
}

.skill-card:target .skill-name {
    color: var(--coin);
}

@keyframes skill-card-target {
    50% { outline-color: transparent; }
}

@media (max-width: 600px) {
    .skill-card {
        padding: 10px 10px 12px;
    }

    .skill-stats dd {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skill-card:target {
        animation: none;
    }
}

/* ========================================
   Helles Wiki: Farben, die auf hellem Grund dunkler sein muessen
   ======================================== */
.bp .el-fire     { color: #c4421a; }
.bp .el-water    { color: #1f68c4; }
.bp .el-grass    { color: #2b8a2b; }
.bp .el-electric { color: #9a7400; }
.bp .el-ice      { color: #13809f; }
.bp .el-earth    { color: #8a5a24; }
.bp .el-light    { color: #8f7a12; }
.bp .el-chaos    { color: #8a3fb5; }

/* Stat-Namen (Your Bloomies): Farben der Stat-Balken, abgedunkelt fuer das helle Fenster */
.bp .stat-str { color: #b8322a; }
.bp .stat-def { color: #146f9c; }
.bp .stat-spd { color: #22801f; }

.bp .el {
    background: #f6ead6;
}

.bp .wiki-tip {
    background: #e3ebc4;
    border-left-color: #42ab3d;
}

.bp .wiki-tip.is-warning {
    background: rgba(214, 60, 60, 0.1);
    border-left-color: #d63c3c;
}

.bp .wiki-tip.is-warning .wiki-tip-title {
    color: #b8302f;
}

.bp .emo-double { color: #c2386e; }
.bp .emo-bad    { color: #c4421a; }

.bp .dex-variant[data-variant="evil"].is-active {
    color: #8a3fb5;
    border-color: #8a3fb5;
}

.bp .wiki-article .dex-spoiler-title {
    color: #d63c3c;
}

.bp .skill-table tbody tr.is-current,
.bp .wiki-table tbody tr:target {
    background: #f7e2ad;
    color: var(--strong);
}

.bp .wiki-table tbody tr + tr {
    border-top-color: var(--row);
}

.bp .wiki-table thead th {
    color: var(--cream);
    background: var(--panel-deep);
}

.bp .skill-bar {
    background: #c4a77e;
}

.bp .has-calc .skill-bar:hover {
    background: var(--wood-hi);
}

.bp .skill-bar.is-next {
    background: var(--wood-lo);
}

.bp .wiki-search-results {
    background: #f8eedc;
    box-shadow: 0 6px 0 rgba(38, 26, 22, 0.15);
}

.bp .wiki-pager a:hover,
.bp .wiki-article .dex-mon-nav a:hover {
    color: var(--strong);
}

.bp .wiki-nav-group h2 {
    text-shadow: none;
}

.bp .wiki-article a {
    text-decoration-color: rgba(30, 106, 18, 0.4);
}

.bp .wiki-article a.skill-link {
    text-decoration-color: rgba(138, 80, 0, 0.4);
}

.bp .wiki-article a:hover,
.bp .wiki-article a.skill-link:hover {
    color: var(--strong);
    text-decoration-color: currentColor;
}

/* ---------- Ueberschriften in normaler Schrift (statt BoldPixels) ---------- */
.bp .wiki-title {
    font-size: 17px;
    font-weight: 700;
}

.bp .wiki-page-title,
.bp .dex-head h1 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
}

.bp .wiki-section-title,
.bp .wiki-article .skill-group {
    font-size: 22px;
    font-weight: 700;
    text-shadow: 0 2px 0 var(--ink);
}

.bp .egg-head h2 {
    font-size: 24px;
    font-weight: 700;
}

.bp .wiki-article .skill-sum-gold {
    font-size: 28px;
    font-weight: 700;
}

.bp .wiki-article .dex-spoiler-title {
    font-size: 26px;
    font-weight: 700;
}

.bp .dex-list-no,
.bp .dex-no {
    font-size: 14px;
    font-weight: 700;
}

/* Systemschrift in 900 laeuft deutlich breiter als die Pixelschrift: kleiner setzen */
.bp .dmg-number {
    font-weight: 900;
    font-size: 24px;
}

.bp .dmg-yellow,
.bp .dmg-magenta {
    font-size: 28px;
}

.bp .dmg-item {
    font-weight: 400;
}

@media (max-width: 900px) {
    .bp .wiki-page-title,
    .bp .dex-head h1 {
        font-size: 28px;
    }
}

/* ---------- Shop-Preisliste (wiki-src/shop.py, Seite Gold & Shop) ---------- */
.shop-table .shop-icon {
    width: 1%;
    padding-right: 4px;
    text-align: center;
}

.shop-table .shop-icon img {
    display: block;
    margin: 0 auto;
}

.shop-gold {
    font-weight: 700;
    color: var(--coin);
    white-space: nowrap;
}

.shop-gold small {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--cream-dim);
}

.shop-level {
    margin: 20px 0;
    padding: 14px 16px 6px;
    background: var(--panel);
    border: 2px solid var(--line);
}

.shop-level-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin-bottom: 8px;
}

.wiki-article .shop-level-head h4 {
    margin: 0;
    font-size: 18px;
}

.shop-level-sum {
    font-weight: 700;
    color: var(--coin);
}

.wiki-article .shop-group-name {
    margin: 10px 0 6px;
    font-weight: 700;
}

.shop-group-name small {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cream-dim);
}

/* Deko steht wie im Spiel auf dem Boden: Kacheln unten ausgerichtet */
.wiki-article .shop-tiles {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.wiki-article .shop-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 52px;
    min-height: 52px;
    margin: 0;
    padding: 6px;
    background: var(--panel-deep);
}

.shop-tile span {
    max-width: 96px;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
}

/* ---------- Screenshots mit nummerierten Markern + Legende (Build Mode, Inkubator) ---------- */
.shot {
    margin: 8px 0 24px;
    max-width: 920px;
}

.shot-frame {
    position: relative;
}

.shot-frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* Spielvideo (WebM mit Alpha) in Originalgroesse, nur auf schmalen Bildschirmen kleiner */
.wiki-video {
    margin: 8px 0 24px;
}

.wiki-video video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Marker im Look der Spiel-Plaketten: Muenzgelb mit Pixel-Umriss */
.shot-num,
.wiki-article a.shot-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid #1d1411;
    border-radius: 50%;
    background: #ffc233;
    box-shadow: 0 2px 0 #1d1411;
    color: #1d1411;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
}

.wiki-article a.shot-pin {
    position: absolute;
    transform: translate(-50%, -50%);
}

.wiki-article a.shot-pin:hover,
.wiki-article a.shot-pin:focus-visible {
    background: #ffffff;
    color: #1d1411;
}

.shot figcaption {
    margin-top: 6px;
    font-size: 14px;
    color: var(--cream-dim);
}

.wiki-article .shot-legend {
    margin-left: 0;
    padding: 0;
    list-style: none;
}

.wiki-article .shot-legend > li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 14px;
    padding: 0;
    scroll-margin-top: 80px;
}

/* Angesprungener Eintrag blinkt kurz auf, wie die Skill-Karten */
.shot-legend > li:target {
    animation: shot-flash 1.6s ease-out;
}

@keyframes shot-flash {
    0%, 40% { background: rgba(255, 194, 51, 0.45); }
    100% { background: transparent; }
}

.wiki-article .shot-icons,
.wiki-article .shot-chips {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.wiki-article .shot-icons li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 0;
}

.wiki-article .shot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.wiki-article .shot-chips li {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

/* Handy: Screenshot ist schmal, Marker kleiner damit sie nichts verdecken */
@media (max-width: 600px) {
    .wiki-article a.shot-pin {
        width: 20px;
        height: 20px;
        border-width: 1px;
        font-size: 11px;
    }
}

/* ---------- Alle Huete (sparkle.html, erzeugt von wiki-src/hats.py) ---------- */
/* Gleich breite Kacheln im Raster, Hut oben, Quelle bzw. Bloomie-Name darunter */
.wiki-article .hat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    align-items: stretch;
    margin-bottom: 28px;
}

.wiki-article .hat-tile {
    justify-content: space-between;
    padding: 10px 6px 8px;
}

.wiki-article .hat-tile > img,
.hat-variant img,
.hat-variant canvas {
    margin: auto 0;
}

/* Prismara-Hut: js/sprite-shader.js ersetzt das Bild durch ein Canvas mit Regenbogen-Shader */
.hat-variant canvas {
    image-rendering: pixelated;
}

.wiki-article .hat-tile > span,
.wiki-article .hat-tile > a {
    max-width: none;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
}

.wiki-article .hat-tile > a {
    font-size: 13px;
}

.wiki-article .hat-pair {
    display: flex;
    flex: 1;
    align-items: stretch;
    gap: 10px;
    max-width: none;
}

.hat-variant {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.hat-variant small {
    font-size: 11px;
    color: var(--cream-dim);
}

/* ---------- Build Mode Items / Effects / Backgrounds (erzeugt von wiki-src/buildmode.py) ---------- */
.wiki-article .bm-cat-nav {
    margin: 0 0 8px;
}

.wiki-article .bm-cat-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wiki-article .bm-cat-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bm-cat-head small,
.bm-cat-nav small {
    font-weight: 400;
    color: var(--cream-dim);
}

/* Deko-Kacheln etwas breiter (Baeume, Laternen), Grafik unten wie auf dem Boden */
.wiki-article .bm-items {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

.wiki-article .bm-item > img {
    margin: auto 0 0;
    max-width: 100%;
    height: auto;
}

.bm-card {
    margin: 0 0 22px;
    padding: 12px 14px 14px;
    background: var(--panel);
    border: 1px solid var(--line);
}

.bm-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.wiki-article .bm-card-head h3 {
    margin: 0;
    font-size: 18px;
    color: var(--strong);
}

.wiki-article .bm-card-head p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--cream-dim);
}

.bm-icon {
    flex: none;
}

/* Vorschau: Spielstreifen, 40 Spielpixel hoch, ganzzahlig skaliert (js/buildmode-preview.js) */
.bm-stage {
    overflow: hidden;
    border: 2px solid #1d1411;
    background: #33404f;
}

.bm-canvas {
    display: block;
    image-rendering: pixelated;
}

.bm-stage noscript {
    display: block;
    padding: 12px;
    font-size: 14px;
    color: #ffffff;
}