/* ui-inventory.css — Werkstoff-Raster, Ausrüstung, Seltenheit, Geldbeutel.
 * Teil der Oberflächen-Stile (bis 24.10.2026 alles in ui.css). Reihenfolge der
 * Einbindung in index.html zählt: nach ui.css, vor ui-windows.css. */
/* ── Werkstoff-Raster (Inventar, Evitania-Stil)── */
.mat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
    gap: 10px; margin-top: 12px;
}
.mat-tile {
    position: relative; aspect-ratio: 1 / 1;
    background: #2a2440; border: 3px solid var(--ink); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 3px 0 #3a3054;
}
.mat-ico {
    width: 74%; height: 74%; object-fit: contain;
    image-rendering: pixelated;
}
.mat-glyph { font-size: 30px; line-height: 1; color: var(--gold); }
/* Werkstoff-Bild im Fließtext (Auftrag, Auftrags-Leiste) — so groß wie die Schrift */
.mat-inline { width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: -0.3em; image-rendering: pixelated; }
.mat-inline-glyph { display: inline-block; width: 1.35em; text-align: center; }
/* Anzahl auf der Kachel (28.10.2026): unten mittig unter dem Bild, kein Schild —
 * eine kräftige dunkle Kontur rundum (8 Richtungen) trägt die Zahl auf jedem Grund.
 * Größe wächst mit der Kachel (cqw), „21,3 Mio" passt auch in die kleinste. */
