/* ════════════════════════════════════════════════════════════════════════
   components-celestial-infant.css — Celestial Infant: Erziehungs-Simulator.

   🔑 DIE GEOMETRIE IST VORGEGEBEN, NICHT GESTALTET. Das Fenster ist ein 902×625-Bild aus dem
     Client; jede Zahl unten ist eine Koordinate auf dieser Vorlage — verschiebt man sie, liegen
     die Slots neben ihren Ästen. Keine Magic Values im Sinne des Lint-Wächters, darum roh.

   ⚑ MASSGEBLICH IST DER CLIENT, NICHT ASTERELLE: die Werte stammen aus `interfaces.pck` →
     `interfaces/servant_growing.xml` (`Win_Servant_Growing`, 902×625). Asterelles Nachbau weicht
     an drei Stellen ab (Auslage-Slot 5 x=609 statt 612, Branch-Slot 2 y=345 statt 356, Branch-Slot 5
     y=356 statt 374) — korrigiert auf die Client-Werte. Wer hier etwas ändert: erst das XML lesen.
     Belege: .project/tasks/celestial-infant-system.md §3b/§3d/§3e.

   🔑 SKALIERT ALS GANZES statt umzubrechen: `--ci-scale` staucht das komplette Fenster
     (transform: scale), die Stage rechnet ihre Box entsprechend. So bleibt die Bild-Slot-
     Beziehung intakt — ein Umbruch würde sie zerstören. Das ist der einzig sinnvolle Weg,
     Säule 3 (Responsive) mit einer festen Bildvorlage zu vereinbaren.

   Markup: pages/celestial-infant.php · JS: js/celestial-infant/index.js
   ════════════════════════════════════════════════════════════════════════ */

/* Die beiden PW-Client-Schriften — ohne sie sehen Karten und Labels „fremd" aus.
   Herkunft: Asterelles Font-Squirrel-Subsets (2012), mitgesichert in public/fonts/. */
