/* /css/designer.css */

/* Stile, die ausschließlich für den Aquarium-Designer verwendet werden. */

/* --- Allgemeines Layout für Vollbild-Ansicht (FIX v89 & v93) --- */
#aquarium-designer-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* KORREKTUR v93: Ersetzt height: 100%, um Flexbox-Layout bei Direktaufruf zu fixen */
    width: 100%;
    position: relative;
    background-color: #0f172a;
}

#pixi-container {
    flex: 1 1 0%; /* WICHTIG: Erlaubt dem Container zu wachsen */
    position: relative;
    overflow: hidden;
    min-height: 0; /* Verhindert Überlauf in Flex-Containern */
}

/* --- Spiel-Logo --- */
#aquarium-designer-logo {
    position: absolute;
    top: 1rem; /* 16px */
    left: 1rem; /* 16px */
    z-index: 20;
    width: 120px;
    height: auto;
    border-radius: 0.75rem; /* 12px */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    animation: glowing-sky 2s infinite;
    transition: transform 0.3s ease;
}

#aquarium-designer-logo:hover {
    transform: scale(1.05);
}

@media (min-width: 640px) {
    #aquarium-designer-logo {
        width: 150px;
    }
}


/* --- Aktions-Buttons unten rechts (FIX v89) --- */
#action-buttons {
    position: absolute;
    bottom: 1.25rem; /* 20px */
    right: 1.25rem; /* 20px */
    z-index: 20;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 1rem;
}

#action-buttons button {
    width: 64px;
    height: 64px;
    border-radius: 9999px; /* circular */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease;
    cursor: pointer;
}

#action-buttons button:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
}

#action-buttons button .material-symbols-outlined {
    font-size: 36px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#inventory-btn { background: linear-gradient(to bottom right, #fb923c, #f97316); box-shadow: 0 0 12px 2px rgba(251, 146, 60, 0.4); }
#inventory-btn:hover { box-shadow: 0 0 20px 6px rgba(251, 146, 60, 0.5); }
#settings-btn { background: linear-gradient(to bottom right, #60a5fa, #3b82f6); box-shadow: 0 0 12px 2px rgba(96, 165, 250, 0.4); }
#settings-btn:hover { box-shadow: 0 0 20px 6px rgba(96, 165, 250, 0.5); }
#statistics-btn { background: linear-gradient(to bottom right, #4ade80, #22c55e); box-shadow: 0 0 12px 2px rgba(74, 222, 128, 0.4); }
#statistics-btn:hover { box-shadow: 0 0 20px 6px rgba(74, 222, 128, 0.5); }
#shop-btn { background: linear-gradient(to bottom right, #facc15, #eab308); box-shadow: 0 0 12px 2px rgba(250, 204, 21, 0.4); }
#shop-btn:hover { box-shadow: 0 0 20px 6px rgba(250, 204, 21, 0.5); }

/* --- NEU v102: Social-Button Stile (Anforderung 4) --- */
#social-btn { background: linear-gradient(to bottom right, #a78bfa, #7c3aed); box-shadow: 0 0 12px 2px rgba(167, 139, 250, 0.4); }
#social-btn:hover { box-shadow: 0 0 20px 6px rgba(167, 139, 250, 0.5); }

/* --- NEU v102: Visitor-Mode Exit Button Stile (Anforderung 3) --- */
/* (Wird von #visitor-exit-button verwendet) */
.btn-glow-red { background: linear-gradient(to bottom right, #f87171, #dc2626); box-shadow: 0 0 12px 2px rgba(248, 113, 113, 0.4); }
.btn-glow-red:hover { box-shadow: 0 0 20px 6px rgba(248, 113, 113, 0.5); }


/* --- NEU v102: Visitor-Mode UI-Umschaltung (Anforderung 3) --- */
/* Wenn der Besuchsmodus aktiv ist: */

/* 1. Verstecke die Standard-UI */
.visitor-mode-active #action-buttons,
.visitor-mode-active #coin-display {
    display: none !important;
}

/* 2. Zeige die Besuchs-UI */
.visitor-mode-active #visitor-ui-container {
    display: block !important;
}

/* (Die .hidden-Klasse auf #visitor-ui-container wird beim Starten des Modus entfernt) */


/* --- NEU v93: Backdrop für Modals (FIX für Bug 4) --- */
.designer-bubble-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.7); /* slate-900 mit Transparenz */
    backdrop-filter: blur(4px);
    z-index: 29;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* FIX v93: Lässt Klicks durch, wenn unsichtbar */
}
.designer-bubble-backdrop.visible {
    opacity: 1;
    pointer-events: auto; /* FIX v93: Fängt Klicks ab, wenn sichtbar */
}