.mat-tile { container-type: inline-size; }
.mat-tile .mat-ico { width: 64%; height: 64%; transform: translateY(-10%); }
.mat-count {
    position: absolute; left: 0; right: 0; bottom: 4%;
    text-align: center; line-height: 1;
    font-size: clamp(10px, 19cqw, 15px); font-weight: 800;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
    color: #f4fbff;
    text-shadow:
        -1px -1px 0 #03080d,  0 -1px 0 #03080d,  1px -1px 0 #03080d,
        -1px  0   0 #03080d,                     1px  0   0 #03080d,
        -1px  1px 0 #03080d,  0  1px 0 #03080d,  1px  1px 0 #03080d,
         0    2px 3px rgba(0, 0, 0, .7);
    white-space: nowrap;   /* „21,3 Mio" nie umbrechen (Fund Jens 18.10.2026) */
    pointer-events: none;
}
.mat-tile { cursor: pointer; transition: transform .06s, background .1s; }
.mat-tile:hover { background: #362e52; transform: translateY(-2px); }
/* Alter Duplikat-Stapel (Vorlage nicht mehr getragen oder schon Rot): blass. */
.mat-tile.old { opacity: .45; }

/* Werkstoff-Info-Fenster (Klick auf eine Kachel) */
.mat-pop-back {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(8, 6, 16, .55);
    display: flex; align-items: center; justify-content: center;
}
.mat-pop {
    position: relative; width: min(420px, 88vw);
    background: #221c38; border: 4px solid var(--ink); border-radius: 16px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .6), inset 0 4px 0 #3a3054;
    padding: 20px;
}
.mat-pop-x {
    position: absolute; top: 10px; right: 12px;
    background: none; border: none; color: var(--dim);
    font-size: 20px; cursor: pointer;
}
.mat-pop-x:hover { color: #fff; }
.mat-pop-head { display: flex; gap: 16px; align-items: flex-start; }
.mat-pop-ico {
    flex: 0 0 64px; width: 64px; height: 64px;
    background: #2a2440; border: 3px solid var(--ink); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.mat-pop-ico img { width: 74%; height: 74%; object-fit: contain; image-rendering: pixelated; }
.mat-pop-body { flex: 1; }
.mat-pop-name { font-size: 21px; color: var(--gold); letter-spacing: 1px; }
.mat-pop-have { font-size: 14px; color: var(--dim); margin: 2px 0 10px; }
.mat-pop-desc { font-size: 16px; line-height: 1.45; }
.mat-pop-val { font-size: 14px; color: var(--dim); margin-top: 12px; }

/* Ausrüstungs-Paperdoll (Inventar) */
.slot-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px; margin-top: 12px;
}
/* `.slot-ico` gibt es ZWEIMAL: hier 26 px fürs Ausrüstungsblatt und weiter
   unten 96 px fürs Drohnen-Fenster. Bei gleicher Spezifität gewinnt die
   spätere — sobald die `art/fx/gear_*.png` einmal existieren, würden die
   Ausrüstungs-Symbole also mit 96 px in eine 54-px-Kachel rendern und das
   Raster erneut aufreissen. Diese Regel ist spezifischer und beendet das,
   ohne dass am Drohnen-Fenster etwas geändert werden muss. */
.slot-grid .slot-ico { width: 64px; height: 64px; margin: 0; }
.slot-tile {
    background: #2a2440; border: 3px solid var(--ink); border-radius: 10px;
    padding: 8px 10px; min-height: 54px;
    display: flex; flex-direction: column; justify-content: center;
    box-shadow: inset 0 3px 0 #3a3054;
}
.slot-tile.filled { border-color: var(--gold); cursor: pointer; }
.slot-tile.filled:hover { background: #362e52; }
/* Fehler melden & Support (windows/report.js, 23.10.2026) */
.report-kinds { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.report-text { min-height: 9em; resize: vertical; font-size: 16px; letter-spacing: 0; line-height: 1.45; margin-top: 10px; }
.report-count { text-align: right; margin-top: -6px; }
.report-reply { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; cursor: pointer; }
.report-reply input { width: 20px; height: 20px; accent-color: var(--gold); }
.report-info { margin: 10px 0; }
.report-info summary { cursor: pointer; color: var(--gold); }
/* Support-Tickets (23.10.2026): Liste, Verlauf, roter Punkt bei neuer Antwort */
.tk-dot { position: relative; }
.tk-dot::after { content: ''; position: absolute; top: 7px; right: 9px; width: 12px; height: 12px; border-radius: 50%;
    background: #ff4a3a; box-shadow: 0 0 6px #ff4a3a; pointer-events: none; }
a.pbtn { text-decoration: none; box-sizing: border-box; }
.tk-head { color: var(--w-gold, var(--gold)); letter-spacing: 2px; margin-bottom: 8px; }
.tk-list { display: flex; flex-direction: column; gap: 8px; }
.tk-row { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; font: inherit; cursor: pointer;
    background: var(--w-tile, #2a1d0f); color: var(--w-text, var(--ink)); border: 1px solid var(--w-line2, #4a4266); border-radius: 10px;
    padding: 10px 14px; position: relative; }
.tk-row:hover { background: rgba(57, 215, 255, .12); border-color: var(--w-line, #4a4266); }
.tk-row.new { border-color: #ff4a3a; }
.tk-row.new::after { content: ''; position: absolute; top: 9px; right: 10px; width: 11px; height: 11px; border-radius: 50%;
    background: #ff4a3a; box-shadow: 0 0 6px #ff4a3a; }
.tk-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding-right: 18px; }
.tk-top b { color: var(--w-gold, var(--gold)); }
.tk-kind { opacity: .8; }
.tk-st { font-size: .85em; padding: 0 8px; border-radius: 10px; background: rgba(255, 204, 85, .14); color: var(--w-gold, var(--gold)); }
.tk-st.st-in_arbeit { background: rgba(57, 215, 255, .14); color: var(--w-acc, #7fc4ff); }
.tk-st.st-erledigt { background: rgba(124, 232, 124, .14); color: #7ce87c; }
.tk-when { margin-left: auto; opacity: .6; font-size: .85em; }
.tk-prev { opacity: .75; font-size: .9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; }
.tk-dhead { margin: 4px 0 12px; font-size: 1.1em; }
.tk-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.tk-msg { padding: 10px 14px; border: 1px solid var(--w-line2, #4a4266); border-radius: 12px; background: var(--w-tile, #221c38); max-width: 92%; }
.tk-msg.admin { background: rgba(124, 232, 124, .08); border-color: rgba(124, 232, 124, .35); align-self: flex-start; }
.tk-msg.me { align-self: flex-end; }
.tk-meta { display: block; font-size: .8em; opacity: .65; margin-bottom: 4px; }
.tk-text { display: block; white-space: pre-wrap; word-wrap: break-word; letter-spacing: 0; line-height: 1.45; }
/* Beim Ziehen eines Stücks: der Platz, auf den es kommt (23.10.2026) */
.slot-tile.drop-ok { outline: 3px solid #7ce87c; outline-offset: 2px; box-shadow: 0 0 14px rgba(124,232,124,.55); }
.slot-label { font-size: 11px; color: var(--dim); letter-spacing: 1.5px; text-transform: uppercase; }
.slot-ico { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.slot-empty { font-size: 15px; color: var(--dim); margin-top: 3px; }
/* Ausrüstungs-Kachel, Variante B (Jens 02.11.2026): Platz oben, großes Bild in der Mitte mit
   Stufe und Krone als Abzeichen, Name darunter. Spaltenzahl folgt der Breite (.slot-grid),
   die Schrift der Kachelbreite (cqw) — gemessen 280–1000 px ohne Überstand. */
.slot-grid .slot-tile { container-type: inline-size; align-items: center; text-align: center; padding: 8px 6px 9px;
    justify-content: flex-start; gap: 4px; }
.slot-grid .slot-label { font-size: clamp(9px, 7.6cqw, 11px); letter-spacing: 1px; }
.slot-body { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 2px; max-width: 100%; }
.slot-pic { position: relative; display: block; width: 64px; height: 64px; }
.slot-pic .boss-crown { position: absolute; top: -2px; left: -8px; height: 15px; margin: 0; }
.slot-lvl { position: absolute; right: -10px; bottom: -2px; font-size: 11px; font-weight: 700; color: #fff; line-height: 15px;
    background: rgba(10, 14, 26, .88); border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px; padding: 0 4px; }
.slot-item { font-size: clamp(10.5px, 11.2cqw, 14px); font-weight: 700; color: #fff; line-height: 1.15; min-height: 2.3em;
    display: flex; align-items: center; justify-content: center; max-width: 100%; }

/* Kompakte Ausrüstungs-Kacheln (Tasche) — Details per Klick */
.gear-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
    gap: 10px; margin-top: 12px;
}
.gear-tile {
    position: relative; aspect-ratio: 1 / 1;
    background: #2a2440; border: 3px solid var(--ink); border-radius: 10px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: inset 0 3px 0 #3a3054; transition: transform .06s, background .1s;
}
.gear-tile:hover { background: #362e52; transform: translateY(-2px); }
/* Seltenheit — DIESELBEN sechs Farben wie bei den Drohnen-Teilen (RARITY in
   js/config/companions.js). Eine Farbsprache im ganzen Spiel: Was im Hangar
   Blau heisst, heisst im Inventar auch Blau. Rahmen UND Punkte in derselben
   Farbe, damit die Kachel schon aus der Entfernung spricht.
   Das `!important` ist nötig, weil die Fensterregel in windows.css
   (#winbox .gear-tile) sonst allen Kacheln denselben Rand gibt. */
.gear-tile.r0 { border-color: #c9d2dc !important; }
.gear-tile.r1 { border-color: #7ce87c !important; }
.gear-tile.r2 { border-color: #4de2ff !important; }
.gear-tile.r3 { border-color: #c77dff !important; }
.gear-tile.r4 { border-color: #ffcc55 !important; }
.gear-tile.r5 { border-color: #ff5b5b !important; }
.gear-tile.r0 .gear-dots i { background: #c9d2dc; }
.gear-tile.r1 .gear-dots i { background: #7ce87c; }
.gear-tile.r2 .gear-dots i { background: #4de2ff; }
.gear-tile.r3 .gear-dots i { background: #c77dff; }
.gear-tile.r4 .gear-dots i { background: #ffcc55; }
.gear-tile.r5 .gear-dots i { background: #ff5b5b; }
/* Getragen schlägt die Gütefarbe — steht deshalb NACH den q-Regeln und
   ebenfalls mit !important. Sonst gewinnt im Lager die Gütefarbe, und man
   sieht nicht mehr, was man anhat. */
.gear-tile.worn { border-color: var(--gold) !important; }
/* Dieselben Seltenheitsfarben an den angelegten Plätzen links. */
.slot-tile.r0 { border-color: #c9d2dc !important; }
.slot-tile.r1 { border-color: #7ce87c !important; }
.slot-tile.r2 { border-color: #4de2ff !important; }
.slot-tile.r3 { border-color: #c77dff !important; }
.slot-tile.r4 { border-color: #ffcc55 !important; }
.slot-tile.r5 { border-color: #ff5b5b !important; }
/* Besser als das Getragene: DERSELBE goldene Leuchtrahmen wie beim
   Zusammenführen im Hangar (.pet.fusable). Eine Sprache für „hier lohnt sich
   ein Blick" — wer den Pfeil im Hangar einmal verstanden hat, versteht ihn hier
   sofort wieder. Vorher war es ein grüner Rand, den man im Inventar gar nicht
   sah: die Fensterregel in windows.css (#winbox .gear-tile) überschreibt die
   Rahmenfarbe aller Kacheln. Deshalb hier `!important`, genau wie bei
   .pet.fusable. */
.gear-tile.better {
    border-color: #ffd75e !important;
    animation: fuseGlow 1.2s ease-in-out infinite;
}
/* Der zweite, ruhigere Pfeil: „auf gleicher Stufe besser". Cyan statt Gold und
   OHNE Pulsieren — er ist ein Hinweis, keine Aufforderung. Gold heisst „jetzt
   anlegen", Cyan heisst „das lohnt sich hochzuziehen". */
.gear-tile em.upmark.later {
    color: #7ee6ff;
    text-shadow: 0 0 8px rgba(80,210,255,.8), 1px 1px 0 #000;
    animation: none;
    opacity: .9;
}
/* Pfeil oben LINKS — oben rechts sitzen schon die Punkte für die Zusatzwerte. */
.gear-tile em.upmark {
    position: absolute; top: 3px; left: 6px; font-style: normal;
    font-size: 16px; font-weight: 700; color: #ffd75e;
    text-shadow: 0 0 8px rgba(255,200,60,.85), 1px 1px 0 #000;
    animation: fusePulse 1.4s ease-in-out infinite;
}
/* Schloss unten rechts: gesperrtes Stück (nie zerlegen/stapeln). */
.gear-tile em.lockmark {
    position: absolute; bottom: 14px; right: 4px; font-style: normal;
    font-size: 12px; line-height: 1; filter: drop-shadow(1px 1px 0 #000);
}
.gear-ico { width: 66%; height: 66%; object-fit: contain; image-rendering: pixelated; }
.gear-glyph { font-size: 26px; color: var(--dim); }
.gear-dots { position: absolute; top: 5px; right: 5px; display: flex; gap: 2px; }
.gear-dots i { width: 5px; height: 5px; background: var(--gold); border-radius: 50%; display: block; }
.gear-slot { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center;
             font-size: 10px; color: var(--dim); letter-spacing: .5px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }
.mat-pop-actions { display: flex; gap: 8px; margin-top: 16px; }

/* Geldbeutel oben rechts (Credits) */
#wallet {
    position: fixed; top: 12px; right: 16px; z-index: 9;
    display: flex; align-items: center; gap: 14px;
    background: rgba(30, 24, 48, .82); border: 3px solid var(--ink); border-radius: 12px;
    padding: 6px 14px 6px 10px; box-shadow: inset 0 3px 0 #3a3054;
}
.wal { display: flex; align-items: center; gap: 8px; font-size: 19px; }
.wal-ico { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.wal b { color: var(--gold); letter-spacing: 1px; }
.wal.exos b { color: #7fe9ff; }
/* Codeschlüssel: zugleich Knopf zu den Tagesaufgaben; roter Punkt = Aufgabe abholbereit (23.10.2026) */
.wal.keys { position: relative; cursor: pointer; }
.wal.keys.ready::after { content: ''; position: absolute; top: -4px; right: -7px; width: 10px; height: 10px;
    border-radius: 50%; background: #ff4a3a; box-shadow: 0 0 6px #ff4a3a; }
.wal-gem { font-style: normal; font-size: 20px; color: #7fe9ff; text-shadow: 0 0 8px #37c6e8, 0 0 2px #fff; line-height: 1; }
.skin span.exos { color: #7fe9ff; }
@media (max-width: 760px) { #wallet { top: 8px; right: 10px; gap: 10px; padding: 4px 10px 4px 8px; } .wal { font-size: 16px; } }


/* Knopf „Seltenheit ↑" unten auf einer Drohnen- oder Werkzeug-Karte im Hangar (hangar.js).
   margin-top:auto schiebt ihn an den unteren Kartenrand — sonst stehen die Knöpfe wie eine
   Treppe, weil die Texte unterschiedlich lang umbrechen. Zwei Zeilen statt einer langen:
   der Text lief sonst rechts aus dem Rahmen (Fund Jens 09.08.2026). */
.merge-btn { margin-top: auto; width: 100%; white-space: normal; line-height: 1.2; padding: 6px 8px; font-size: 13px; }
.merge-sub { font-size: 11px; opacity: .85; font-weight: 400; }

/* Bosskisten-Stapel nach Güte (02.11.2026): eine Zeile je Stapel, Farbe = Güte (--cc).
   Rahmen ringsum statt farbigem Streifen links (Wunsch Jens: keine Akzentstreifen). */
.chest-stacks { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.chest-stack {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 6px 10px; border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--cc) 55%, transparent);
    background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--cc) 22%, transparent), transparent 60%), rgba(0, 0, 0, .25);
}
.chest-stack-pic { width: 44px; height: 44px; display: grid; place-items: center; }
.chest-stack-ico { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated;
    filter: drop-shadow(0 0 6px var(--cc)); }
.chest-stack-name { color: var(--cc); font-weight: 700; letter-spacing: .5px; line-height: 1.2; }
.chest-stack-n { font-size: .85em; opacity: .85; font-variant-numeric: tabular-nums; }
.chest-stack .pbtn { margin: 0; width: auto; padding: 6px 14px; font-size: 14px; }
@media (max-width: 420px) {
    .chest-stack { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding: 5px 8px; }
    .chest-stack-pic, .chest-stack-ico { width: 34px; height: 34px; }
    .chest-stack .pbtn { padding: 5px 10px; font-size: 12px; }
}

/* Pfeile auf jeder Kachel (02.11.2026): grün = besser, rot = schlechter, ruhig ohne
   Pulsieren. Gold pulsierend bleibt dem besten Stück je Platz vorbehalten. */
.gear-tile em.upmark.up { color: #6ee98a; text-shadow: 0 0 6px rgba(80,230,120,.6), 1px 1px 0 #000; animation: none; }
.gear-tile em.upmark.down { color: #ff6b6b; text-shadow: 1px 1px 0 #000; animation: none; opacity: .85; }
/* Kopf der Kiste: Knopfgruppe rechts; fehlt der Platz, rutscht sie als Ganzes darunter. */
.card-head.bag-head { flex-wrap: wrap; }
.bag-head-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; justify-content: flex-end; max-width: 100%; }
/* Kistenstücke tragen oben links die Krone: der Pfeil rückt darunter. */
.gear-tile.boss em.upmark { top: 22px; }