/* ════════════════════════════════════════════════════════════════════════
   components-genie-simulator.css — Genie Simulator (Slug `genie-simulator`).

   Drei Spalten: Genie-Auswahl · Genie-Fenster (Nachbau von `character_elf.xml`) · Skills.
   Alle Farben/Abstände aus tokens.css — keine Magic-Values, kein !important (Layer regeln das).
   Der Such-Baustein bringt seine eigenen Klassen mit (`evpw-input`, `evpw-menu-item`); hier
   steht nur, was der Simulator dazu braucht.
   ════════════════════════════════════════════════════════════════════════ */

@layer components {
  .gnsim {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-block: var(--sp-5);
  }

  .gnsim-worldbar {
    display: flex;
    gap: var(--sp-2);
  }

  .gnsim-world.is-active {
    border-color: var(--accent);
    color: var(--accent);
  }

  /* Inhaltsbasierter Breakpoint: drei Spalten brauchen Breite. Darunter untereinander —
     die Seite bleibt bedienbar, nur eben gestapelt. */
  .gnsim-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
  }

  @media (width >= 60rem) {
    .gnsim-grid {
      grid-template-columns: 1fr 1.2fr 1fr;
      align-items: start;
    }
  }

  .gnsim-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
  }

  .gnsim-col-head {
    margin: 0;
    font-size: var(--fs-lg);
    color: var(--accent);
  }

  .gnsim-sub {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-sm);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* ── Genie-Auswahl ── */
  .gnsim-picker {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  .gnsim-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 28rem;
    overflow-y: auto;
  }

  .gnsim-item-icon {
    flex: none;
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
  }

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

  .gnsim-status {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-3);
  }

  /* ── Das Genie-Fenster ── */
  .gnsim-elf {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-3);
    align-items: center;
  }

  .gnsim-elf-icon {
    width: 49px;
    height: 49px;
    image-rendering: pixelated;
  }

  .gnsim-elf-id {
    display: flex;
    flex-direction: column;
  }

  .gnsim-elf-name {
    font-weight: 600;
    color: var(--accent);
  }

  .gnsim-elf-lvl {
    font-size: var(--fs-sm);
    color: var(--text-3);
  }

  /* Werte-Block (Energy/Recovery/Stamina) — Label links, Wert rechts, gemeinsames Raster,
     damit die Zahlen fluchten (kein margin-left:auto je Zeile). */
  .gnsim-vals {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr;
    gap: 2px var(--sp-3);
    margin: 0;
    font-size: var(--fs-sm);
  }

  .gnsim-vals dt {
    color: var(--text-3);
  }

  .gnsim-vals dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .gnsim-slider {
    display: grid;
    grid-template-columns: 7rem 1fr 3rem;
    gap: var(--sp-2);
    align-items: center;
    font-size: var(--fs-sm);
  }

  .gnsim-slider output {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .gnsim-points {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: 0;
    font-size: var(--fs-sm);
  }

  .gnsim-points-note {
    color: var(--text-3);
  }

  /* Attribute im 2×2-Raster wie im Client-Fenster. */
  .gnsim-attrs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }

  .gnsim-attr {
    display: grid;
    grid-template-columns: 1fr auto 2.5rem auto;
    gap: var(--sp-1);
    align-items: center;
    font-size: var(--fs-sm);
  }

  .gnsim-attr-label {
    color: var(--text-3);
  }

  .gnsim-attr-val {
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .gnsim-step {
    min-width: 1.75rem;
    padding-inline: var(--sp-1);
    line-height: 1;
  }

  .gnsim-affs {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .gnsim-aff {
    display: grid;
    grid-template-columns: 4rem 1fr 1.5rem;
    gap: var(--sp-2);
    align-items: center;
    font-size: var(--fs-sm);
  }

  .gnsim-aff-label {
    color: var(--text-3);
  }

  .gnsim-aff output {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* Die vier Ausrüstungs-Slots (Jade · Charms · Mirror · Orb). Ein leerer Slot ist gestrichelt,
     ein belegter durchgezogen — man sieht auf einen Blick, was liegt. */
  .gnsim-slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }

  .gnsim-slot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card-2);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .gnsim-slot:hover,
  .gnsim-slot:focus-visible {
    border-color: var(--accent);
  }

  .gnsim-slot.is-open {
    border-style: solid;
    border-color: var(--accent);
  }

  .gnsim-slot-label {
    font-size: var(--fs-xs);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .gnsim-slot-item {
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
  }

  .gnsim-slot-item.is-empty {
    color: var(--text-3);
    font-style: italic;
  }

  .gnsim-equip-picker {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm);
  }

  .gnsim-equip-picker[hidden] {
    display: none;
  }

  .gnsim-clear {
    align-self: flex-start;
  }

  .gnsim-soon {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-3);
  }

  /* ── Skills ── */
  .gnsim-check {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    font-size: var(--fs-sm);
  }

  .gnsim-count {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-3);
  }

  .gnsim-skills {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-height: 40rem;
    overflow-y: auto;
  }

  .gnsim-skill {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card-2);
  }

  /* Erreichbar = Gold am linken Rand. Die einzige Farbe, die hier Bedeutung trägt. */
  .gnsim-skill.is-open {
    border-left: 3px solid var(--accent);
  }

  .gnsim-skill-name {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: 600;
  }

  .gnsim-skill-meta,
  .gnsim-skill-next,
  .gnsim-skill-warn {
    margin: 2px 0 0;
    font-size: var(--fs-sm);
    color: var(--text-3);
  }

  .gnsim-skill-warn {
    color: var(--danger);
  }

  .gnsim-empty {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-3);
  }
}