/* --- Große Speech-Bubbles für Inventar, Shop etc. (Optimierung v93) --- */
.designer-speech-bubble {
    /* OPTIMIERUNG v93: Ersetzt "inset: 1rem" durch fixe Zentrierung */
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90vw; /* Maximalbreite */
    height: 90vh; /* Maximalhöhe */
    max-width: 1024px; /* Maximale Desktop-Breite */
    max-height: 768px; /* Maximale Desktop-Höhe */
    
    z-index: 30;
    background-color: rgba(30, 41, 59, 0.95); /* slate-800 mit hoher Deckkraft */
    backdrop-filter: blur(8px);
    border: 2px solid #475569; /* slate-600 */
    border-radius: 1.5rem; /* 24px */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    opacity: 0;
    
    /* OPTIMIERUNG v93: Transform kombiniert Zentrierung und Skalierung */
    transform: translate(-50%, -50%) scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.designer-speech-bubble.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

/* NEU v99: Kleinere Variante der Bubble für das "Quick Place"-Fenster (Anforderung 3) */
.designer-speech-bubble.designer-bubble-small {
    height: 70vh; /* Angepasste Höhe */
    max-height: 600px; /* Kleinere maximale Höhe */
    max-width: 900px; /* Etwas schmaler als das Hauptfenster */
}

.designer-bubble-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #475569; /* slate-600 */
    flex-shrink: 0; /* Verhindert, dass der Header schrumpft */
}

.designer-bubble-header h2 {
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    color: #93c5fd; /* light blue */
}

.designer-bubble-close-btn {
    background: #475569; /* slate-600 */
    border-radius: 9999px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.designer-bubble-close-btn:hover {
    background: #64748b; /* slate-500 */
    transform: rotate(90deg);
}

.designer-bubble-content {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0; /* Wichtig für Flexbox-Kinder mit Overflow */
}

/* --- Statistik-Ansicht --- */
.stats-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    .stats-container {
        grid-template-columns: 1fr 1fr;
    }
}

.stat-progress-bar {
    width: 100%;
    background-color: #334155; /* slate-700 */
    border-radius: 0.5rem;
    height: 2rem; /* 32px */
    overflow: hidden;
}

.stat-progress-bar-inner {
    height: 100%;
    border-radius: 0.5rem;
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.stat-value-box {
    background: white;
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stat-value-box .label {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    color: #1e293b; /* slate-800 */
}
.stat-value-box .value {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: #0f172a; /* slate-900 */
}
.stat-value-box .material-symbols-outlined {
    font-size: 2rem; /* 32px */
}

/* --- Item-Anzahl Badge --- */
.inventory-card {
    position: relative;
}
.item-count-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #ef4444; /* red-500 */
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
    z-index: 10;
}

/* --- NEU v90: Shop Preis Badge --- */
.shop-price-badge {
    position: absolute;
    top: 0.5rem; /* 8px */
    right: 0.5rem; /* 8px */
    z-index: 10;
    background: rgba(30, 41, 59, 0.85); /* slate-800 85% opacity */
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px; /* pill shape */
    padding: 0.25rem 0.6rem; /* 4px 10px */
    display: flex;
    align-items: center;
    gap: 0.25rem; /* 4px */
    color: #f59e0b; /* amber-500 */
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.shop-price-badge .material-symbols-outlined {
    font-size: 1.125rem; /* 18px */
    color: #f59e0b;
}

/* KORREKTUR v90: Das Item-Overlay im Shop-Modus wird nicht mehr angezeigt */
/* (Diese Klasse wird im nächsten Schritt vom Renderer hinzugefügt) */
.inventory-card.context-shop .item-overlay {
    display: none;
}

/* --- Bestehende Stile (angepasst/übernommen) --- */
#aq-designer-controls, #aq-designer-shelf {
    display: none; /* Die alten, festen Container werden nicht mehr angezeigt */
}

/* Positionierung Zufriedenheit unten links (FIX v89) */
#satisfaction-display {
    position: absolute;
    top: auto;
    bottom: 1rem; /* 16px */
    left: 1rem; /* 16px */
    z-index: 20; /* Sicherstellen, dass es über dem Canvas liegt */
}