@font-face {
  font-family: FZXiHei;
  src: url("../fonts/fzxh1jw--gb1-0-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: fzkai;
  src:
    url("../fonts/fzl2jw-webfont.woff2") format("woff2"),
    url("../fonts/fzl2jw-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@layer components {
  .ci {
    --ci-scale: 1;
    --ci-w: 902px;
    --ci-h: 625px;
    --ci-ui: "FZXiHei", var(--font-body, sans-serif);
    --ci-label: "fzkai", var(--font-body, serif);

    /* Karten-Text aus der Vorlage: warmes Pergament-Weiß auf dunklem Holz. */
    --ci-ink: rgb(252 234 204);
    --ci-dim: rgb(204 204 204);
    --ci-active: rgb(51 255 51);
    --ci-hint: rgb(179 217 255);
    --ci-gold: rgb(255 204 51);
  }

  .ci-worldbar {
    display: flex;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
  }

  .ci-status {
    color: var(--color-text-muted);
    margin-block-end: var(--space-3);
  }

  .ci-status:empty {
    display: none;
  }

  /* Die Stage reserviert exakt den Platz, den das skalierte Fenster einnimmt —
     sonst würde der Seitenfluss unter dem transform zusammenfallen. */
  .ci-stage {
    position: relative;
    width: calc(var(--ci-w) * var(--ci-scale));
    height: calc(var(--ci-h) * var(--ci-scale));
    max-width: 100%;
  }

  .ci-window {
    position: relative;
    width: var(--ci-w);
    height: var(--ci-h);
    background-image: url("../img/celestial-infant/background.png");
    font-family: var(--ci-ui);
    color: var(--ci-ink);
    user-select: none;
    transform: scale(var(--ci-scale));
    transform-origin: top left;
  }

  /* ── Dekor-Ebenen (liegen unter allem Bedienbaren) ── */
  .ci-bg1,
  .ci-branch,
  .ci-photo,
  .ci-refund {
    position: absolute;
    background-size: 100% 100%;
  }

  .ci-bg1 {
    inset-block-start: 132px;
    inset-inline-start: 0;
    width: 171px;
    height: 397px;
    background-image: url("../img/celestial-infant/bg1.png");
  }

  .ci-branch {
    inset-block-start: 264px;
    inset-inline-start: 168px;
    width: 591px;
    height: 226px;
    background-image: url("../img/celestial-infant/branch.png");
  }

  /* Das Kind selbst — Klick wechselt die Erscheinung (6 Varianten × 3 Altersstufen).
     Reine Kosmetik, ohne Einfluss auf die Rechnung. Das JS setzt nur die drei data-Attribute;
     welche Datei dazugehört, steht ausschließlich hier. */
  .ci-photo {
    inset-block-start: 221px;
    inset-inline-start: 125px;
    width: 167px;
    height: 173px;
    border: 0;
    cursor: pointer;
    background-color: transparent;
  }

  .ci-photo[data-sex="female"][data-variant="0"][data-age="0"] { background-image: url("../img/celestial-infant/profile/grow_female_0_y0.png"); }
  .ci-photo[data-sex="female"][data-variant="0"][data-age="1"] { background-image: url("../img/celestial-infant/profile/grow_female_0_y1.png"); }
  .ci-photo[data-sex="female"][data-variant="0"][data-age="2"] { background-image: url("../img/celestial-infant/profile/grow_female_0_y2.png"); }
  .ci-photo[data-sex="female"][data-variant="1"][data-age="0"] { background-image: url("../img/celestial-infant/profile/grow_female_1_y0.png"); }
  .ci-photo[data-sex="female"][data-variant="1"][data-age="1"] { background-image: url("../img/celestial-infant/profile/grow_female_1_y1.png"); }
  .ci-photo[data-sex="female"][data-variant="1"][data-age="2"] { background-image: url("../img/celestial-infant/profile/grow_female_1_y2.png"); }
  .ci-photo[data-sex="female"][data-variant="2"][data-age="0"] { background-image: url("../img/celestial-infant/profile/grow_female_2_y0.png"); }
  .ci-photo[data-sex="female"][data-variant="2"][data-age="1"] { background-image: url("../img/celestial-infant/profile/grow_female_2_y1.png"); }
  .ci-photo[data-sex="female"][data-variant="2"][data-age="2"] { background-image: url("../img/celestial-infant/profile/grow_female_2_y2.png"); }
  .ci-photo[data-sex="male"][data-variant="0"][data-age="0"] { background-image: url("../img/celestial-infant/profile/grow_male_0_y0.png"); }
  .ci-photo[data-sex="male"][data-variant="0"][data-age="1"] { background-image: url("../img/celestial-infant/profile/grow_male_0_y1.png"); }
  .ci-photo[data-sex="male"][data-variant="0"][data-age="2"] { background-image: url("../img/celestial-infant/profile/grow_male_0_y2.png"); }
  .ci-photo[data-sex="male"][data-variant="1"][data-age="0"] { background-image: url("../img/celestial-infant/profile/grow_male_1_y0.png"); }
  .ci-photo[data-sex="male"][data-variant="1"][data-age="1"] { background-image: url("../img/celestial-infant/profile/grow_male_1_y1.png"); }
  .ci-photo[data-sex="male"][data-variant="1"][data-age="2"] { background-image: url("../img/celestial-infant/profile/grow_male_1_y2.png"); }
  .ci-photo[data-sex="male"][data-variant="2"][data-age="0"] { background-image: url("../img/celestial-infant/profile/grow_male_2_y0.png"); }
  .ci-photo[data-sex="male"][data-variant="2"][data-age="1"] { background-image: url("../img/celestial-infant/profile/grow_male_2_y1.png"); }
  .ci-photo[data-sex="male"][data-variant="2"][data-age="2"] { background-image: url("../img/celestial-infant/profile/grow_male_2_y2.png"); }

  /* ── Slots und Karten ── */
  .ci-slot {
    position: absolute;
    width: 84px;
    height: 97px;
    background-image: url("../img/celestial-infant/slot.png");
  }

  .ci-slot.is-dropzone {
    outline: 2px solid var(--ci-gold);
    outline-offset: -2px;
  }

  /* Das Kartenbild ist der einzige Wert, der je Karte verschieden ist — das JS setzt ihn als
     `--ci-art` (fertige URL vom Handler), die Regel bleibt hier. */
  .ci-card {
    position: absolute;
    inset: 0;
    width: 84px;
    height: 97px;
    background-image: var(--ci-art, none);
    background-size: 100% 100%;
    cursor: grab;
  }

  .ci-card.is-dragging {
    opacity: 0.4;
  }

  .ci-card-score {
    position: absolute;
    inset-block-start: 5px;
    inset-inline-start: 34px;
    width: 50px;
    font-size: 13px;
    text-align: right;
  }

  .ci-card-name {
    position: absolute;
    inset-block-start: 74px;
    inset-inline-start: 8px;
    width: 120px;
    font-family: var(--ci-label);
    font-size: 16px;
    line-height: 1;
  }

  /* Der Preis steht nur an der Auslage — dort kauft man, überall sonst besitzt man schon. */
  .ci-card-cost {
    position: absolute;
    inset-block-start: 100px;
    inset-inline-start: 28px;
    display: none;
    font-family: var(--ci-label);
    font-size: 16px;
    line-height: 1;
  }

  .ci-slot-lib .ci-card-cost {
    display: block;
  }

  .ci-card-cost.is-short {
    color: var(--color-danger, rgb(255 0 0));
  }

  /* Sterne = Kartenstufe. Stufe 1 zeigt keine (wie in der Vorlage). */
  .ci-card-stars {
    position: absolute;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    width: 21px;
    height: 48px;
    background-image: url("../img/celestial-infant/stars.png");
  }

  .ci-card-stars[data-level="1"] {
    display: none;
  }

  .ci-card-stars[data-level="2"] {
    background-position: 0% -100%;
  }

  .ci-card-stars[data-level="3"] {
    background-position: 0% -200%;
  }

  /* Slot-Positionen — die fünf der Auslage stehen im Raster, ... */
  .ci-slot-lib[data-ci-idx="0"] {
    inset-inline-start: 217px;
    inset-block-start: 78px;
  }

  .ci-slot-lib[data-ci-idx="1"] {
    inset-inline-start: 315px;
    inset-block-start: 78px;
  }

  .ci-slot-lib[data-ci-idx="2"] {
    inset-inline-start: 413px;
    inset-block-start: 78px;
  }

  .ci-slot-lib[data-ci-idx="3"] {
    inset-inline-start: 511px;
    inset-block-start: 78px;
  }

  .ci-slot-lib[data-ci-idx="4"] {
    inset-inline-start: 612px;
    inset-block-start: 78px;
  }

  /* ... die sechs am Spirit Branch NICHT: sie sitzen auf den Ästen des Hintergrundbilds.
     Diese Werte sind aus der Vorlage abgelesen und dürfen nicht „aufgeräumt" werden. */
  .ci-slot-equip[data-ci-idx="0"] {
    inset-inline-start: 259px;
    inset-block-start: 188px;
  }

  .ci-slot-equip[data-ci-idx="1"] {
    inset-inline-start: 267px;
    inset-block-start: 356px;
  }

  .ci-slot-equip[data-ci-idx="2"] {
    inset-inline-start: 468px;
    inset-block-start: 198px;
  }

  .ci-slot-equip[data-ci-idx="3"] {
    inset-inline-start: 572px;
    inset-block-start: 217px;
  }

  .ci-slot-equip[data-ci-idx="4"] {
    inset-inline-start: 415px;
    inset-block-start: 374px;
  }

  .ci-slot-equip[data-ci-idx="5"] {
    inset-inline-start: 351px;
    inset-block-start: 208px;
  }

  .ci-slot-inv { inset-block-start: 501px; }
  .ci-slot-inv[data-ci-idx="0"] { inset-inline-start: 144px; }
  .ci-slot-inv[data-ci-idx="1"] { inset-inline-start: 228px; }
  .ci-slot-inv[data-ci-idx="2"] { inset-inline-start: 312px; }
  .ci-slot-inv[data-ci-idx="3"] { inset-inline-start: 396px; }
  .ci-slot-inv[data-ci-idx="4"] { inset-inline-start: 480px; }
  .ci-slot-inv[data-ci-idx="5"] { inset-inline-start: 564px; }
  .ci-slot-inv[data-ci-idx="6"] { inset-inline-start: 648px; }
  .ci-slot-inv[data-ci-idx="7"] { inset-inline-start: 732px; }

  /* ── Labels ── */
  .ci-lbl {
    position: absolute;
    font-family: var(--ci-label);
  }

  .ci-lbl-tutoring {
    inset-block-start: 173px;
    inset-inline-start: 25px;
    width: 117px;
    font-size: 16px;
    color: var(--ci-dim);
  }

  .ci-todayscore {
    inset-block-start: 198px;
    inset-inline-start: 43px;
    width: 87px;
    font-family: var(--ci-ui);
    font-size: 14px;
  }

  .ci-lbl-bond {
    inset-block-start: 227px;
    inset-inline-start: 26px;
    width: 84px;
    font-size: 16px;
    color: var(--ci-dim);
  }

  /* Die Set-Liste wächst nach unten; aktive Sets heben sich grün ab (wie in der Vorlage). */
  .ci-sets {
    position: absolute;
    inset-block-start: 254px;
    inset-inline-start: 40px;
    width: 104px;
    height: 192px;
    overflow: hidden;
    font-family: var(--ci-ui);
    font-size: 14px;
    color: var(--ci-dim);
  }

  .ci-set.is-active {
    color: var(--ci-active);
  }

  .ci-potential {
    inset-block-start: 185px;
    inset-inline-start: 692px;
  }

  .ci-line {
    position: absolute;
    inset-inline-start: 707px;
    width: 111px;
    height: 2px;
    background-image: url("../img/celestial-infant/hline.png");
  }

  .ci-line1 { inset-block-start: 204px; }
  .ci-line2 { inset-block-start: 181px; }

  /* Rückgabe-Fläche: die Spielerfigur. Sie leuchtet nur, während eine Karte gezogen wird. */
  .ci-refund {
    inset-block-start: 208px;
    inset-inline-start: 641px;
    width: 223px;
    height: 258px;
    background-image: url("../img/celestial-infant/profile/player_female.png");
  }

  .ci-refund[data-sex="male"] {
    background-image: url("../img/celestial-infant/profile/player_male.png");
  }

  .ci.is-dragging .ci-refund.is-dropzone {
    background-image: url("../img/celestial-infant/profile/player_female_onhover.png");
  }

  .ci.is-dragging .ci-refund.is-dropzone[data-sex="male"] {
    background-image: url("../img/celestial-infant/profile/player_male_onhover.png");
  }

  .ci-lbl-refund,
  .ci-refundamount {
    inset-block-start: 347px;
    inset-inline-start: 714px;
    width: 102px;
    height: 42px;
  }

  .ci-refundamount { display: none; }
  .ci.is-dragging .ci-lbl-refund { display: none; }
  .ci.is-dragging .ci-refundamount { display: block; }

  .ci-poolxp {
    inset-block-start: 405px;
    inset-inline-start: 695px;
    font-size: 13px;
    color: var(--ci-gold);
  }

  /* Zehnstufiger Fortschrittsbalken als Sprite — eine Zeile je Ausbaustufe. */
  .ci-poollevel {
    position: absolute;
    inset-block-start: 421px;
    inset-inline-start: 727px;
    width: 76px;
    height: 12px;
    background-image: url("../img/celestial-infant/zenithpoolupgrade.png");
  }

  .ci-poollevel[data-level="1"] { background-position: 0% 0%; }
  .ci-poollevel[data-level="2"] { background-position: 0% -100%; }
  .ci-poollevel[data-level="3"] { background-position: 0% -200%; }
  .ci-poollevel[data-level="4"] { background-position: 0% -300%; }
  .ci-poollevel[data-level="5"] { background-position: 0% -400%; }
  .ci-poollevel[data-level="6"] { background-position: 0% -500%; }
  .ci-poollevel[data-level="7"] { background-position: 0% -600%; }
  .ci-poollevel[data-level="8"] { background-position: 0% -700%; }
  .ci-poollevel[data-level="9"] { background-position: 0% -800%; }
  .ci-poollevel[data-level="10"] { background-position: 0% -900%; }

  .ci-daynum {
    inset-block-start: 399px;
    inset-inline-start: 143px;
    width: 124px;
  }

  .ci-growthscore {
    inset-block-start: 436px;
    inset-inline-start: 146px;
    width: 107px;
  }

  .ci-mark {
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url("../img/celestial-infant/exclamation.png");
  }

  /* Das linke Zeichen ist ein Knopf (trägt die Rang-Schwellen) — Button-Optik zurücknehmen,
     Cursor als Hinweis, dass hier etwas zu holen ist. */
  .ci-mark1 {
    inset-block-start: 421px;
    inset-inline-start: 120px;
    border: 0;
    padding: 0;
    cursor: help;
    background-color: transparent;
  }

  .ci-mark2 {
    inset-block-start: 180px;
    inset-inline-start: 666px;
  }

  /* Der Client gibt `Lbl_Tips` KEINE Breite (x=156 y=472) — der Satz läuft einzeilig durch.
     Eine Breite hier erzwang einen Umbruch, den das Spiel nicht hat.
     Leicht unter dem Client-Wert (483 statt 472): sitzt sonst optisch minimal zu hoch. */
  .ci-hint {
    inset-block-start: 483px;
    inset-inline-start: 156px;
    font-family: var(--ci-ui);
    font-size: 12px;
    white-space: nowrap;
    color: var(--ci-hint);
  }

  /* ── Knöpfe (alle tragen ihre Grafik aus der Vorlage) ── */
  .ci-refresh,
  .ci-viewpool,
  .ci-hbutton,
  .ci-bighbutton,
  .ci-pool-close {
    position: absolute;
    border: 0;
    padding: 0;
    color: inherit;
    font-family: var(--ci-ui);
    cursor: pointer;
    background-color: transparent;
    background-size: 100% 100%;
  }

  .ci-refresh:disabled,
  .ci-viewpool:disabled,
  .ci-hbutton:disabled,
  .ci-bighbutton:disabled {
    color: rgb(119 119 119);
    cursor: default;
  }

  /* Runder Knopf: Beschriftung mittig — beide Achsen über Flex, nicht über abgezählte Offsets.
     (Asterelle setzte hier feste left/top-Werte; die saßen sichtbar außermittig.) */
  .ci-refresh {
    inset-block-start: 77px;
    inset-inline-start: 709px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 105px;
    height: 105px;
    padding-inline: 12px;
    background-image: url("../img/celestial-infant/buttons/refresh.png");
  }

  .ci-refresh:hover,
  .ci-refresh:focus-visible {
    background-image: url("../img/celestial-infant/buttons/refresh-hover.png");
  }

  .ci-refresh:disabled {
    background-image: url("../img/celestial-infant/buttons/refresh-disable.png");
  }

  .ci-refresh-label {
    font-size: 15px;
    line-height: 1.15;
    text-align: center;
  }

  .ci-refresh-cost {
    font-size: 13px;
    text-align: center;
  }

  /* Hochkant-Streifen: Flex zentriert die senkrechte Schrift auf BEIDEN Achsen. Zuvor stand hier
     `margin-inline: auto` — das kann bei `writing-mode: vertical-rl` nicht waagerecht zentrieren,
     weil die Inline-Achse dann die senkrechte ist. */
  .ci-viewpool {
    inset-block-start: 79px;
    inset-inline-start: 810px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 108px;
    background-image: url("../img/celestial-infant/buttons/vbutton.png");
  }

  .ci-viewpool:hover,
  .ci-viewpool:focus-visible {
    background-image: url("../img/celestial-infant/buttons/vbutton-hover.png");
  }

  /* Senkrechte Beschriftung — der Knopf ist ein hochkant stehender Streifen. */
  .ci-viewpool span {
    font-size: 14px;
    writing-mode: vertical-rl;
  }

  .ci-hbutton {
    background-image: url("../img/celestial-infant/buttons/hbutton.png");
  }

  .ci-hbutton:hover,
  .ci-hbutton:focus-visible {
    background-image: url("../img/celestial-infant/buttons/hbutton-hover.png");
  }

  .ci-hbutton:disabled {
    background-image: url("../img/celestial-infant/buttons/hbutton-disable.png");
  }

  .ci-btnpool {
    inset-block-start: 436px;
    inset-inline-start: 678px;
    width: 173px;
    height: 25px;
    font-size: 13px;
  }

  .ci-bighbutton {
    width: 140px;
    height: 76px;
    background-image: url("../img/celestial-infant/buttons/bighbutton.png");
  }

  .ci-bighbutton:hover,
  .ci-bighbutton:focus-visible {
    background-image: url("../img/celestial-infant/buttons/bighbutton-hover.png");
  }

  .ci-bighbutton:disabled {
    background-image: url("../img/celestial-infant/buttons/bighbutton-disable.png");
  }

  /* Die Beschriftung sitzt im unteren Drittel der Knopfgrafik. */
  .ci-bighbutton span {
    position: absolute;
    inset-block-start: 46px;
    inset-inline: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.1;
  }

  .ci-submit {
    inset-block-start: 438px;
    inset-inline-start: 7px;
  }

  .ci-reset {
    inset-block-start: 515px;
    inset-inline-start: 7px;
  }

  .ci-reset.is-hidden { display: none; }

  /* ── Karten-Übersicht (alle 29 auf einen Blick) ── */
  .ci-pool {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: var(--ci-w);
    height: var(--ci-h);
    background-image: url("../img/celestial-infant/background.png");
    transform: scale(var(--ci-scale));
    transform-origin: top left;
  }

  .ci-pool-close {
    inset-block-start: 43px;
    inset-inline-start: 811px;
    width: 30px;
    height: 30px;
    background-image: url("../img/celestial-infant/buttons/close.png");
  }

  .ci-pool-close:hover,
  .ci-pool-close:focus-visible {
    background-image: url("../img/celestial-infant/buttons/close-hover.png");
  }

  /* Acht Karten je Zeile, wie in der Vorlage — die 30 Zellen fassen die 29 Karten. */
  .ci-pool-grid {
    position: absolute;
    inset-block-start: 122px;
    inset-inline-start: 107px;
    display: grid;
    grid-template-columns: repeat(8, 87px);
    grid-auto-rows: 111px;
  }

  .ci-pool-cell {
    position: relative;
    width: 84px;
    height: 97px;
  }

  /* Das „?" unter „View Pool" — Fragezeichen-Grafik gab es im gesicherten Material nicht,
     darum ein Zeichen im Stil des Ausrufezeichens daneben (gleiche Größe, Gold). */
  .ci-help-btn {
    position: absolute;
    inset-block-start: 103px;
    inset-inline-start: 851px;
    width: 13px;
    height: 20px;
    border: 0;
    padding: 0;
    color: var(--ci-gold);
    font-family: var(--ci-ui);
    font-size: 17px;
    line-height: 1;
    cursor: help;
    background-color: transparent;
  }

  .ci-help-btn:hover,
  .ci-help-btn:focus-visible {
    color: var(--pw-q4);
  }

  /* Verweis auf das Beispielbild — sitzt in der Hinweiszeile, hebt sich als Link ab.
     Bewusst ein <button>: es öffnet eine Einblendung, es navigiert nicht. */
  .ci-endgame-link {
    border: 0;
    padding: 0;
    color: var(--ci-gold);
    font: inherit;
    text-decoration: underline dashed;
    text-underline-offset: 3px;
    cursor: pointer;
    background: none;
  }

  .ci-endgame-link:hover,
  .ci-endgame-link:focus-visible {
    color: var(--pw-q4);
  }

  /* ── Einblendungen über dem Fenster (Tipps, Beispielbild) ──
     Gleiche Fläche wie die Kartenübersicht: keine neue Seite, kein Modal. */
  .ci-panel {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: var(--ci-w);
    height: var(--ci-h);
    padding: 56px 48px 32px;
    overflow-y: auto;
    background-image: url("../img/celestial-infant/background.png");
    transform: scale(var(--ci-scale));
    transform-origin: top left;
  }

  .ci-panel-title {
    margin-block-end: var(--space-3);
    color: var(--ci-gold);
    font-family: var(--ci-ui);
    font-size: 20px;
  }

  .ci-panel-note {
    margin-block-start: var(--space-3);
    color: var(--ci-dim);
    font-family: var(--ci-ui);
    font-size: 13px;
    line-height: 1.5;
  }

  .ci-tips {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Jeder Tipp als abgesetzte Zeile mit Gold-Marke — neun Stück lesen sich sonst als Textblock. */
  .ci-tip {
    padding-inline-start: var(--space-3);
    border-inline-start: 2px solid var(--ci-gold);
    color: var(--pw-q4);
    font-family: var(--ci-ui);
    font-size: 14px;
    line-height: 1.45;
  }

  /* ── Die sechsteilige Einführung (Client `servant_ghelp1..6.xml`) ──
     Der Client legt eine Abdeckung über das Fenster und zeichnet die gerade erklärten Elemente
     DARÜBER neu. Wir duplizieren nichts: die Abdeckung liegt über allem, die erklärten Elemente
     werden per `.is-lit` darüber gehoben. Ergebnis ist dasselbe — alles gedimmt außer dem Thema. */
  .ci-cover {
    position: absolute;
    inset: 0;
    z-index: 50;
    background: rgb(6 10 20 / 72%);
  }

  /* Hervorgehoben = über der Abdeckung. Der Rand hebt zusätzlich ab, weil die Client-Grafik
     dafür einen eigenen Maskenausschnitt hat, den wir nicht nachbauen. */
  .ci-window .is-lit {
    z-index: 51;
  }

  /* Weiter-Fläche: deckt das ganze Fenster ab, wie `Btn_Next` im Client. */
  .ci-guide-next {
    position: absolute;
    inset: 0;
    z-index: 52;
    width: 100%;
    height: 100%;
    border: 0;
    cursor: pointer;
    background: none;
  }

  /* Textebene darüber — fängt keine Klicks, sonst käme man auf Textstellen nicht weiter. */
  .ci-guide-layer {
    position: absolute;
    inset: 0;
    z-index: 53;
    pointer-events: none;
  }

  /* Halbtransparente Textbox (im Client `TipsBg`). */
  .ci-guide-box {
    position: absolute;
    inset-block-start: var(--y);
    inset-inline-start: var(--x);
    width: var(--w);
    height: var(--h);
    background: rgb(0 0 0 / 55%);
    border-radius: 3px;
  }

  .ci-guide-text {
    position: absolute;
    inset-block-start: var(--y);
    inset-inline-start: var(--x);
    width: var(--w);
    font-family: var(--ci-ui);
    font-size: 12px;
    line-height: 1.4;
    color: rgb(244 194 114);
  }

  .ci-guide-text--mid {
    text-align: center;
    font-size: 14px;
  }

  .ci-guide-close {
    position: absolute;
    inset-block-start: 43px;
    inset-inline-start: 811px;
    z-index: 54;
    width: 30px;
    height: 30px;
    border: 0;
    padding: 0;
    cursor: pointer;
    background-color: transparent;
    background-image: url("../img/celestial-infant/buttons/close.png");
    background-size: 100% 100%;
  }

  .ci-guide-close:hover,
  .ci-guide-close:focus-visible {
    background-image: url("../img/celestial-infant/buttons/close-hover.png");
  }

  /* Schrittzähler — kein Client-Element, aber ohne ihn weiß niemand, wie viel noch kommt. */
  .ci-guide-step {
    position: absolute;
    inset-block-end: 18px;
    inset-inline-end: 28px;
    z-index: 54;
    margin: 0;
    color: var(--ci-dim);
    font-family: var(--ci-ui);
    font-size: 13px;
  }

  /* ── Beispiel-Endstand ──
     Deckungsgleich ÜBER dem Fenster, nicht als Bild in einem Rahmen: kein Padding, kein eigener
     Hintergrund. Der Screenshot ist 893×590, sein Inhalt aber nur 879×586 (rechts 14 px, unten
     4 px schwarz — nachgemessen). Darum so skaliert, dass der INHALT die Fensterbreite füllt
     (902 ÷ 879 × 893 ≈ 916 px); der schwarze Rest fällt aus der Fläche und wird abgeschnitten. */
  /* Das Panel passt sich dem Bild an (nicht umgekehrt) — sonst wird das Bild ins feste 902×625
     gezwängt und dabei beschnitten, gestreckt oder skaliert. Es ist ein Screenshot UNSERER Seite
     und soll 1:1 über dem Fenster liegen, Pixel für Pixel. */
  .ci-endgame {
    inline-size: max-content;
    block-size: max-content;
    padding: 0;
    overflow: visible;
    background: none;
  }

  /* Echte Pixelgröße, KEINE Transformation — weder Skalierung noch object-fit. Genau der Screenshot. */
  .ci-endgame-img {
    display: block;
    width: auto;
    height: auto;
  }

  .ci-endgame .ci-pool-close {
    z-index: 1;
  }

  /* ── Tooltip-Zeilen ──
     Die Tafel selbst (`.evpw-tooltip--ci`) steht in evpw-ui.css bei den anderen Tooltip-Varianten
     — sie MUSS dort stehen, weil `@layer evpw` nach `components` kommt und eine Variante von hier
     aus die Basis gar nicht überschreiben könnte. Hier nur die Zeilen im Inneren.
     Farbe setzt ausschließlich die PW-Palette (.gp-pw-*, via applyPwTone). */
  /* `clientText()` erzeugt diese Zeile für BEIDE Verwendungen — Tooltips und die Einführung.
     Umbruchverhalten ist aber gegensätzlich, darum am Kontext festgemacht statt an der Zeile:

     - Im TOOLTIP bleibt jede Zeile ungebrochen (die Tafel wächst mit, s. `.evpw-tooltip--ci`).
       Die Zenith-Pool-Liste vergleicht zehn Stufen untereinander — das liest sich nur spaltig.
     - In der EINFÜHRUNG wird umgebrochen: dort geben die Client-Labels feste Breiten vor
       (`Width="315"` u. ä.), innerhalb derer der Text fließen soll. */
  .evpw-tooltip--ci .ci-tip-row {
    white-space: nowrap;
  }

  .ci-guide-text .ci-tip-row {
    white-space: normal;
  }

  /* Zwei Einrücktiefen: Set-Stufe, darunter wen sie begünstigt. */
  .ci-tip-row--in1 {
    padding-inline-start: 12px;
  }

  .ci-tip-row--in2 {
    padding-inline-start: 26px;
    font-size: 12px;
  }

  .ci-note {
    max-width: 60ch;
    margin-block-start: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  /* ── Skalierung ──
     Feste Stufen statt clamp(): das Fenster darf nur als Ganzes kleiner werden, und unter etwa
     der Hälfte ist die Kartenschrift nicht mehr lesbar — dann ist Zoomen ehrlicher als raten. */
  @media (width < 1000px) {
    .ci { --ci-scale: 0.8; }
  }

  @media (width < 800px) {
    .ci { --ci-scale: 0.65; }
  }

  @media (width < 640px) {
    .ci { --ci-scale: 0.5; }
  }
}