/* --- NEU v94 (C3): Quiz-Antwort-Feedback-Animationen --- */
@keyframes flash-green {
  0%, 100% { background-color: #22c55e; box-shadow: 0 0 15px 5px rgba(34, 197, 94, 0.7); }
  50% { background-color: #4ade80; box-shadow: 0 0 25px 10px rgba(74, 222, 128, 0.9); }
}
@keyframes flash-red {
  0%, 100% { background-color: #ef4444; box-shadow: 0 0 15px 5px rgba(239, 68, 68, 0.7); }
  50% { background-color: #f87171; box-shadow: 0 0 25px 10px rgba(248, 113, 113, 0.9); }
}

.wissens-check-answer-btn.answer-correct-flash {
    animation: flash-green 0.5s 2; /* Blinkt zweimal */
    color: white !important;
    border-color: #22c55e;
}
.wissens-check-answer-btn.answer-wrong-flash {
    animation: flash-red 0.5s 2; /* Blinkt zweimal */
    color: white !important;
    border-color: #ef4444;
}

/* --- NEU v94 (C5): Item Seltenheits-Stile --- */

/* Sparkle/Shine Animation (für alle seltenen Karten) */
@keyframes sparkle-animation {
    0% { transform: rotate(45deg) translate(-150%, -150%); }
    100% { transform: rotate(45deg) translate(150%, 150%); }
}

.inventory-card.rarity-rare::after,
.inventory-card.rarity-epic::after,
.inventory-card.rarity-legendary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 45%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 55%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: sparkle-animation 5s infinite linear 1s; /* Startet mit Verzögerung */
    opacity: 0.8;
    pointer-events: none;
}

/* Normal (Weiß/Grau) - leichter Anpassung für Konsistenz */
.inventory-card.rarity-normal {
     background: linear-gradient(145deg, #374151, #4b5563); /* Grau-Töne */
     border: 1px solid #6b7280;
}

/* Selten (Blau) */
.inventory-card.rarity-rare {
    background: radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.3) 0%, rgba(30, 41, 59, 0) 60%), linear-gradient(145deg, #1d4ed8, #2563eb);
    border: 1px solid #60a5fa;
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
}
.inventory-card.rarity-rare:hover {
    box-shadow: 0 0 20px 6px rgba(96, 165, 250, 0.6); /* Blauer Glow */
    transform: translateY(-4px) scale(1.03);
    outline: 2px solid #93c5fd; /* Hellerer blauer Outline (überschreibt Standard) */
}

/* Episch (Gelb) */
.inventory-card.rarity-epic {
    background: radial-gradient(circle at 50% 0%, rgba(250, 204, 21, 0.3) 0%, rgba(30, 41, 59, 0) 60%), linear-gradient(145deg, #ca8a04, #eab308);
    border: 1px solid #facc15;
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.5);
}
.inventory-card.rarity-epic:hover {
    box-shadow: 0 0 22px 7px rgba(250, 204, 21, 0.7); /* Gelber Glow */
    transform: translateY(-4px) scale(1.03);
    outline: 2px solid #fde047;
}

/* Legendär (Orange) */
.inventory-card.rarity-legendary {
    background: radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.4) 0%, rgba(30, 41, 59, 0) 60%), linear-gradient(145deg, #ea580c, #f97316);
    border: 1px solid #fb923c;
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.6);
}
.inventory-card.rarity-legendary:hover {
    box-shadow: 0 0 25px 8px rgba(249, 115, 22, 0.8); /* Oranger Glow */
    transform: translateY(-4px) scale(1.03);
    outline: 2px solid #fdba74;
}

/* --- NEU v95: Animations-Stile für Platzierungs-Vorschau --- */
@keyframes bounce-preview {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

.placement-preview-sprite {
    animation: bounce-preview 1s ease-in-out infinite;
    filter: grayscale(100%) opacity(0.8);
}

/* ----- NEU v96: Item Detail Modal Stile ----- */

#item-detail-modal-container {
    position: fixed;
    inset: 0;
    z-index: 200; /* Liegt über dem Standard-Backdrop (29) und Bubbles (30), aber unter Quiz-Modals (201) */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(15, 23, 42, 0.7); /* slate-900 70% */
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
}

#item-detail-modal-container.visible {
    opacity: 1;
    pointer-events: auto;
}

.aq-detail-modal {
    background-color: #1e293b; /* slate-800 */
    border: 2px solid #475569; /* slate-600 */
    border-radius: 1rem; /* 16px */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    width: 90vw;
    max-width: 600px; /* Breite für das Sammelkarten-Layout */
    padding: 1.5rem;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.2s ease-out;
    display: grid; /* Haupt-Layout-Treiber */
    grid-template-columns: 1fr; /* Standard für Mobile */
    gap: 1.5rem;
}

#item-detail-modal-container.visible .aq-detail-modal {
    transform: scale(1);
}

@media (min-width: 640px) {
    .aq-detail-modal {
         /* 2 Spalten: Links Kachel (fest), rechts Info (flex) */
        grid-template-columns: 160px 1fr;
        max-width: 700px;
    }
}

/* Schließen-Button (Positionierung im Modal) */
.aq-detail-modal .designer-bubble-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 10;
}

/* Linke Spalte (Vergrößerte Kachel) */
.detail-modal-card-wrapper {
    width: 160px;
    height: 160px; /* Fixe Größe für die Kachel */
    margin: 0 auto; /* Zentrierung auf Mobile */
}

.detail-modal-card-wrapper .inventory-card {
    width: 100%;
    height: 100%;
    cursor: default;
    /* Deaktiviert Hover-Effekte der Kachel innerhalb des Modals */
}
.detail-modal-card-wrapper .inventory-card:hover {
     transform: none;
     box-shadow: none; 
     outline: none;
}
.detail-modal-card-wrapper .inventory-item-sprite {
    width: 120px; /* Größeres Sprite */
    height: 120px;
}
.detail-modal-card-wrapper .inventory-card::after {
    animation: none; /* Deaktiviert Sparkle-Animation auf der großen Kachel */
}


/* Rechte Spalte (Info & Aktionen) */
.detail-modal-info {
    min-width: 0; /* Verhindert Flexbox/Grid-Überlauf */
    text-align: center; /* Standard für Mobile */
}

@media (min-width: 640px) {
    .detail-modal-info {
        text-align: left;
    }
}

.detail-modal-info h2 {
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    color: white;
    line-height: 1.2;
}
.detail-modal-info .description {
    font-size: 0.9rem;
    color: #cbd5e1; /* slate-300 */
    font-style: italic;
    margin-top: 0.5rem;
    max-height: 100px; /* Begrenzte Höhe für Beschreibung */
    overflow-y: auto;
}

.detail-modal-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #475569; /* slate-600 */
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px */
}

/* Kontext: Shop */
.shop-price-box {
    background: rgba(15, 23, 42, 0.5); /* slate-900 50% */
    border-radius: 0.5rem;
    padding: 0.75rem;
    text-align: center;
}
.shop-price-box .price-label {
    font-size: 0.875rem;
    color: #94a3b8; /* slate-400 */
}
.shop-price-box .price-value {
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    color: #f59e0b; /* amber-500 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.shop-price-box .price-value img {
    width: 24px;
    height: 24px;
}
.shop-price-box .price-value .material-symbols-outlined {
    font-size: 1.875rem;
}

/* Allgemeiner Aktionsbutton im Modal */
.detail-action-button {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
    padding: 0.75rem 1rem; /* 12px 16px */
    border-radius: 0.5rem; /* 8px */
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    width: 100%;
    justify-content: center;
}
.detail-action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

/* Button: Kaufen (Gelb) */
.buy-button {
    background-color: #f59e0b; /* amber-500 */
    color: #422006; /* dark brown */
}
.buy-button:hover { background-color: #fbbf24; /* amber-400 */ }
.buy-button img { width: 24px; height: 24px; }

/* Button: Platzieren (Blau) */
.place-button {
    background-color: #2563eb; /* blue-600 */
    color: white;
}
.place-button:hover { background-color: #3b82f6; /* blue-500 */ }

/* Button: Benutzen (Blau) */
.use-button {
    background-color: #2563eb; /* blue-600 */
    color: white;
}
.use-button:hover { background-color: #3b82f6; /* blue-500 */ }

/* Button: Aufheben (Blau) */
.remove-button {
    background-color: #2563eb; /* blue-600 */
    color: white;
}
.remove-button:hover { background-color: #3b82f6; /* blue-500 */ }

/* Button: Verkaufen (Rot) */
.sell-button {
    background-color: #dc2626; /* red-600 */
    color: white;
}
.sell-button:hover { background-color: #ef4444; /* red-500 */ }
.sell-button img { width: 24px; height: 24px; }


/* Wrapper für Werkzeug-Icons (Käscher/Pinzette) */
/* KORREKTUR v98: (Anforderung 7) Optimaler Kompromiss. Wrapper verkleinert, Padding reduziert. */
.tool-icon-wrapper {
    width: 44px; /* Verkleinert von 48px */
    height: 44px;
    flex-shrink: 0;
    padding: 4px; /* Reduziert von 8px */
}
/* Deaktivierter Zustand (Graustufen) für fehlende Werkzeuge */
.tool-icon-wrapper.is-disabled .inventory-card {
    filter: grayscale(100%);
    opacity: 0.7;
}
.tool-icon-wrapper.is-disabled .inventory-card:hover {
    outline: 2px solid #ef4444; /* Rot, um Kauf-Aktion zu signalisieren */
}
/* Preis-Anzeige für fehlendes Werkzeug */
.tool-icon-wrapper.is-disabled .shop-price-badge {
    font-size: 0.75rem; /* Kleinere Preisanzeige */
    padding: 2px 6px;
    gap: 2px;
    top: 4px;
    right: 4px;
}
.tool-icon-wrapper.is-disabled .shop-price-badge .material-symbols-outlined {
    font-size: 0.875rem;
}

/* NEU v98: Overrides, um die Kachel im Button-Wrapper korrekt zu skalieren (Anforderung 7) */
.tool-icon-wrapper .inventory-card {
    min-height: 0; /* Überschreibt 120px */
    border: 1px solid #475569; /* Standard-Rand wiederherstellen */
    background: linear-gradient(145deg, #374151, #4b5563); /* Standard-BG wiederherstellen */
}
/* Deaktiviert Hover-Effekte auf der Mini-Kachel im Button */
.tool-icon-wrapper .inventory-card:hover {
    transform: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
    outline: none;
}
.tool-icon-wrapper .inventory-item-sprite {
    width: 100%; /* Füllt den Wrapper (ca. 36x36px) */
    height: 100%;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5)); /* Reduzierter Schatten */
}
/* Versteckt den Item-Namen in der Mini-Button-Kachel */
.tool-icon-wrapper .inventory-item-name {
    display: none;
}


/* Kontext: Platziert (Statistiken) */
.placed-item-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px */
}

/* Standard Prozentbalken (analog Statistik-Seite) */
.stat-progress-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.stat-progress-bar-wrapper .material-symbols-outlined {
    color: #94a3b8; /* slate-400 */
}
.stat-progress-bar-wrapper .stat-progress-bar {
    height: 1.25rem; /* 20px */
}
.stat-progress-bar-wrapper .stat-progress-bar-inner {
    font-size: 0.75rem; /* 12px */
}

/* NEU v96: Parameter-Balken (Rot/Grün/Gelb) */
.param-bar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.param-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem; /* 14px */
}
.param-bar-label-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #cbd5e1; /* slate-300 */
    font-weight: 600;
}
.param-bar-label-right {
    font-weight: 700;
    color: white;
}

.param-bar {
    width: 100%;
    height: 12px;
    background-color: #9f1239; /* rose-900 (Gesamtbereich Rot) */
    border-radius: 9999px;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

.param-bar-ideal {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: #16a34a; /* green-600 (Idealbereich) */
    border-radius: 9999px;
}

.param-bar-cursor {
    position: absolute;
    top: -4px; /* Zentriert den 20px Cursor auf der 12px Bar */
    width: 6px; /* Breite des Cursors */
    height: 20px; /* Höhe des Cursors */
    background-color: #facc15; /* yellow-400 (Aktueller Wert) */
    border: 2px solid white;
    border-radius: 9999px;
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.7);
    transform: translateX(-50%); /* Zentriert den Cursor auf dem 'left'-Prozentwert */
    z-index: 5;
}


/* --- NEU v98: Refactoring Sprite-Rendering --- */

/* Das alte inventory-item-sprite (div) ist jetzt ein Flex-Wrapper */
.inventory-item-sprite {
    width: 90px;
    height: 90px;
    /* Hintergrund-Eigenschaften entfernt */
    display: flex;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
    transition: transform 0.3s ease;
    overflow: hidden; /* Verhindert Überlappen des <img> */
}

/* NEU v98: Das eigentliche <img>-Tag (Anforderung 3) */
.inventory-item-sprite-img {
    /* Standard-Stile (width/height/object-fit/clip-path) werden inline von getSpriteClipStyle() gesetzt */
    
    /* Fallback-Stile (altes Verhalten), falls der Cache fehlt */
    object-fit: contain; 
    width: 100%;
    height: 100%;
    transform: scale(0.7); 
}

/* NEU v98: Wenn clip-path (inline) angewendet wird, Fallback-Skalierung aufheben */
img.inventory-item-sprite-img[style*="clip-path"] {
    transform: scale(1.0); /* Volle Größe nutzen, wenn Clipping aktiv ist */
}

/* NEU v98: Überschreibt die Skalierung des <img>-Tags, wenn es *nicht* geclippt wird (Fallback) 
   innerhalb des kleineren Button-Wrappers */
.tool-icon-wrapper .inventory-item-sprite-img:not([style*="clip-path"]) {
    transform: scale(0.8); /* Etwas größerer Fallback-Scale für Buttons */
}