/* ==============================================
   1. GRUNDLAGEN & FONT-IMPORT
   ============================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Poppins:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

/* Keyframes für den animierten Hintergrund */
@keyframes aurora-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Keyframes für das "Einfliegen" von Elementen */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==============================================
   2. THEME-STEUERZENTRALE (CSS-VARIABLEN)
   ============================================== */

/* Das neue Standard-Theme: "Aurora Dark" */
:root {
  /* Typografie */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  --radius-container: 1.5rem; /* 24px */
  --radius-card: 1rem;      /* 16px */
  --radius-button: 0.75rem; /* 12px */
  --radius-badge: 9999px; /* Pill shape */
  
  /* Farben */
  --bg-app: linear-gradient(-45deg, #111827, #1f2937, #102a43, #3c1e59);
  --bg-main-container: rgba(31, 41, 55, 0.6);
  --bg-card: rgba(17, 24, 39, 0.5);
  --bg-button-primary: #3b82f6;
  --bg-button-primary-hover: #2563eb;
  --bg-button-success: #16a34a;
  --bg-badge: #4a5568;
  
  --bg-button-special: #8b5cf6; 
  --bg-button-special-hover: #7c3aed; 
  --text-on-button-special: #ffffff;

  /* Textfarben */
  --text-primary: #e2e8f0;
  --text-secondary: #9ca3af;
  --text-accent: #63b3ed;
  --text-on-accent: #ffffff; 
  --text-on-primary-btn: #FFFFFF;
  --text-on-badge: #FFFFFF;
  
  /* Formen & Ränder */

  --border-container: 1px solid rgba(255, 255, 255, 0.1);
  --border-card: 1px solid rgba(255, 255, 255, 0.15);
  --border-active-tab: 2px solid var(--text-accent);

  /* Effekte */
  --backdrop-blur: blur(12px);
  --shadow-glow: 0 0 20px -5px rgba(59, 130, 246, 0.3);
  
  --color-favorite: #f472b6;
  --color-favorite-inactive: #718096;
  
  --color-danger: #ef4444;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  
  /* Benutzerdefinierte Farben */
  --user-color-1: #60a5fa; /* Default Person 1 */
  --user-color-2: #f472b6; /* Default Person 2 */
  
  --shimmer-color: rgba(255, 255, 255, 0.1); 
}

/* "Cotton-Candy"-Theme mit Fokus auf Lesbarkeit */
body.theme-cotton-candy {
  --font-heading: 'Quicksand', sans-serif;
  --font-body: 'Quicksand', sans-serif;
  
  --radius-container: 2rem;
  --radius-card: 1.5rem;
  --radius-button: 1.5rem;
  
  --bg-app: linear-gradient(135deg, #fdecf0, #f8e1f4);
  --bg-main-container: rgba(255, 255, 255, 0.7);
  --bg-card: rgba(253, 235, 243, 0.8);
  --bg-button-primary: #A48FF1;
  --bg-button-primary-hover: #9078e4;
  --bg-badge: #E5D9F7;
  
  --bg-button-special: #ec4899;
  --bg-button-special-hover: #db2777;

  --text-primary: #593E6E;  /* Dunkles, sattes Lila für Titel & wichtigen Text */
  --text-secondary: #776288; /* Etwas helleres Lila für Beschreibungen */
  --text-accent: #A48FF1;   /* Helles Lavendel NUR für DEKORATION (XP-Bar), NICHT für Text */
  --text-on-accent: #ffffff; 
  --text-on-primary-btn: #FFFFFF;
  --text-on-badge: #593E6E;

  /* Formen & Ränder */
  --border-container: 1px solid rgba(255, 255, 255, 0.8);
  --border-card: 2px solid #FFFFFF;
  --border-active-tab: 3px solid var(--text-primary);

  /* Effekte */
  --shadow-glow: 0 0 20px -5px rgba(164, 143, 241, 0.5);
  
  /* Variablen für reparierte Buttons & Badges */
  --color-favorite: #f472b6;
  --color-favorite-inactive: #d6bde6;
  
  --shimmer-color: rgba(0, 0, 0, 0.05);
}

/* ==============================================
   "Jade Forest"- Theme
   ============================================== */
body.theme-jade-forest {
 
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  --radius-container: 0.5rem;
  --radius-card: 0.5rem;
  --radius-button: 0.25rem;
 
  /* Haupt-Hintergrund: Ein tiefes, dunkles Waldgrün-Gradient */
  --bg-app: linear-gradient(-45deg, #0b1916, #102a27, #1a3a34);
  /* Glassmorphism-Elemente: Dunkle Jade/Teal-Töne */
  --bg-main-container: rgba(20, 48, 44, 0.7);
  --bg-card: rgba(26, 62, 56, 0.6);
  --bg-button-primary: #6ee7b7;
  --bg-button-primary-hover: #34d399; /* Eine etwas dunklere Stufe für den Hover-Effekt */
  --bg-badge: #102a27;
  
  --bg-button-special: #059669;
  --bg-button-special-hover: #047857;
  
  /* Textfarben für optimalen Kontrast */
  --text-primary: #e0f2f1;      /* Ein sehr helles, fast weißes Mint für Titel */
  --text-secondary: #a7c9c5;    /* Ein gedämpfteres Mint für Fließtext */
  --text-on-primary-btn: #064e3b; /* Ein sehr dunkles Grün für Text auf den hellen Buttons */
  --text-on-accent: #064e3b; 
  --text-accent: #6ee7b7; /* Ein helles, modernes Mintgrün */
  --text-on-badge: #e0f2f1;

  --border-card: 1px solid rgba(110, 231, 183, 0.3); /* Rand in Akzentfarbe */
  --border-active-tab: 2px solid var(--text-accent);
  
  /* Effekte */
  --shadow-glow: 0 0 20px -5px rgba(110, 231, 183, 0.4); /* Leuchten in Akzentfarbe */
  
  --shimmer-color: rgba(255, 255, 255, 0.1);
}

/* "Blush-Quartz"-Theme */
body.theme-blush-quartz {
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Lato', sans-serif;
  
  --radius-container: 0;
  --radius-card: 0.25rem;
  --radius-button: 0.25rem;
  
  --bg-app: linear-gradient(135deg, #f7cac9, #f3e0e0);
  --bg-main-container: rgba(255, 255, 255, 0.6);
  --bg-card: rgba(243, 221, 221, 0.7);
  --bg-button-primary: #c48a88;
  --bg-button-primary-hover: #b57170;
  --bg-badge: #dec9c9;
  
  --bg-button-special: #be185d;
  --bg-button-special-hover: #9d174d;
  
  --text-on-badge: #5c3a3a;
  --text-primary: #5c3a3a;
  --text-secondary: #8b6b6b;
  --text-accent: #c48a88;
  --text-on-accent: #ffffff;
  --text-on-primary-btn: #ffffff;
  
  --border-card: 1px solid rgba(255, 255, 255, 0.8);
  --border-active-tab: 1px solid var(--text-primary);
  
  --shadow-glow: 0 0 20px -5px rgba(196, 138, 136, 0.5);
  
  --shimmer-color: rgba(0, 0, 0, 0.05);
}

body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6, .main-header, .bucket-title {
    font-family: var(--font-heading);
}

/* ==============================================
   3. LAYOUT & GLOBALE STILE
   ============================================== */
body {
  background: var(--bg-app);
  background-size: 400% 400%;
  animation: aurora-gradient 25s ease infinite;
  font-family: var(--font-body);
  color: var(--text-primary);
  padding: 1rem;
}
@media (min-width: 640px) { 
	body { padding: 2rem; }
	
	/* Desktop ab 640px: Text sichtbar, Icon versteckt */
	.note-btn-icon {
        display: none;
    }
    .note-btn-text {
        display: inline;
    }
}

/* Der Haupt-Container mit dem Glassmorphism-Effekt */
#app-view {
  background-color: var(--bg-main-container);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-radius: var(--radius-container);
  border: var(--border-container);
  padding: 1.5rem;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  
  width: 100%;
  max-width: 1400px; /* Ändere diesen Wert, um die maximale Breite zu testen */
  margin: 0 auto;   /* Diese Zeile zentriert den Container wieder */
}

/* Standard (Mobile): Block-Layout, Desktop-Menü ist weg */
.desktop-layout-grid {
    width: 100%;
    display: block; 
}

#desktop-side-menu {
    display: none; /* Standardmäßig ausblenden (Mobile First) */
}

/* Ab 1024px (Desktop Breakpoint) */
@media (min-width: 1024px) {
    .desktop-layout-grid {
        display: grid;
        grid-template-columns: 256px minmax(0, 1fr); 
        gap: 2rem;
        align-items: start;
    }

    #desktop-side-menu {
        display: flex !important;
        flex-direction: column;
        position: sticky;
        top: 1rem;
        height: calc(100vh - 2rem);
        overflow-y: auto; 
    }
	
    #app-view main {
        width: 100%;
        min-width: 0;
    }
}

@media (min-width: 1024px) {
	#app-view {
    /* Dein "Layout-Regler" greift jetzt nur noch auf großen Bildschirmen */
    max-width: 1400px;
    margin: 0 auto;
    border-radius: 1.5rem; /* Optional: Größere Rundung für Desktops */
	}
}

/* Klasse für Animationen */
.fade-in-up {
    /* Setzt den Startzustand, die Animation wird per JS getriggert */
    opacity: 0;
    will-change: transform, opacity;
}
.fade-in-up.animate {
    animation: fade-in-up 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ==============================================
   4. KOMPONENTEN-STILE
   ============================================== */
/* =========================================
   Responsive Header Magie
   ========================================= */
/* Stellt sicher, dass der Titel bei langen Namen umbrechen kann */
#main-header {
    word-break: break-word; /* Wichtig für lange, zusammengesetzte Namen */
    padding: 0 0.5rem; /* Fügt links und rechts einen kleinen Abstand hinzu, damit der Text nicht an den Buttons klebt */
	margin-top: 1rem; /* Gibt dem Titel einen sauberen Abstand nach oben */
	margin-bottom: 1rem; /* Abstand zur XP-Leiste */
}

/* 
 * NUR auf großen Bildschirmen (Desktop-Ansicht)
 * Wir nutzen eine Media Query, die bei 1024px greift (der gleiche Punkt, an dem das Hamburger-Menü verschwindet).
 */
@media (min-width: 1024px) {
    /* Der Container der oberen Reihe wird zum Wrapper für alles */
    header .relative.flex {
        gap: 1rem; /* Ein kleiner Abstand zwischen den Elementen */
    }

    /* Der Logout-Button braucht einen linken Abstand, um nicht am Titel zu kleben */
    .logout-btn-new {
        margin-left: auto;
    }
}
#level-container {
    box-shadow: none; /* Entfernt alte Stile */
}

/* Filter-Panel */
main .controls-panel {
    background-color: var(--bg-card);
    border: var(--border-card);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    color: var(--text-secondary); /* Textfarbe für Labels etc. hinzufügen */
}

/* BUTTONS */

.btn-primary {
    background-color: var(--bg-button-primary);
    color: var(--text-on-primary-btn);
    border-radius: var(--radius-button);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border: none;
	position: relative;
	
	/* Der 3D-Effekt im Ruhezustand: Ein harter Schatten unten */
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2); 
	
	/* Wichtig für die Animation */
    transition: all 0.1s ease-in-out; 
    transform: translateY(0);
}
.btn-primary:hover {
    background-color: var(--bg-button-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.3);
}
.btn-primary:active {
    transform: translateY(2px) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border-bottom: none; /* Falls vorhanden */
    margin-bottom: 0;    /* Reset */
}
.btn-secondary {
    background-color: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-button);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
	position: relative;
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.1s ease;
	transform: translateY(0);
}
.btn-secondary:hover {
    background-color: var(--bg-main-container);
    color: var(--text-primary);
    border-color: var(--text-accent);
	transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.2);
}
.btn-secondary:active {
    /* NEU: Klick drückt Button runter */
    transform: translateY(2px) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.btn-icon-action:active {
	transform: scale(0.95);
    transition: transform 0.1s;	
}

/* Achievement-Karte */
.achievement-card {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--bg-card);
  border: var(--border-card);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
}
.achievement-card:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-glow);
    border-color: var(--text-accent);
}
.achievement-card.completed {
    opacity: 0.8; /* Leicht höhere Basis-Sichtbarkeit */
    background-color: var(--bg-main-container); 
    border: 2px dashed color-mix(in srgb, var(--text-primary) 30%, transparent); 
    box-shadow: none; 
    filter: grayscale(30%); 
}

.achievement-card.completed:hover {
    opacity: 1;
    border: 2px solid var(--text-accent); /* Beim Hovern leuchtet es in Akzentfarbe */
    filter: grayscale(0%);
    transform: translateY(-2px); 
}

.icon-bg {
    background-color: var(--bg-main-container);
}

.difficulty-badge, .topic-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-badge);
  background-color: var(--bg-badge);
  color: var(--text-on-badge);
  margin-left: 0.5rem; /* Fügt etwas Abstand zwischen den Badges hinzu */
}

/* ==========================================================================
   Smooth Expand:
   Dient dazu, dass Inhalte bereits geladen sind (DOM vorhanden),
   aber unsichtbar bleiben, bis sie ausgeklappt werden.
   ========================================================================== */
.expandable-container {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-out;
    opacity: 0; /* Optional: Versteckt Inhalt visuell komplett im zugeklappten Zustand */
    transition: grid-template-rows 0.3s ease-out, visibility 0.3s, opacity 0.3s;
	
	opacity: 0;
	visibility: hidden;
}

.expandable-container.expanded {
    grid-template-rows: 1fr;
    opacity: 1;
	visibility: visible;
}

.expandable-inner {
    overflow: hidden;
    min-width: 0; /* Verhindert Layout-Blowouts */
	padding-bottom: 2px;
}

/* =========================================
       Styling für die Bilder-Vorschau
   ========================================= */

/* Der Container für die Vorschaubilder */
.photo-gallery {
    display: flex;         /* Bilder nebeneinander anordnen */
    flex-wrap: wrap;       /* Bei zu vielen Bildern in die nächste Zeile umbrechen */
    gap: 0.5rem;           /* Ein kleiner Abstand (8px) zwischen den Bildern */
	
	max-height: 14rem; /* Platz für ca. 3 Zeilen */
    overflow-y: auto;  /* Vertikal scrollbar wenn nötig */
    padding-right: 0.5rem; /* Platz für Scrollbar, damit Inhalt nicht verdeckt wird */
    
    /* Scrollbar Styling für diesen Bereich verfeinern */
    scrollbar-width: thin;
    scrollbar-color: var(--text-accent) var(--bg-main-container);
}
/* Webkit Scrollbar Styling für die Galerie */
.photo-gallery::-webkit-scrollbar {
    width: 4px;
}
.photo-gallery::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
}
.photo-gallery::-webkit-scrollbar-thumb {
    background-color: var(--text-accent);
    border-radius: 4px;
}
/* Das Styling für jedes einzelne Vorschaubild */
.photo-thumbnail {
    height: 4rem;          /* Eine feste Höhe von 64px - die Schlüssel-Regel! */
    width: auto;           /* Breite passt sich automatisch an das Seitenverhältnis an */
    object-fit: cover;     /* Das A und O: Bilder werden beschnitten, nicht verzerrt! */
    aspect-ratio: 1 / 1;   /* Optional: Macht alle Vorschaubilder quadratisch */
    border-radius: var(--radius-button); /* Abgerundete Ecken, passend zum Theme */
    border: var(--border-card);
    cursor: pointer;       /* Zeigt an, dass das Bild klickbar ist */
    transition: all 0.2s ease-in-out;
}
.photo-thumbnail:hover {
    transform: scale(1.05);  /* Leichter Zoom-Effekt beim Darüberfahren */
    border-color: var(--text-accent);
}

/* =========================================
      Styling für die Galerie-Navigation
   ========================================= */
.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Zentriert den Button vertikal */
    z-index: 60; /* Stellt sicher, dass er über dem Bild liegt */
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    border-radius: 50%;
    width: 3rem;  /* 48px */
    height: 3rem; /* 48px */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.gallery-nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

/* Positioniert die Buttons an den Rändern */
.gallery-nav-btn.left-4 { left: 1rem; }
.gallery-nav-btn.right-4 { right: 1rem; }

/* Fügt eine sanfte Überblendung beim Bildwechsel hinzu */
#photo-viewer-img {
    transition: opacity 0.2s ease-in-out;
}

/* =========================================
   Header Info Chips
   ========================================= */
.info-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem; /* Kleiner Abstand zwischen den Elementen im Chip */
    background-color: var(--bg-card);
    border: var(--border-card);
    padding: 0.4rem 0.8rem;
    border-radius: 9999px; /* Macht es zu einer "Pille" */
    font-size: 0.8rem;
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
}

.chip-icon {
    color: var(--text-secondary);
}

.chip-label {
    color: var(--text-secondary);
}

.chip-value {
    color: var(--text-primary);
    font-weight: 500;
    font-family: monospace; /* Perfekt für den Code */
}

.chip-copy-btn {
    margin-left: 0.4rem;
    color: var(--text-secondary);
    background-color: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    padding: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.chip-copy-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-main-container);
}

/* =========================================
	    Theme-fähige Login-Komponenten
   ========================================= */
.themed-container {
    background-color: var(--bg-card);
    color: var(--text-secondary); /* Standardtext jetzt auf sekundäre Farbe setzen */
    padding: 2rem;
    border-radius: var(--radius-card);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border: var(--border-card);
}

.themed-container h1,
.themed-container h2,
.themed-container h3 {
    color: var(--text-primary); /* Überschriften bekommen IMMER die primäre, kräftigere Farbe */
}

.themed-input {
    background-color: var(--bg-main-container);
    border: 1px solid var(--border-card);
    color: var(--text-primary);
    border-radius: var(--radius-button);
    padding: 0.75rem;
    width: 100%;
    text-align: center;
}

.themed-input:focus {
    outline: none;
    border-color: var(--text-accent);
    box-shadow: 0 0 0 2px var(--text-accent);
}

.themed-text-secondary {
    color: var(--text-secondary);
}

.themed-divider > div {
    border-color: var(--border-card);
}

.themed-divider > span {
    color: var(--text-secondary);
}

.btn-copy-themed {
    flex-shrink: 0;
    padding: 0.5rem; /* 8px */
    border-radius: 0.375rem; /* 6px */
    background-color: var(--bg-main-container);
    color: var(--text-secondary);
    font-size: 0.875rem; /* 14px */
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn-copy-themed:hover {
    background-color: var(--bg-button-primary);
    color: var(--text-on-primary-btn);
    border-color: var(--text-accent);
}

.themed-checkbox {
    appearance: none;
    -webkit-appearance: none;
    height: 1.25rem;
    width: 1.25rem;
    background-color: var(--bg-main-container);
    border: 1px solid var(--border-card);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.themed-checkbox:checked {
    background-color: var(--bg-button-primary);
    border-color: var(--text-accent);
}

.themed-checkbox:checked::after {
    content: '✓';
    font-size: 1rem;
    color: var(--text-on-primary-btn);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.themed-popover {
    background-color: var(--bg-card);
    border: var(--border-card);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* =======================================================
   MODALS
   ======================================================= */
/* 
 * Stellt sicher, dass das innere Design der Modals (Glassmorphism, etc.)
 * korrekt angewendet wird, wenn sie sichtbar sind.
 */
 
 .modal {
	z-index: 60 !important;
 }
 
.modal > div {
  background-color: var(--bg-main-container);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: var(--border-container);
  border-radius: var(--radius-container);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  color: var(--text-primary);
}

/* Stellt sicher, dass Buttons im Modal gut aussehen */
.theme-btn {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card); /* Explizit Border setzen */
    color: var(--text-secondary);
    padding: 1rem;
    border-radius: var(--radius-button);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.1s ease-in-out;
    transform: translateY(0);
}
.theme-btn:hover {
    border-color: var(--text-accent);
    color: var(--text-primary);
    background-color: var(--bg-main-container);
    
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2);
}
.theme-btn:active {
    transform: translateY(2px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* =========================================
   Theme-Styling für schwebende Action-Buttons
   ========================================= */

.btn-floating-themed {
  background-color: var(--bg-card);
  border: var(--border-card);
  color: var(--text-secondary);
}

.btn-floating-themed:hover {
  background-color: var(--bg-button-primary);
  color: var(--text-on-primary-btn);
}

/* =========================================
   Steuerung für Favorit- & Löschen-Buttons
   ========================================= */
.difficulty-badge, .topic-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-badge, 9999px); /* Nutzt Theme-Variable mit Fallback */
  background-color: var(--bg-badge); /* Nutzt die korrekte Hintergrund-Variable */
  color: var(--text-on-badge); /* Nutzt die korrekte Text-Variable */
  margin-left: 0.5rem;
}

/* Positionierung und Styling */
.favorite-btn, .delete-btn {
    position: absolute;
    top: 0.75rem; /* 12px von oben */
    z-index: 10;  /* Stellt sicher, dass die Buttons über dem Karteninhalt liegen */
    padding: 0.5rem; /* Gibt etwas mehr Klickfläche */
    line-height: 1; /* Verhindert unerwünschte Höhen */
    transition: transform 0.2s ease;
}

.delete-btn {
    right: 0.5rem; /* 8px von rechts */
    color: var(--text-secondary);
    font-size: 1.75rem; /* Macht das "×" größer und besser klickbar */
    font-weight: bold;
}

.favorite-btn {
    left: 0.5rem; /* 8px von links */
    color: var(--color-favorite-inactive);
}

/* Hover-Effekte */
.delete-btn:hover, .favorite-btn:hover {
  transform: scale(1.2);
}
.delete-btn:hover {
  color: #ef4444; /* Rot als universelle "Gefahr"-Farbe bleibt hartcodiert */
}

/* Styling für den aktiven Favoriten-Status */
.favorite-btn.favorited {
  color: var(--color-favorite); /* Nutzt die leuchtende Favoriten-Farbe des Themes */
  transform: scale(1.1); /* Leichter "Pulse"-Effekt, wenn aktiv */
}

/* Hover-Effekte */
.delete-btn:hover, .favorite-btn:hover {
  transform: scale(1.2);
}
.delete-btn:hover {
  color: #ef4444; /* Rot als universelle "Gefahr"-Farbe bleibt hartcodiert */
}

/* Styling für den aktiven Favoriten-Status */
.favorite-btn.favorited {
  color: var(--color-favorite); /* Nutzt die leuchtende Favoriten-Farbe des Themes */
  transform: scale(1.1); /* Leichter "Pulse"-Effekt, wenn aktiv */
}

/* Stellt den Stil für den Online-Status wieder her */
.online-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-success);
}
.online-indicator::before {
    content: '';
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--color-success);
}

/* =========================================
   Stile für das neue mobile Seitenmenü
   ========================================= */
/* Stellt sicher, dass die Seitenleiste immer die korrekte Theme-Farbe hat */
#side-menu {
    background-color: var(--bg-card); /* Nutzt die Hintergrundfarbe der Karten */
	background-size: 400% 400%; /* Wichtig für die Aurora Animation */
	animation: aurora-gradient 25s ease infinite; /* Nutzt die bestehenden Body-Animationen */
	border-right: var(--border-container); /* Fügt eine saubere Trennlinie hinzu */
}   
   
#side-menu.open {
    transform: translateX(0);
}

#side-menu-overlay {
    transition: opacity 0.3s ease-in-out;
}

/* Auf großen Bildschirmen machen wir sie wieder transparent, wie es war */
@media (max-width: 1023px) {
  #side-menu {
    /* Nutzt die "frosted glass" Hintergrundfarbe des Haupt-Containers */
    background: var(--bg-app);
    border-right: var(--border-container); /* Fügt eine saubere Trennlinie hinzu */
  }
}

/* Standard-Textfarbe für alle nicht-aktiven Menü-Buttons */
.tab-btn {
    color: var(--text-secondary); /* Nutzt die sekundäre Textfarbe des Themes */
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Stile für den aktiven Button in der Seitenleiste/Navigation */
.tab-btn.active {
    background-color: var(--bg-button-primary);
    color: var(--text-on-primary-btn);
    font-weight: 500;
}

/* Definiert den Hover-Effekt für nicht-aktive Tabs */
.tab-btn:not(.active):hover {
    background-color: var(--bg-card); /* Nutzt die halb-transparente Kartenfarbe */
    color: var(--text-primary); /* Nutzt die primäre Textfarbe für besseren Kontrast */
}

/* GRUNDREGEL (Mobile First): Titel und Tags untereinander anordnen */
.title-and-tags-container {
  display: flex;
  flex-direction: column; /* Stapelt die Elemente vertikal */
  align-items: flex-start; /* Richtet alles linksbündig aus */
  gap: 0.5rem; /* Ein kleiner Abstand zwischen Titel und den Tags */
}

/* =========================================
   Aufgewertetes Design für Statistik-Karten
   ========================================= */
.stat-card {
    background-color: var(--bg-card); /* Nutzt die halb-transparente Kartenfarbe deines Themes */
    border: var(--border-card);       /* Nutzt den Karten-Rand deines Themes */
    border-radius: var(--radius-card);/* Nutzt den Karten-Radius deines Themes */
    padding: 1.5rem;                  /* Standard-Innenabstand */
    display: flex;                    /* Flexbox für bessere interne Ausrichtung */
    flex-direction: column;           /* Stapelt Titel und Inhalt vertikal */
	color: var(--text-secondary); 	  /* Standard Textfarbe für alles in der Karte*/
	min-width: 0;					  /* Erlaubt dem Container, kleiner zu werden als sein Inhalt */
	overflow: hidden;				  /* Verhindert das Rausragen von Charts */
	width: 100%;					  /* Stellt sicher, dass er den Grid-Platz füllt */
}

.stat-card h3, .stat-card .font-bold {
    color: var(--text-primary); /* Wichtige Texte/Titel bekommen die primäre Farbe */
}

/* Sorgt dafür, dass Diagramme den verfügbaren Platz in der Karte füllen */
.stat-card canvas {
    flex-grow: 1;
    min-height: 0; /* Wichtiger Flexbox-Fix für Canvas-Größenanpassung */
	max-width: 100%;
	height: auto !important;
	max-height: 300px;
}

/* =========================================
   Theming für das Date-Ideen-Modul
   ========================================= */

/* Die Hauptkarte des Moduls */
.date-idea-card {
    background-color: var(--bg-card);
    border: var(--border-card);
    border-radius: var(--radius-card);
    padding: 2rem;
    text-align: center;
}

/* Die Textfarben werden jetzt vom Theme geerbt (`--text-primary` und `--text-secondary`) */
.date-idea-card h2 {
    color: var(--text-primary);
}
.date-idea-card p {
    color: var(--text-secondary);
}

/* Der "Neue Idee"-Button */
.btn-pink {
    background-color: var(--bg-button-special);
    color: var(--text-on-button-special);
	border-radius: var(--radius-button);
    position: relative;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.1s ease-in-out;
    transform: translateY(0);
	border: none;
}
.btn-pink:hover {
    background-color: var(--bg-button-special-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.3);
}
.btn-pink:active {
    transform: translateY(2px) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 0;
}

/* Der Anzeigebereich für die generierte Idee */
.date-idea-display-box {
    background-color: var(--bg-main-container); /* Etwas dunkler als die Karte */
    padding: 1.5rem;
    border-radius: var(--radius-card);
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Der Titel der generierten Idee */
#date-idea-title {
    color: #f472b6; /* Leuchtendes Pink, passt gut zu beiden Themes */
}

/* Logout-Button im Cotton-Candy- & Blush-Quartz-Theme für bessere Lesbarkeit anpassen */
body.theme-cotton-candy .logout-btn-new, body.theme-blush-quartz .logout-btn-new {
    background-color: rgba(239, 68, 68, 0.1); /* Ein sehr sanfter, transparenter roter Hintergrund */
    color: var(--text-primary-btn); /* Nutzt die dunkle Hauptschriftfarbe (#593E6E) für maximalen Kontrast */
    font-weight: 500; /* Setzt die Schriftstärke auf "Medium" */
    border: 1px solid rgba(239, 68, 68, 0.2); /* Ein dezenter roter Rand */
}

body.theme-cotton-candy .logout-btn-new:hover, body.theme-blush-quartz .logout-btn-new:hover {
    background-color: #ef4444; /* Kräftiges, klares Rot beim Darüberfahren */
    color: var(--text-on-primary-btn); /* Heller Text (Weiß) für den Hover-Effekt */
}

/* =========================================
   Styling für das Profilbild
   ========================================= */

#profile-photo-img {
    /* Nutzt die Farbe des Haupt-Containers für den Rand */
    border-color: var(--bg-main-container);
}

/* =========================================
   Styling für die Foto-Galerie
   ========================================= */

#gallery-container {
  display: grid;
  /* Erstellt Spalten, die zwischen 120px und 1fr breit sind */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem; /* Abstand zwischen den Bildern */
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Stellt sicher, dass Bilder beschnitten, nicht verzerrt werden */
  aspect-ratio: 1 / 1; /* Macht alle Vorschaubilder quadratisch */
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.gallery-item img:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-glow);
}

/* =========================================
   Styling für die neuen Medaillen
   ========================================= */

.medal-card {
  background-color: var(--bg-card);
  border: var(--border-card);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}
.medal-card.unlocked {
  border-color: var(--text-accent); /* Nutzt jetzt die Akzentfarbe des Themes (z.B. Neon, Gold, Pink) */
  box-shadow: 0 0 15px -5px var(--text-accent); /* Leuchten passt sich dem Theme an */
}
.medal-card.unlocked:hover {
    transform: translateY(-10px);
}
.medal-card.locked {
  opacity: 0.7; /* Leicht höhere Opacity für besseren Kontrast */
  filter: grayscale(100%);
  border: 2px dashed var(--text-secondary); /* Harter gestrichelter Rand */
}
.medal-icon {
  font-size: 3rem;
  line-height: 1;
}
.medal-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-top: 0.75rem;
}
.medal-description {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  min-height: 40px; /* Sorgt für einheitliche Höhe */
}
.medal-progress {
  font-size: 0.9rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-card);
  color: var(--text-accent);
}

.lock-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--bg-main-container); 
  opacity: 0.85; /* Etwas dichterer Overlay */
  border-radius: var(--radius-card);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-primary);
}

/* =========================================
   Versteckte Scrollbars
   ========================================= */

/* Versteckt die Scrollleiste für Webkit-Browser (Chrome, Safari, Edge) */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Versteckt die Scrollleiste für Firefox */
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE und Edge (alt) */
  scrollbar-width: none;  /* Firefox */
}

/* =========================================
   Hintergrund-Scroll blockieren
   ========================================= */

body.modal-open {
  overflow: hidden;
}

/* =========================================
   Styling für dezente Text-Buttons
   ========================================= */

.btn-subtle {
  color: var(--text-secondary); /* Nutzt die sekundäre Textfarbe des Themes */
}

.btn-subtle:hover {
  color: var(--text-primary); /* Nutzt die primäre Textfarbe beim Hover */
}

/* =========================================
   Theme-Anpassung für den Benachrichtigungs-Toast
   ========================================= */

#notification-prompt-toast p.font-bold {
  color: var(--text-primary); /* Nutzt die primäre Textfarbe des Themes */
}

#notification-prompt-toast p.text-sm {
  color: var(--text-secondary); /* Nutzt die sekundäre Textfarbe des Themes */
}

#notification-prompt-toast {
  background-color: var(--bg-card); /* Nutzt die Hintergrundfarbe der Karten */
  border: var(--border-card); /* Fügt für Konsistenz auch den Karten-Rand hinzu */
}

/* =========================================
   Styling für Modal-Schließen-Buttons
   ========================================= */

.btn-modal-close {
  color: var(--text-secondary); /* Nutzt die sekundäre Farbe des Themes */
  transition: color 0.2s ease;
}

.btn-modal-close:hover {
  color: var(--text-primary); /* Nutzt die primäre Farbe beim Hover */
}

/* =========================================
   Styling für die Sweet Message Items
   ========================================= */

.sweet-message-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    border-radius: var(--radius-button);
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    color: var(--text-primary);
    text-align: left;
    transition: all 0.2s ease;
	margin-bottom: 0.5rem;
}

.sweet-message-item:hover {
    border-color: var(--text-accent);
    background-color: var(--bg-main-container);
    transform: translateY(-2px);
	box-shadow: var(--shadow-glow);
}

.sweet-message-item .icon {
    flex-shrink: 0;
    color: var(--text-accent);
}

/* =========================================
   Styling für den Speed Dial FAB (TOP-RIGHT)
   ========================================= */

.fab-label {
    opacity: 0;
    transform: translateX(10px) scale(0.9);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab-mini-btn {
    transform: scale(0);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* WICHTIG: Animationsursprung auf oben setzen */
    transform-origin: top center; 
}

/* Wenn der Container aktiv ist, werden die kleinen Buttons sichtbar */
#fab-container.active .fab-mini-btn {
    transform: scale(1);
    opacity: 1;
}

/* Wenn Container aktiv, sliden auch die Labels rein */
#fab-container.active .fab-label {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* Angepasste Verzögerung für eine Kaskade nach unten (Stagger-Effekt auch für parent div wg Labels) */
#fab-container.active div:nth-child(2) .fab-mini-btn, #fab-container.active div:nth-child(2) .fab-label { transition-delay: 0s; }
#fab-container.active div:nth-child(3) .fab-mini-btn, #fab-container.active div:nth-child(3) .fab-label { transition-delay: 0.05s; }
#fab-container.active div:nth-child(4) .fab-mini-btn, #fab-container.active div:nth-child(4) .fab-label { transition-delay: 0.1s; }
#fab-container.active div:nth-child(5) .fab-mini-btn, #fab-container.active div:nth-child(5) .fab-label { transition-delay: 0.15s; }
#fab-container.active div:nth-child(6) .fab-mini-btn, #fab-container.active div:nth-child(6) .fab-label { transition-delay: 0.2s; }

/* Rotiert das "+" Icon zu einem "x" (bleibt unverändert) */
#fab-container.active #fab-main-btn svg {
    transform: rotate(45deg);
}

/* Lebendigere Empty States (Schwebe-Animation) */
@keyframes float-icon {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Styling für die spezielle "Geheim"-Achievement-Karte */
.achievement-card.secret {
    border-style: dashed;
    border-color: var(--text-secondary);
    opacity: 0.8;
}

.achievement-card.secret:hover {
    opacity: 1;
    border-color: var(--text-accent);
    transform: scale(1.03); /* Behält den Hover-Effekt bei */
}

.secret-card-footer {
  /* Nutzt die Hintergrundfarbe des Hauptcontainers (sehr dezent) */
  background-color: var(--bg-main-container);
  /* Nutzt die sekundäre Textfarbe des jeweiligen Themes */
  color: var(--text-secondary);
}

/* =========================================
   Styling für das "Versteckt"-Symbol
   ========================================= */

.hidden-indicator {
  display: inline-block; /* Sorgt dafür, dass es neben dem Text bleibt */
  margin-left: 0.5rem; /* Abstand zum Titel */
  vertical-align: middle; /* Richtet das Icon vertikal am Text aus */
  color: var(--text-secondary); /* Dezente Farbe */
  cursor: help; /* Ändert den Mauszeiger, um den Tooltip anzudeuten */
  transition: color 0.2s ease;
}

.hidden-indicator:hover {
  color: var(--text-accent); /* Leuchtet beim Hover auf */
}

/* =============================================
   Styling für die Ergebnis-Karte im Deck-Modal
   ============================================= */
.deck-card-container {
    perspective: 1000px;
}
.deck-card-front {
    background-color: var(--bg-button-primary);
    background-image: 
        radial-gradient(circle at 100% 100%, rgba(255,255,255,0.1) 20%, transparent 20%), 
        radial-gradient(circle at 0% 0%, rgba(255,255,255,0.1) 20%, transparent 20%), 
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 15%, transparent 16%);
    background-size: 20px 20px;
    transform: rotateY(0deg);
}
.deck-card-back {
    background-color: var(--bg-card);
    transform: rotateY(180deg);
}
/* Animations-Klasse für das "Mischen" vor dem Flip */
.deck-shuffling {
    animation: shuffle-shake 0.5s ease-in-out infinite;
}
@keyframes shuffle-shake {
    0% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-5px) rotate(-2deg); }
    50% { transform: translateX(0) rotate(0deg) scale(1.02); }
    75% { transform: translateX(5px) rotate(2deg); }
    100% { transform: translateX(0) rotate(0deg); }
}
/* Die Flip-Klasse */
#deck-card-inner.flipped {
    transform: rotateY(180deg);
}

/* =========================================
   Theming für das Entscheidungs-Logbuch
   ========================================= */
#deck-log-list, .deck-log-list {
    background-color: var(--bg-main-container); /* Passt sich dem Theme an */
}

.deck-log__entry {
    background-color: var(--bg-card); /* Nutzt die Kartenfarbe des Themes */
    padding: 0.5rem;
    border-radius: var(--radius-button);
}

.deck-log__result {
    font-weight: 600; /* semibold */
    color: var(--text-primary); /* Nutzt die Haupttextfarbe des Themes */
}

.deck-log__meta {
    font-size: 0.75rem; /* 12px */
    color: var(--text-secondary); /* Nutzt die sekundäre Textfarbe des Themes */
}

/* =========================================
   FullCalendar Theming
   ========================================= */
/* Macht den Header auf Mobile mehrzeilig und zentriert den Titel darunter */
@media (max-width: 768px) {
    .fc .fc-toolbar.fc-header-toolbar {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
    }
    .fc .fc-toolbar-chunk:nth-child(1) {
        order: 1; /* Pfeile links oben */
    }
    .fc .fc-toolbar-chunk:nth-child(3) {
        order: 2; /* Today-Button rechts oben */
    }
    .fc .fc-toolbar-chunk:nth-child(2) {
        order: 3; /* Titel unten */
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .fc .fc-toolbar-title {
        font-size: 1.25rem !important; /* Etwas kleiner, damit es edel aussieht */
    }
}

/* Haupt-Container des Kalenders */
#couple-calendar {
  --fc-border-color: var(--border-card);
  --fc-today-bg-color: rgba(59, 130, 246, 0.15); /* Leichter Akzent für den heutigen Tag */
}

/* Header-Buttons (Prev, Next, Today) */
.fc .fc-button-primary {
  background-color: var(--bg-button-primary);
  border-color: var(--bg-button-primary);
  font-size: 0.9em;
  transition: background-color 0.2s;
}
.fc .fc-button-primary:hover {
  background-color: var(--bg-button-primary-hover);
  border-color: var(--bg-button-primary-hover);
}
.fc .fc-button-primary:disabled {
  background-color: var(--bg-card);
  border-color: var(--border-card);
}
.fc .fc-button-primary:focus,
.fc .fc-button-primary:active,
.fc .fc-button-primary:focus:active,
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background-color: var(--bg-button-primary-hover) !important;
  border-color: var(--bg-button-primary-hover) !important;
  color: var(--text-on-primary-btn) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Titel (z.B. "Oktober 2025") */
.fc .fc-toolbar-title {
  color: var(--text-primary);
}

/* Wochentage (Mo, Di, etc.) */
.fc .fc-col-header-cell-cushion {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
}

/* Tagesnummern */
.fc .fc-daygrid-day-number {
  color: var(--text-secondary);
  text-decoration: none;
}
.fc .fc-day-other .fc-daygrid-day-number {
  opacity: 0.4; /* Tage aus anderen Monaten ausblenden */
}

/* Event-Styling */
.fc-event {
  cursor: pointer;
  padding: 4px 6px;
  font-size: 0.8rem;
  border-radius: 4px;
  border: none !important; /* ÄNDERUNG: Störende Ränder entfernen */
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Spezifisches Styling für Ihre Event-Typen */
.fc-event.event-article {
  background-color: var(--bg-button-primary) !important;
  color: var(--text-on-primary-btn) !important;
}
.fc-event.event-social {
  background-color: var(--bg-button-special) !important;
  color: var(--text-on-button-special) !important;
}

/* Listenansicht auf Mobilgeräten */
.fc-list-day-text, .fc-list-day-side-text {
    text-decoration: none;
    color: var(--text-primary);
}
.fc-list-event:hover td {
    background-color: rgba(255, 255, 255, 0.05);
}
.fc-theme-standard .fc-list-day-cushion {
    background-color: var(--bg-main-container); /* Dynamische Theme-Farbe */
    color: var(--text-primary);
}
.fc-theme-standard .fc-list, 
.fc-theme-standard .fc-list-table td {
    border-color: var(--border-card);
}
.fc .fc-list-empty {
    background-color: var(--bg-card);
    color: var(--text-secondary);
}
/* Styling für die Paar-Feiertage */
.fc-event.event-holiday {
  background-color: transparent !important; /* Kein eigener Hintergrund */
  border: 2px dashed var(--text-accent) !important; /* Gestrichelter Rand in Akzentfarbe */
  color: var(--text-accent) !important; /* Text in Akzentfarbe */
  font-weight: 600;
}

/* =========================================
   Styling für den "Öffentliches Profil"-Button
   ========================================= */
.public-toggle-btn {
  position: absolute;
  top: 0.75rem;
  right: 3rem; /* Positioniert ihn neben dem Löschen-Button */
  z-index: 10;
  padding: 0.5rem;
  color: var(--color-favorite-inactive); /* Nutzt die gleiche Farbe wie der inaktive Favorit */
  transition: all 0.2s ease;
}
.public-toggle-btn:hover {
  transform: scale(1.2);
}
.public-toggle-btn.active {
  color: var(--text-accent);
  text-shadow: 0 0 10px var(--text-accent);
  transform: scale(1.1);
}

/* =========================================
   Styling für den Public-Photo-Manager
   ========================================= */
.public-photo-item .checkmark {
    display: none;
    font-size: 1.5rem;
    color: white;
    font-weight: bold;
}
.public-photo-item.selected .opacity-0 {
    opacity: 1;
}
.public-photo-item.selected .checkmark {
    display: flex;
}

/* =========================================
   Theming für Profil-Editor-Module
   ========================================= */
.module-chip {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  padding: 0.75rem;
  border-radius: var(--radius-button);
  cursor: grab;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.2s ease;
  margin-bottom: 0.5rem; /* Abstand zwischen den Chips */
  color: var(--text-primary);
}
.module-chip:hover {
  background-color: var(--bg-main-container);
  border-color: var(--text-accent);
  transform: translateX(2px);
}
.module-chip__title {
  font-weight: 600;
  color: var(--text-primary);
}
.module-chip__description {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ZUSTÄNDE FÜR THEMEN-KOMPATIBILITÄT */

/* Wenn das Modul in der "Aktiven" Liste ist */
.module-chip.active-module {
    border-left: 3px solid var(--text-accent);
    background-color: var(--bg-card);
}
/* Wenn das Modul in der "Verfügbar" Liste ist */
.module-chip.inactive-module {
    opacity: 0.7;
    border-style: dashed;
}
.module-chip.inactive-module:hover {
    opacity: 1;
    border-style: solid;
}

/* =========================================
   Theming für die Profil-Editor-Vorschau
   ========================================= */

/* Überschreibt die harten, dunklen Farben aus profile-style.css
   und ersetzt sie mit den dynamischen Theme-Variablen der App,
   aber NUR innerhalb der Vorschau-Box. */

#profile-preview-area .profile-module {
    background-color: var(--bg-card); /* Nutzt die Kartenfarbe des Themes */
    border: var(--border-card);
    color: var(--text-primary);
}

#profile-preview-area .module-title {
    color: var(--text-primary);
}

#profile-preview-area .stat-item {
    background-color: var(--bg-main-container); /* Nutzt die Haupt-Hintergrundfarbe für Kontrast */
    color: var(--text-secondary);
}

#profile-preview-area .stat-value,
#profile-preview-area .stat-item h4 {
    color: var(--text-primary);
}

#profile-preview-area .achievement-item {
    background-color: var(--bg-main-container);
}

#profile-preview-area .achievement-title {
    color: var(--text-primary);
}

#profile-preview-area .achievement-desc {
    color: var(--text-secondary);
}

#profile-preview-area .achievement-date {
    color: var(--text-secondary);
    opacity: 0.7;
}

#profile-preview-area .medal-name {
    color: var(--text-secondary);
}

#profile-preview-area .gallery-item div {
    background-color: var(--bg-main-container); /* Passt die Platzhalter-Farbe an */
}

/* Anpassung für den Header-Platzhalter in der Vorschau */
#profile-preview-area .profile-module h1 {
    color: var(--text-primary);
}

#profile-preview-area .profile-module .profile-header-level {
    color: var(--text-accent);
}

#profile-preview-area .profile-module .text-slate-300 {
    color: var(--text-secondary);
}

#profile-section input[type="color"] {
    background-color: var(--bg-card); /* Nutzt die Kartenfarbe des Themes */
    border: 1px solid var(--border-card); /* Nutzt den Rand des Themes */
}

/* =========================================
   Styling für das Einstellungs-Modal
   ========================================= */
.settings-tab-btn {
    display: block;
    width: auto;
    text-align: left;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-button);
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    border: 1px solid transparent;
	white-space: nowrap;
	flex-shrink: 0;
}

.settings-tab-btn:hover {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

.settings-tab-btn.active {
    background-color: var(--bg-button-primary);
    color: var(--text-on-primary-btn);
    border-color: var(--text-accent);
}

/* ==============================================
   STYLING FÜR PREMIUM-STUFEN-TAGS
   ============================================== */
.tier-tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 0.75rem;
  vertical-align: middle;
}

.tier-tag.tier-standard {
  background-color: #4b5563;
  color: #e5e7eb;
}

.tier-tag.tier-premium {
  background-color: #3b82f6;
  color: #ffffff;
}

.tier-tag.tier-ultra {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  background-image: linear-gradient(
    90deg, 
    #ff4b4b, #ffac38, #fff24a, #4bff66, #38d1ff, #6c4bff, #ff4b4b
  );
  background-size: 400% 400%;
  animation: rainbow-shift 3s ease infinite;
}

/* Die Animation, die den Regenbogen-Hintergrund bewegt */
@keyframes rainbow-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =========================================
   Verbessertes Styling für die Secure-Code Checkbox
   ========================================= */
#secure-code-modal .themed-checkbox {
  width: 1.5rem;  /* Größer */
  height: 1.5rem; /* Größer */
  transition: all 0.2s ease;
}

#secure-code-modal .themed-checkbox:checked {
  box-shadow: 0 0 10px var(--text-accent); /* Leucht-Effekt, wenn aktiv */
}

#secure-code-modal .themed-checkbox:checked::after {
  font-size: 1.25rem; /* Größeres Häkchen */
}

/* =========================================
   FINALES, THEMENFÄHIGES SKILLTREE STYLING
   ========================================= */

#skilltree-wrapper {
  overflow: hidden;
  cursor: grab;
  background-color: var(--bg-main-container);
  height: 70vh;
}
#skilltree-wrapper:active {
  cursor: grabbing;
}

#skilltree-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  padding: 2rem;
  width: 100%;
  min-width: max-content;
}

.skilltree-row {
  display: flex;
  justify-content: center;
  gap: 4rem;
  width: 100%;
}

.perk-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease-out;
  flex-basis: 120px;
}

.perk-node__hexagon {
  position: relative;
  width: 100px;
  height: 115px;
  background-color: var(--bg-card);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.perk-node__hexagon::before {
  content: '';
  position: absolute;
  inset: 2px;
  background-color: var(--bg-main-container);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 1;
}

.perk-node__icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  z-index: 2;
  transition: all 0.3s ease;
  position: absolute; /* Absolut positioniert, damit wir es frei zentrieren können */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Die Magie: Zentriert das Icon */
}

.perk-node__title {
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

/* --- VISUELLE ZUSTÄNDE (JETZT MIT KONTRAST) --- */

/* KAUFBAR */
.perk-node.state-buyable:hover { transform: scale(1.1); }
.perk-node.state-buyable .perk-node__hexagon {
  background: var(--text-accent);
  box-shadow: var(--shadow-glow);
}
.perk-node.state-buyable .perk-node__title { color: var(--text-primary); }

/* FREIGESCHALTET */
.perk-node.state-unlocked .perk-node__hexagon { background: var(--text-accent); }
.perk-node.state-unlocked .perk-node__title {
  color: var(--text-accent);
  font-weight: 700;
}

/* GESPERRT (KORRIGIERT) */
.perk-node.state-locked { cursor: not-allowed; }
.perk-node.state-locked .perk-node__hexagon {
  /* Nutzt die Kartenfarbe, aber mit einem Graustich-Filter für klare Abgrenzung */
  background: var(--bg-card);
  filter: grayscale(80%);
}
.perk-node.state-locked .perk-node__icon {
  filter: grayscale(100%);
  opacity: 0.3; /* Nur das Icon wird transparent, nicht der ganze Knoten */
}
.perk-node.state-locked .perk-node__title {
  color: var(--text-secondary);
  opacity: 0.6; /* Der Text wird leicht transparent, bleibt aber lesbar */
}

/* LINIEN (KORRIGIERT) */
.perk-line {
  position: absolute;
  /* Nutzt die sekundäre Textfarbe mit Transparenz -> immer sichtbar, aber dezent */
  background-color: var(--text-secondary);
  opacity: 0.3; 
  height: 3px;
  transform-origin: left center;
  transition: all 0.5s ease;
  z-index: 0;
}
.perk-line.is-unlocked {
  background-color: var(--text-accent); /* Freigeschaltete Linien leuchten in der Akzentfarbe */
  opacity: 1;
}

/* --- TOOLTIP-STYLING (MIT KORREKTEM TEXT-THEMING) --- */
#perk-tooltip {
  display: none;
  opacity: 0;
  position: fixed;
  background-color: var(--bg-card);
  border: var(--border-card);
  border-radius: var(--radius-button);
  padding: 1rem;
  width: 280px;
  z-index: 100;
  pointer-events: none;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
#perk-tooltip.is-active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}
/* KORREKTUR: Textfarben im Tooltip an das Theme anpassen */
#perk-tooltip h4 { color: var(--text-primary); }
#perk-tooltip p { color: var(--text-secondary); }
#perk-tooltip span { color: var(--text-secondary); }
/* Spezifische Farben für Kosten beibehalten, da sie Status signalisieren */
#perk-tooltip .text-red-400 { color: #ef4444 !important; } /* Rot, wenn nicht genug Punkte */

/* Auf größeren Bildschirmen mehr Spalten */
@media (min-width: 768px) {
  #skilltree-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem 2.5rem;
  }
  
  .card-top-actions {
        /* Ab hier wird es absolut positioniert, wie vorher */
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        margin-bottom: 0;
        border-bottom: none;
        padding-bottom: 0;
        background: transparent;
   }
   
   .settings-tab-btn {
        width: 100%;
    }
}
@media (min-width: 1024px) {
  #skilltree-container {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 768px) {
  #perk-tooltip {
    bottom: 1rem;
    left: 50%;
    top: auto !important;
    width: 90vw;
    max-width: 320px;
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
  }
  #perk-tooltip.is-active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* =========================================
   Mobile Scroll-Indikatoren für Tabs
   ========================================= */

@media (max-width: 767px) {
    #settings-tabs {
        /* Erzeugt einen sanften Transparenz-Verlauf am rechten Rand */
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
    }

    /* WICHTIG: Fügt dem letzten Button rechts extra Platz hinzu.
       Dadurch kann der Nutzer den letzten Button aus dem "transparenten Bereich"
       herausscrollen, sodass er voll lesbar und klickbar ist. */
    #settings-tabs .settings-tab-btn:last-child {
        margin-right: 1.5rem; 
    }
}

/* ==============================================
   STYLING FÜR DIE MULTI-SELECT-BOX
   ============================================== */

.multiselect-container {
    position: relative;
}

.multiselect-selected-badge {
    background-color: #4f46e5;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.multiselect-remove-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-weight: bold;
}
.multiselect-remove-btn:hover {
    color: white;
}

.multiselect-option-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}
.multiselect-option-item:hover {
    background-color: #4f46e5;
    color: white;
}

/* =========================================
   Theme-Fixes für Widgets & Kommentare
   ========================================= */

/* Skilltree Punkte Widget */
.skill-points-widget {
    background-color: var(--bg-card);
    border: var(--border-card);
    color: var(--text-secondary);
    padding: 0.75rem 1.5rem;
	min-width: 150px;
}

.skill-points-widget .points-value {
    color: var(--text-accent);
}

/* Achievement Kommentare / Reaktionen */
.reaction-container {
    /* Nutzt den Haupt-Hintergrund für Kontrast innerhalb der Karte */
    background-color: var(--bg-main-container); 
    border: var(--border-card);
    color: var(--text-primary);
}

.reaction-author {
    color: var(--text-secondary);
}

.reaction-text {
    color: var(--text-primary);
    font-style: italic;
}

/* =========================================
   Neue Features: Buckets, Notes, Quiz
   ========================================= */

/* BUCKETS */
.bucket-card {
    background-color: var(--bg-card);
    border: var(--border-card);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.bucket-card:hover {
    transform: translateY(-4px);
    border-color: var(--text-accent);
}
/* Für die Titel in den Buckets */
.bucket-title {
    color: var(--text-primary);
    transition: color 0.2s ease;
}

/* Für hervorgehobene Namen/Titel in den Statistiken */
.stat-highlight {
    color: var(--text-primary);
}
.bucket-progress-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background-color: rgba(255,255,255,0.1);
    width: 100%;
}
.bucket-progress-fill {
    height: 100%;
    background-color: var(--text-accent); /* Nimmt die Theme-Farbe */
}

/* =========================================
   NOTES & LISTEN
   ========================================= */

/* Container Grid */
#notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Basis-Karte für Notizen */
.note-card {
    background-color: var(--bg-card);
    border: var(--border-card);
    border-radius: var(--radius-card);
    padding: 1.25rem;
    min-height: 220px; /* Einheitliche Mindesthöhe */
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.note-card.just-updated {
    /* Animation wird per JS gesteuert */
}
.note-card:hover {
    background-color: var(--bg-main-container);
    border-color: var(--text-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
}
/* Titel der Notiz */
.note-card-header {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-container);
    padding-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Erzwingt die Theme-Textfarbe für den Titel im Modal und den Placeholder */
#note-title {
    color: var(--text-primary) !important; /* Wichtig, um Tailwind text-white zu überschreiben */
    border-bottom: 1px solid var(--border-card);
}

#note-title::placeholder {
    color: var(--text-secondary) !important;
}

/* Inhalt der Notiz (Preview) */
.note-card-content {
    flex-grow: 1;
    font-size: 0.9rem;
    color: var(--text-secondary);
    overflow: hidden;
    position: relative;
}

/* Footer (Datum/Autor) */
.note-card-footer {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.6;
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-container);
    text-align: right;
}

/* Inputs innerhalb der Editoren */
.note-editor-textarea {
    width: 100%;
    height: 100%;
    background-color: var(--bg-main-container);
	border: 1px solid var(--border-card);
	border-radius: var(--radius-button);
	padding: 1rem;
    color: var(--text-primary);
    resize: none;
    outline: none;
    font-family: inherit;
	transition: border-color 0.2s ease;
}
.note-editor-textarea:focus {
    color: var(--text-accent);
}
/* Mobile: Icon sichtbar, Text versteckt */
.note-btn-icon {
    display: inline-block;
}
.note-btn-text {
    display: none;
}
/* Überschreibt die harten Tailwind-Klassen (bg-slate-700) im Notiz-Typ-Wähler */
#note-type-selector label {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

#note-type-selector label:has(input:checked) span{
	color: var(--text-on-primary-btn) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#note-type-selector label:hover {
    background-color: var(--bg-main-container);
    color: var(--text-primary);
    border-color: var(--text-accent);
}

/* Style für den ausgewählten Radio-Button (Input ist checked) */
#note-type-selector label:has(input:checked) {
    background-color: var(--bg-button-primary) !important;
    color: var(--text-on-primary-btn) !important;
    border-color: var(--radius-button);
    font-weight: 500;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* --- SPEZIFISCHE STYLES FÜR NOTIZ-TYPEN --- */

/* 1. Checklisten & Standard Text */
.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.checklist-input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    width: 100%;
    font-size: 0.9rem;
}
.checklist-input:focus { 
    outline: none; 
    border-bottom: 1px solid var(--text-accent); 
}
.checklist-item.checked .checklist-input {
    text-decoration: line-through;
    opacity: 0.5;
}

/* 2. Zitat ("Gesagt ist gesagt") */
.note-type-quote {
    background: linear-gradient(135deg, var(--bg-card), rgba(--bg-main-container));
    border-left: 3px solid var(--text-accent);
}
.quote-text {
    font-family: serif; /* Hebt sich optisch ab */
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--text-primary);
}
.quote-author {
    text-align: right;
    margin-top: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-accent);
}

/* 3. Pro & Contra Liste */
.pro-con-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    height: 100%;
}
.pro-col { color: #4ade80; font-size: 0.85rem; }
.con-col { color: #f87171; font-size: 0.85rem; }
.pro-con-title { 
    font-weight: bold; 
    text-transform: uppercase; 
    font-size: 0.7rem; 
    margin-bottom: 0.25rem; 
    opacity: 0.8;
}

/* Pro / Contra Spalten-Titel */
.pro-title { 
	color: var(--bg-button-success);
	font-weight: bold; 
	text-align: center; 
	margin-bottom: 0.5rem; 
}

.con-title { 
	color: #ef4444; /* Ein etwas dunkleres Rot für bessere Lesbarkeit auf hellen Hintergründen */
	font-weight: bold; 
	text-align: center; 
	margin-bottom: 0.5rem; 
}

/* 4. Ranking / Top-Liste */
.ranking-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    background-color: var(--bg-main-container);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
	border: 1px solid var(--border-container);
}
.ranking-number {
    background: var(--bg-button-primary);
    color: var(--text-on-primary-btn);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
}

/* 5. Link-Sammlung */
.link-item-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-accent);
    font-size: 0.9rem;
    text-decoration: none;
}
.link-item-preview:hover {
    text-decoration: underline;
}

/* Editier-Modus Styles (für Modal) */
.link-row {
    background-color: var(--bg-main-container);
    border: 1px solid var(--border-card);
    padding: 0.5rem;
    border-radius: var(--radius-button);
    margin-bottom: 0.5rem;
}

/* Spezifisch für Link-Input im Editor */
.link-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}
.link-input-url {
    font-size: 0.75rem;
    color: var(--text-accent);
    background: transparent;
    border: none;
    outline: none;
}

/* Zeilen in Listen (Checkliste, Links) */
.editor-row-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    padding: 0.5rem;
    border-radius: var(--radius-button);
    margin-bottom: 0.5rem;
	color: var(--text-primary); /* Sicherstellen, dass Textfarbe stimmt */
}

/* Das Input Feld für die Zahl */
#note-counter-value {
    text-align: center; 
    /* Wichtig: Padding entfernen, damit die Zahl nicht verschoben wird */
    padding: 0; 
    line-height: 1;
}

/* Die runden Buttons (+/-) im Counter-Editor und auf der Karte */
#editor-counter .btn-secondary,
.note-card-content .btn-primary {
    padding: 0 !important; 
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px !important; /* Minimaler optischer Ausgleich für Schriftarten */
}

#delete-note-btn {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-button);
    font-weight: 500;
    transition: all 0.1s ease-in-out;
    position: relative;
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    color: var(--text-secondary) !important;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
}
#delete-note-btn:hover {
    background-color: var(--bg-main-container);
    border-color: var(--text-accent);
    color: var(--text-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.2);
}
#delete-note-btn:active {
    transform: translateY(2px) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Hover-Effekt für bessere UX in allen Themes */
.editor-row-item:hover {
    border-color: var(--text-accent);
}

/* QUIZ 3D FLIP CARD */
.perspective-1000 { 
    perspective: 1000px;
    margin-top: 2rem;
    position: relative;
    z-index: 1;
}
.transform-style-3d { transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rotate-y-180 { transform: rotateY(180deg); }

@keyframes float-card {
    0% { transform: translateY(0px) rotate(0deg); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); }
    50% { transform: translateY(-10px) rotate(1deg); box-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.4); }
    100% { transform: translateY(0px) rotate(0deg); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); }
}

@keyframes shimmer-card {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

#quiz-card-inner.flipped {
    transform: rotateY(180deg);
}

.quiz-answer-bubble {
    background-color: var(--bg-main-container);
    border-radius: 1rem;
    padding: 1rem;
    border-left: 4px solid var(--text-accent);
}

/* Ein universeller Container, der sich dem Theme anpasst (für Bucket-Details, Quiz, etc.) */
.content-card {
    background-color: var(--bg-card);       /* Passt sich Theme an */
    border: var(--border-card);             /* Passt sich Theme an */
    border-radius: var(--radius-card);
    padding: 1.5rem;
    color: var(--text-secondary);           /* Textfarbe passt sich an */
}

.content-card h2, .content-card h3 {
    color: var(--text-primary);             /* Überschriften passen sich an */
}

.latest-answer-card {
    background-color: var(--bg-card);       /* Theme-Hintergrund */
    border: var(--border-card);             /* Theme-Rand */
    border-radius: var(--radius-card);
    padding: 1rem;
    color: var(--text-primary);             /* Theme-Textfarbe */
}

.latest-answer-label {
    color: var(--text-secondary);
    font-size: 0.875rem; /* text-sm */
    font-weight: 700;    /* font-bold */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Der Text der Antwort in der Box */
.latest-answer-content .question {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.latest-answer-content .answer {
    color: var(--text-secondary); /* Etwas blasser */
    font-style: italic;
}
.latest-answer-content .date {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.7;
    margin-top: 0.5rem;
    text-align: right;
}

/* 2. Der Gesprächsverlauf (History List) */
.quiz-history-item {
    padding: 0.75rem;
    border-radius: var(--radius-button);
    border-left-width: 4px;
    border-left-style: solid;
    margin-bottom: 0.5rem;
    /* Nutzt den Hintergrund des Hauptcontainers für Kontrast zur Karte */
    background-color: var(--bg-main-container); 
}

/* Text-Styling innerhalb der History-Items */
.quiz-history-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.25rem;
}
.quiz-history-name {
    font-size: 0.75rem;
    font-weight: 700;
}
.quiz-history-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.8;
}
.quiz-history-question {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary); /* WICHTIG: Passt sich dem Theme an! */
    margin-bottom: 0.25rem;
}
.quiz-history-answer {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--text-secondary); /* Passt sich dem Theme an! */
}
.quiz-card-front {
    /* Fallback Farbe */
    background-color: var(--bg-button-primary);
    /* Verlauf von Primär-Button-Farbe zu Akzent-Farbe */
    background: linear-gradient(110deg, var(--bg-button-primary) 30%, var(--text-accent) 50%, var(--bg-button-primary) 70%);
    background-size: 200% 100%;
	animation: shimmer-card 5s linear infinite;
	
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-on-primary-btn); /* Textfarbe passend zum Button (meist Weiß) */
}

#quiz-card-inner:not(.flipped) .quiz-card-front {
    animation: shimmer-card 5s linear infinite, float-card 6s ease-in-out infinite;
}

.quiz-card-back {
    background-color: var(--bg-card);       /* Theme-Hintergrund (z.B. Rosa oder Dunkelblau) */
    border: var(--border-card);             /* Theme-Rand */
    color: var(--text-primary);             /* Theme-Textfarbe */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Anpassung für den Text auf der Rückseite */
.quiz-card-back h3, 
.quiz-card-back p {
    color: var(--text-primary);
}

/* Stellt sicher, dass das Icon auf der Rückseite (z.B. die Sprechblase) zum Theme passt */
.quiz-card-back .icon-large {
    color: var(--text-accent);
}

/* Bucket Hotlink in Achievement Karte */
.bucket-link-badge {
    display: inline-block;    /* Block-Verhalten für Breite, Inline für Fluss */
    max-width: calc(100% - 10px); /* Kleinerer Max-Width, damit es nicht am Rand klebt */
    white-space: nowrap;      /* Zwingt Text in eine Zeile */
    overflow: hidden;         /* Versteckt den Überrest */
    text-overflow: ellipsis;  /* Fügt die ... hinzu */
    vertical-align: middle;   /* Richtet es vertikal mittig zum Text aus */

    /* Design & Abstände */
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.5rem;
    
    /* Farben (Bucket-Blau) */
    background-color: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
    
    cursor: pointer;
    transition: all 0.2s ease;
	
	/* Sorgt dafür, dass Padding in die Breite eingerechnet wird */
    box-sizing: border-box; 
    margin-right: 5px; /* Sicherheitshalber etwas Rand rechts */
}
.bucket-link-badge:hover {
    background-color: rgba(59, 130, 246, 0.3);
    border-color: #60a5fa;
    transform: translateY(-1px);
}

/* Style für Buckets in der Hauptliste */
.bucket-card-main {
    /* Erbt von achievement-card, überschreibt aber Details */
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.bucket-card-main:hover {
    transform: translateY(-2px);
    border-left-color: #60a5fa; /* Helleres Blau beim Hover */
}

/* =========================================
   DRAG & DROP HANDLES
   ========================================= */

/* Der Griff selbst */
.drag-handle {
    cursor: grab; /* Zeigt die Hand am PC */
    color: var(--text-secondary);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.2s, color 0.2s;
    touch-action: none; /* WICHTIG: Verhindert Scrollen beim Berühren des Griffs */
}

/* Hover-Effekt (PC) und Active-Status */
.drag-handle:hover,
.drag-handle:active {
    opacity: 1;
    color: var(--text-primary);
    cursor: grabbing;
}

/* Positionierung im Achievement (Oben rechts, neben dem Löschen-Button) */
.achievement-drag-handle {
    position: absolute;
    top: 0.75rem;
    right: 2.5rem; /* Links neben dem Löschen-Button (der ist bei right: 0.5rem) */
    z-index: 10;
}

/* Positionierung in der Checkliste (Ganz links) */
.checklist-drag-handle {
    margin-right: 0.25rem;
    cursor: grab;
}

/* =========================================
   FIXES FÜR DRAG & DROP & MOBILE LAYOUT
   ========================================= */

/* 1. Theme-angepasster "Geist" für Checklisten */
.checklist-ghost {
    /* Nutzt die Haupt-Hintergrundfarbe des Themes (z.B. Hellrosa oder Dunkelblau) */
    background-color: var(--bg-main-container) !important;
    /* Ein Rand in der Akzentfarbe hilft bei der Orientierung */
    border: 2px dashed var(--text-accent);
    opacity: 0.9;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    color: var(--text-primary) !important;
}

/* 2. Container für die oberen Aktions-Buttons (Drag, Public, Fav, Delete) */
.card-top-actions {
    display: flex;
    justify-content: flex-end; /* Rechtsbündig */
    align-items: center;
    gap: 0.25rem; /* Kleiner Abstand zwischen den Icons */
    
    /* MOBILE FIRST: Standardmäßig ist es eine normale Zeile OBEN im Fluss */
    margin-bottom: 0.5rem; 
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-container); /* Optionale Trennlinie auf Mobile */
}

/* 3. Button-Styling innerhalb der Gruppe zurücksetzen */
.card-top-actions .delete-btn,
.card-top-actions .favorite-btn,
.card-top-actions .public-toggle-btn,
.card-top-actions .drag-handle {
    position: static !important; /* WICHTIG: Hebt das alte 'absolute' auf */
    transform: none !important;  /* Kein Scale-Effekt, der das Layout verschiebt */
    margin: 0;
    padding: 0.4rem; /* Größere Touch-Fläche */
}
/* Garantiert, dass der Drag Handle immer sichtbar bleibt, wenn er im DOM ist */
.card-top-actions .drag-handle {
    display: flex !important;
}

/* =========================================
   NOTIZEN ARCHIV STYLING
   ========================================= */

/* Archivierte Karten wirken etwas "inaktiver", nutzen aber weiter Theme-Farben */
.note-card.archived {
    filter: grayscale(80%); /* Entzieht Farbe, lässt aber Kontrast übrig */
    opacity: 0.8;
    border-style: dashed; /* Gestrichelter Rand als visuelles Indiz */
}

.note-card.archived:hover {
    filter: grayscale(0%); /* Farbe kommt zurück beim Hover */
    opacity: 1;
    transform: translateY(-2px);
}

/* Generische Trennlinie, die sich dem Theme anpasst */
.theme-border-top {
    border-top: 1px solid var(--border-container);
}

/* Der Container für das Archiv selbst (optional, falls content-card nicht reicht) */
.archive-wrapper {
    /* Nutzt keine harten Farben, sondern erbt oder nutzt Transparenz */
    width: 100%;
    margin-top: 2rem;
}

/* =========================================
   Kategorie-Menü Styling (Akkordeon)
   ========================================= */

/* Der Haupt-Kategorie-Button */
.category-btn {
    color: var(--text-secondary); /* Theme-Farbe */
    transition: all 0.2s ease;
    background-color: transparent;
}

/* Stellt sicher, dass Klicks auf den Text oder das Icon im Button auch den Button triggern */
.category-btn > * {
    pointer-events: none;
}

.category-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-main-container); /* Theme-Hintergrund */
}

/* Zustand, wenn Kategorie offen ist */
.category-btn.open {
    color: var(--text-primary);
    font-weight: 700;
}

/* Der Pfeil rotiert, wenn offen */
.category-btn.open svg {
    transform: rotate(180deg);
}

/* Submenü-Struktur */
.submenu {
    border-left: 2px solid var(--border-container); /* Linie links zur Orientierung */
    margin-left: 0.75rem; /* Einrückung der Linie */
    padding-left: 0.25rem;
}

/* Die Unter-Items */
.submenu .tab-btn {
    opacity: 0.8;
}
.submenu .tab-btn:hover,
.submenu .tab-btn.active {
    opacity: 1;
}

/* =========================================
   Checklisten Zuweisung (Assignee)
   ========================================= */

.assignee-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    margin-right: 0.5rem; /* Abstand zum Textfeld */
}

/* Zustand: Unzugeordnet (Grau) */
.assignee-btn.state-none {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

/* Zustand: Partner 1 (Blau/Cyan) */
.assignee-btn.state-p1 {
    background-color: var(--user-color-1); /* Blau */
    color: white;
    border-color: var(--user-color-1);
	filter: brightness(1.1);
}

/* Zustand: Partner 2 (Pink/Lila) */
.assignee-btn.state-p2 {
    background-color: var(--user-color-2); /* Pink */
    color: white;
    border-color: var(--user-color-2);
	filter: brightness(1.1);
}

.assignee-btn:hover {
    transform: scale(1.1);
}

/* =========================================
   Notizen: Anpinnen (Pinning)
   ========================================= */

/* Der Pin-Button im Header der Notiz */
.pin-note-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary); /* Standard: Inaktiv */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 1.2rem;
    border-radius: 50%; /* Rund beim Hover */
    
    position: relative; /* Wichtig für den Tooltip */
}

.pin-note-btn:hover {
    transform: scale(1.1);
    color: var(--text-primary);
	background-color: var(--bg-main-container);
}

/* Zustand: Angepinnt */
.pin-note-btn.active {
    color: var(--text-accent); /* Nimmt die Theme-Farbe an */
    transform: rotate(45deg); /* Kleiner visueller Effekt */
}

/* Die Karte selbst, wenn angepinnt */
.note-card.is-pinned {
    border-color: var(--text-accent); /* Rand leuchtet in Theme-Farbe */
    background-color: var(--bg-main-container); /* Hebt sich leicht vom Hintergrund ab */
    order: -1; /* CSS-Trick: Schiebt es im Grid nach vorne (Fallback für JS-Sortierung) */
}

/* =========================================
   Memory Stories Styling
   ========================================= */
.story-progress-bar {
    height: 3px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    flex: 1; /* Verteilt Platz gleichmäßig */
    overflow: hidden;
}

.story-progress-fill {
    height: 100%;
    background-color: white;
    width: 0%;
}

.story-progress-fill.active {
    /* 5s Dauer für ein Bild */
    animation: storyProgress 5s linear forwards; 
}

.story-progress-fill.finished {
    width: 100%;
}

@keyframes storyProgress {
    from { width: 0%; }
    to { width: 100%; }
}

/* =========================================
   LEVEL BADGE (Hexagon)
   ========================================= */

.level-hexagon-wrapper {
    width: 80px;
    height: 90px;
    filter: drop-shadow(0 0 10px var(--shadow-glow)); /* Äußerer Schein */
    transition: transform 0.3s ease;
}

.level-hexagon-wrapper:hover {
    transform: scale(1.1) rotate(5deg);
}

/* Der Hintergrund des Badges (Akzentfarbe) */
.level-hexagon-bg {
    position: absolute;
    inset: 0;
    background: var(--text-accent);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 1;
}

/* Der Inhalt (Dunkler, damit Text lesbar ist) */
.level-hexagon-content {
    position: absolute;
    inset: 3px; /* Randbreite */
    background-color: var(--bg-card); /* Theme-Hintergrund */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 2;
    color: var(--text-primary);
}

/* Glanz-Effekt über dem Badge */
.level-hexagon-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 3;
    pointer-events: none;
}

/* Anpassung der XP-Bar Farbe */
#xp-bar {
    background-color: var(--text-accent);
    box-shadow: 0 0 10px var(--text-accent);
}

/* Schimmer-Animation für den Balken */
@keyframes shimmer {
    0% { transform: translateX(-150%) skewX(-20deg); }
    50% { transform: translateX(150%) skewX(-20deg); }
    100% { transform: translateX(150%) skewX(-20deg); }
}

/* 1. Gespeicherte Date-Ideen Karte */
.saved-idea-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    transition: all 0.2s ease;
}

.saved-idea-card:hover {
    background-color: var(--bg-main-container);
    border-color: var(--text-accent); /* Leuchtet in Akzentfarbe */
}

.saved-idea-card h4 {
    color: var(--text-primary);
}

.saved-idea-card p {
    color: var(--text-secondary);
}

/* Basis für Karten (Date-Ideen, etc.) */
.themed-box {
    background-color: var(--bg-card);
    border: var(--border-card);
    transition: all 0.2s ease;
}

.themed-box:hover {
    background-color: var(--bg-main-container);
    border-color: var(--text-accent);
}

/* Hintergrund für Leisten (XP, Streak) */
.themed-bar-bg {
    background-color: var(--bg-card);
    border: var(--border-card);
}

/* Text-Farben */
.text-theme-primary {
    color: var(--text-primary);
}

/* Text in Akzentfarbe */
.text-theme-accent {
    color: var(--text-accent);
}

/* Dezentere Action-Buttons (für Listen) */
.btn-subtle-action {
    color: var(--text-secondary);
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.375rem;       /* p-1.5 */
    transition: all 0.2s ease;
}

/* Hover-Status nutzt Theme-Variablen */
.btn-subtle-action:hover {
    background-color: var(--bg-main-container); /* Theme-Hintergrund */
    color: var(--text-primary);
}

/* Spezifische Hover-Farben für Semantik */
.btn-subtle-action.delete:hover {
    color: #ef4444; /* Rot */
}

.btn-subtle-action.adopt:hover {
    color: #4ade80; /* Grün */
}

.gallery-filter-btn {
    background-color: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-card);
    padding: 0.5rem 1rem;
    border-radius: 9999px; /* Pill Shape */
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gallery-filter-btn:hover {
    background-color: var(--bg-main-container);
    color: var(--text-primary);
    border-color: var(--text-accent);
}

/* Aktiver Zustand (Ausgewählt) */
.gallery-filter-btn.active {
    background-color: var(--text-accent);
    color: var(--text-on-accent);
    border-color: var(--text-accent);
    font-weight: 700;
}

/* Herz-Pop Animation (für Favoriten) */
@keyframes heart-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}
.favorite-btn.favorited svg {
    animation: heart-pop 0.3s ease-out;
}

/* Shake Animation (für Fehler) */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.shake-error {
    animation: shake 0.3s ease-in-out;
    border-color: #ef4444 !important; /* Roter Rand */
}

/* Empty State Styling */
.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    background-color: var(--bg-card);
    border: var(--border-card);
	border-style: dashed;
	border-width: 2px;
    border-radius: var(--radius-card);
    grid-column: 1 / -1; 
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.7;
    filter: grayscale(0.5);
    animation: float-icon 3s ease-in-out infinite;
}

.empty-state-container:hover {
    border-color: var(--text-accent);
    box-shadow: inset 0 0 20px rgba(var(--text-accent-rgb), 0.1);
    transform: translateY(-2px);
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-state-text {
    font-size: 0.9rem;
    max-width: 300px;
    margin-bottom: 1.5rem;
}

/* Das Bestätigungs-Modal muss höher sein als normale Modals (z-50) */
#confirm-modal, #alert-modal, #secure-code-modal {
    z-index: 100 !important; 
}

/* Heatmap Styles */
.heatmap-week {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.heatmap-day {
    width: 12px;  /* WICHTIG: Ohne das ist es unsichtbar */
    height: 12px; /* WICHTIG */
    border-radius: 2px;
    background-color: rgba(51, 65, 85, 0.5); /* Slate-700, leerer Tag */
}

/* Farben für Aktivität */
.heatmap-l1 { background-color: #064e3b; }
.heatmap-l2 { background-color: #047857; }
.heatmap-l3 { background-color: #10b981; }
.heatmap-l4 { background-color: #6ee7b7; }

/* View Transitions Basis */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s; /* Schön kurz und knackig */
}

/* === ARCADE SPIELE STYLES === */

#active-game-view {
    background: var(--bg-app); 
}

#active-game-view::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--bg-main-container); /* Theme-spezifische Transparenz */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 0; /* Unter dem Spiel, über dem Background */
}

.immersive-game-header {
    background-color: var(--bg-card); 
    border-bottom: 1px solid var(--border-card);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.session-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.session-card:hover {
    transform: translateX(5px);
    border-color: var(--text-accent);
    background-color: var(--bg-main-container);
    box-shadow: var(--shadow-glow); /* Glow Effekt hinzufügen */
}
.session-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}
.dot-green { background-color: #22c55e; box-shadow: 0 0 8px #22c55e; }
.dot-yellow { background-color: #eab308; }
.dot-red { background-color: #ef4444; }

/* Spiel-Icon Hintergrund (Lobby) */
.game-icon-bg {
    background-color: var(--bg-main-container);
    border: 1px solid var(--border-card);
    border-radius: 0.5rem;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-primary); /* Farbe sicherstellen */
}

/* Status-Boxen im Spiel (z.B. "Du bist dran") */
.game-status-box {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    color: var(--text-primary);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-button);
    font-weight: bold;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}
/* Aktiver Spieler Highlight */
.game-status-box.active {
    border-color: var(--text-accent);
    box-shadow: 0 0 15px -3px var(--text-accent);
    background-color: var(--bg-main-container);
}

/* Tic-Tac-Toe */
.ttt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 300px;
    width: 100%; /* Wichtig für Mobile */
    margin: 0 auto;
}
.ttt-cell {
    aspect-ratio: 1/1;
    background-color: var(--bg-card);
    border: 2px solid var(--border-card);
    border-radius: var(--radius-button);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem; /* Emojis brauchen Platz */
    font-weight: bold;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s;
    user-select: none;
}
.ttt-cell:hover:not(.taken) {
    background-color: var(--bg-main-container);
    border-color: var(--text-accent);
    transform: scale(1.05);
}
.ttt-cell.taken {
    cursor: default;
    background-color: var(--bg-main-container); /* Belegte Zellen etwas dunkler */
}
.ttt-cell.winner {
    background-color: rgba(34, 197, 94, 0.2) !important; /* Transparenteres Grün */
    border-color: #22c55e;
    box-shadow: 0 0 15px #22c55e;
    animation: heart-pop 0.5s ease;
}

/* Mini Tic-Tac-Toe */
.mini-ttt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    background-color: var(--border-card); /* Lückenfarbe */
    border: 1px solid var(--border-card);
}
.mini-ttt-cell {
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

/* Hangman */
.hangman-letter {
    border-bottom: 3px solid var(--text-primary); /* Theme Farbe */
    width: 2rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0.25rem;
    color: var(--text-primary);
}
.hangman-keyboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    width: 100%;
}
.hangman-key {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem; /* Etwas breiter */
    height: 3rem;
    border-radius: var(--radius-button);
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* Theme Colors */
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    color: var(--text-primary);
    box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}
/* Hover-Effekt (Themes) */
.hangman-key:hover:not(:disabled) {
    background-color: var(--bg-main-container);
    border-color: var(--text-accent);
    transform: translateY(-2px);
}
/* Disabled State */
.hangman-key:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: translateY(1px);
}
/* Falsch (Rot) oder nicht im Wort (Grau bei Wordle) */
.hangman-key.wrong, .hangman-key.absent {
    background-color: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}
/* Richtig (Grün) */
.hangman-key.correct {
    background-color: var(--bg-button-success) !important; /* Theme Variable nutzen */
    border-color: var(--bg-button-success) !important;
    color: white !important;
}
/* Enthalten aber falsche Stelle (Gelb - Wordle) */
.hangman-key.present {
    background-color: #eab308 !important;
    border-color: #eab308 !important;
    color: black !important;
}

/* Log Karte Layout Anpassung */
.gamelog-card {
    flex-direction: column; /* Damit Details unten dranklappen */
    align-items: stretch;   /* Breite füllen */
    padding: 0;             /* Padding wird in inneren Containern geregelt */
    overflow: hidden;       /* Für Ecken-Radius */
}

/* Der sichtbare Kopfbereich (Header) */
.gamelog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    width: 100%;
}
/* Der ausklappbare Detailbereich */
.log-details {
    background-color: var(--bg-main-container);
    padding: 1rem;
    border-top: 1px solid var(--border-card);
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.log-win { border-left-color: #22c55e; background: linear-gradient(90deg, rgba(34,197,94,0.1) 0%, transparent 100%); }
.log-loss { border-left-color: #ef4444; background: linear-gradient(90deg, rgba(239,68,68,0.1) 0%, transparent 100%); }
.log-draw { border-left-color: #f59e0b; }

.game-icon-circle {
    /* Feste Größe: 40x40px */
    width: 2.5rem; 
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    
    /* Perfekter Kreis */
    border-radius: 50%;
    
    /* Inhalt zentrieren */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Theme Farben */
    background-color: var(--bg-main-container);
    border: 1px solid var(--border-card);
    
    /* Text/Emoji Einstellungen */
    font-size: 1.25rem; /* Einheitliche Größe für Emojis */
    line-height: 1;     /* Verhindert vertikale Verschiebung */
    white-space: nowrap; /* Verhindert das Stapeln bei 🔴🟡 */
    overflow: hidden;    /* Schneidet ab, falls doch mal was zu groß ist */
    
    /* Kein Schrumpfen im Flex-Layout */
    flex-shrink: 0;
}

/* Spezieller Fix für Connect 4 (zwei Emojis sind breiter) */
.game-icon-circle[data-type="connect4"] {
    font-size: 1rem; /* Etwas kleiner, damit beide reinpassen */
    letter-spacing: -2px; /* Näher zusammenrücken */
}

/* Memory Styles */
.memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    perspective: 1000px;
}
.memory-card {
    aspect-ratio: 1/1;
    position: relative;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.5s;
	width: 100%;
}
.memory-card.flipped {
    transform: rotateY(180deg);
}
.memory-front, .memory-back {
    position: absolute;
    width: 100%;
    height: 100%;
	-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: var(--radius-button);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.memory-front {
    background-color: var(--bg-card); /* Theme Farbe */
    border: 2px solid var(--border-card);
    font-size: 2rem;
    color: var(--text-primary);
}
.memory-back {
    background-color: var(--bg-main-container); 
    border: 2px solid var(--text-accent);
    transform: rotateY(180deg);
}
.memory-back img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Das ist der Zauber: Füllt alles aus, schneidet Ränder ab */
    border-radius: var(--radius-button); /* Ecken abrunden wie die Karte */
    display: block;
}
.memory-matched {
    opacity: 0.5; /* Gefundene Paare ausgrauen */
    cursor: default;
}

/* Schere-Stein-Papier */
.rps-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.rps-btn {
    font-size: 3rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 2px solid var(--border-card);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}
.rps-btn:hover {
    transform: scale(1.1);
    background-color: var(--bg-main-container);
    border-color: var(--text-accent);
}
.rps-btn.selected {
    background-color: var(--text-accent);
    border-color: white;
    box-shadow: 0 0 15px var(--text-accent);
}
.rps-result-card {
    font-size: 4rem;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Wordle */
.wordle-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    max-width: 300px;
    margin: 0 auto 1rem auto;
}
.wordle-cell {
    aspect-ratio: 1/1;
    border: 2px solid var(--border-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    background: var(--bg-main-container);
	color: var(--text-primary);
}
.wordle-cell.correct { background-color: #22c55e; border-color: #22c55e; } /* Grün */
.wordle-cell.present { background-color: #eab308; border-color: #eab308; } /* Gelb */
.wordle-cell.absent { background-color: #4b5563; border-color: #4b5563; } /* Grau */

/* Vier gewinnt */
.c4-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    background-color: var(--bg-card); 
    padding: 10px;
    border-radius: 10px;
    border: 4px solid var(--border-card);
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3);
}
.c4-cell {
    aspect-ratio: 1/1;
    background-color: var(--bg-main-container); 
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.05); /* Dezenter Rand */
    cursor: pointer;
    position: relative;
    transition: background-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Hover Effekt über der Spalte (nur wenn leer) */
.c4-grid:hover .c4-cell:not(.filled) {
    border-color: var(--text-accent);
    opacity: 0.8;
}
/* P1 (meist Rot/Warm) */
.c4-p1 { 
    background-color: var(--user-color-1) !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5); 
} 
/* P2 (meist Gelb/Hell) */
.c4-p2 { 
    background-color: var(--user-color-2) !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5); 
}

/* Mini Connect 4 */
.mini-c4-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    width: 140px; 
    aspect-ratio: 7/6;
    background: var(--bg-card);
    padding: 4px;
    border-radius: 4px;
    margin: 0 auto;
    border: 2px solid var(--border-card);
}
.mini-c4-cell {
    background-color: var(--bg-main-container); /* Leer */
    border-radius: 50%;
    width: 100%;
    height: 100%;
}
.mini-c4-red { background-color: var(--user-color-1) !important; }
.mini-c4-yellow { background-color: var(--user-color-2) !important; }

/* Schiffe versenken */
.battleship-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}
.battleship-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    width: 100%;
    max-width: 300px;
    background-color: var(--border-card); /* Lückenfarbe */
    border: 2px solid var(--border-card);
    border-radius: 4px;
    overflow: hidden;
}
.bs-cell {
    aspect-ratio: 1/1;
    /* Wasser: Theme-Kartenfarbe mit leichter Transparenz */
    background-color: var(--bg-main-container);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
}
.bs-cell.ship { 
    background-color: var(--text-secondary); /* Schiff nutzt Sekundärfarbe (meist grün/grau/lila) */
    color: var(--bg-app);
} 
.bs-cell.hit { 
    background-color: #ef4444; /* Treffer immer Rot */
    animation: shake 0.3s; 
} 
.bs-cell.miss { 
    background-color: rgba(255,255,255,0.1); 
    color: var(--text-secondary);
}
.bs-cell:hover {
    background-color: var(--bg-card); /* Heller beim Hover */
}

/* Mini Battleship */
.mini-bs-container {
    display: flex;
    justify-content: center;
	align-items: center;
    gap: 1rem;
    width: 100%;
	margin-top: 1rem;
}
.mini-bs-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    border: 1px solid var(--border-card);
    background-color: var(--border-card);
    width: 80px;
	height: 80px;
}
.mini-bs-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert Name über Grid */
}
.mini-bs-cell {
    background: var(--bg-card); /* Wasser */
    width: 100%;
    height: 100%;
}
.mini-bs-ship { 
	background-color: var(--text-secondary);
}
.mini-bs-hit { 
	background-color: #ef4444 !important;
}
.mini-bs-miss { 
	background-color: var(--bg-main-container); 
	opacity: 0.5; 
}
/* Wenn ein Schiff komplett zerstört ist */
.mini-bs-sunk { 
    background-color: #7f1d1d !important; /* Sehr dunkles Rot */
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    position: relative;
}
/* Kleines X oder Totenkopf für versenkte Schiffe */
.mini-bs-sunk::after {
    content: '✖';
    font-size: 8px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Stadt Land Fluss */
/* Hauptcontainer */
.categories-game-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    background-color: var(--bg-app);
}
.categories-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    padding-bottom: 80px; /* Platz für den Button */
}

/* Das HUD (Header) */
.game-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-card);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 10;
    border-radius: 0 0 16px 16px; /* Unten abgerundet */
}

/* Der Buchstabe */
.hud-letter-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hud-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 1px;
}
.hud-letter {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 800;
    color: var(--text-accent);
    text-shadow: 0 0 15px var(--text-accent); /* Glow Effekt */
}

/* Der Timer (Kreis oder Badge) */
.hud-timer-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-main-container);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border-card);
}
.hud-timer-icon { font-size: 1.2rem; }
.categories-timer {
    font-family: 'Courier New', monospace;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-primary);
    min-width: 60px;
    text-align: right;
}
.categories-timer.urgent {
    color: #ef4444;
    animation: pulse 0.5s infinite;
}

/* Eingabefelder (Cards) */
.categories-input-card {
    background: var(--bg-card);
    padding: 0.2rem 0;
    border-radius: var(--radius-button);
    border: 1px solid var(--border-card);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.categories-input-card:focus-within {
    border-color: var(--text-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.categories-input-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin: 0.75rem 1rem 0 1rem;
    font-weight: bold;
}
.categories-input-field {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 0.5rem 1rem 1rem 1rem;
    font-size: 1.1rem;
    font-weight: 500;
}
.categories-input-field:focus {
    outline: none;
}

/* Voting Buttons (Review Phase) */
.cat-review-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card); /* Theme Hintergrund */
    padding: 0.75rem;
    border-radius: var(--radius-button);
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-card); /* Theme Rand */
}
.cat-review-row.valid { 
    border-color: #22c55e; 
    box-shadow: inset 0 0 10px rgba(34, 197, 94, 0.1);
}
.cat-review-row.invalid { 
    border-color: #ef4444; 
    box-shadow: inset 0 0 10px rgba(239, 68, 68, 0.1);
    opacity: 0.8;
}
.cat-review-text {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--text-primary);
}
.cat-vote-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 1px solid var(--border-card);
    transition: all 0.2s;
    background: var(--bg-main-container);
}
.cat-vote-btn.active-yes { background: #22c55e; color: white; border-color: #22c55e; transform: scale(1.1); }
.cat-vote-btn.active-no { background: #ef4444; color: white; border-color: #ef4444; transform: scale(1.1); }

/* Käsekästchen (Dots & Boxes) */
.dab-grid {
    display: grid;
    /* Ein 4x4 Kästchen-Feld bedeutet 5 Punkte. Die Spalten sind: Punkt, Linie, Punkt, Linie, Punkt... */
    grid-template-columns: repeat(4, 12px 1fr) 12px;
    gap: 4px;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    padding: 1rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 1rem;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
}

.dab-dot {
    width: 12px;
    height: 12px;
    background-color: var(--text-secondary);
    border-radius: 50%;
    align-self: center;
    justify-self: center;
}

/* Klickbare Linien-Bereiche */
.dab-line-h { height: 24px; display: flex; align-items: center; cursor: pointer; position: relative; }
.dab-line-v { width: 24px; display: flex; justify-content: center; cursor: pointer; position: relative; justify-self: center; }

/* Die eigentliche sichtbare Linie (startet unsichtbar/klein) */
.dab-line-inner {
    background-color: var(--border-card);
    border-radius: 4px;
    transition: background-color 0.2s;
    position: absolute;
}
.dab-line-h .dab-line-inner { width: 100%; height: 6px; top: 9px; }
.dab-line-v .dab-line-inner { height: 100%; width: 6px; left: 9px; }

/* Hover-Effekte (nur wenn noch nicht gesetzt) */
.dab-line-h:not(.set):hover .dab-line-inner,
.dab-line-v:not(.set):hover .dab-line-inner {
    background-color: var(--text-accent);
    opacity: 0.5;
}

/* Eroberte Boxen */
.dab-box {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: 8px;
    transition: background-color 0.3s;
    aspect-ratio: 1/1; /* Macht sie quadratisch */
}

/* === MERGE LIFE (2048) === */
.ml-board-container {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    background-color: var(--bg-card);
    padding: 10px;
    border-radius: 12px;
    border: 2px solid var(--border-card);
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3);
    /* Verhindert Scrollen beim Wischen auf Mobile */
    touch-action: none; 
}

.ml-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 8px;
    aspect-ratio: 1/1;
}

.ml-cell {
    background-color: var(--bg-main-container);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    color: white;
    /* Basis-Transition für Farben */
    transition: background-color 0.15s ease-in-out;
}

.ml-icon { font-size: 2rem; line-height: 1; margin-bottom: 2px; }
.ml-text { font-size: 0.65rem; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.05em; }

/* Kachel Farben basierend auf Wert (Level) */
.ml-val-2 { background-color: #8B5A2B; } /* Kaffee */
.ml-val-4 { background-color: #D2691E; } /* Popcorn */
.ml-val-8 { background-color: #722F37; } /* Wein */
.ml-val-16 { background-color: #D2B48C; color: #333; text-shadow: none; } /* Teddy */
.ml-val-32 { background-color: #483D8B; } /* Gaming */
.ml-val-64 { background-color: #556B2F; } /* Trip */
.ml-val-128 { background-color: #4682B4; } /* Urlaub */
.ml-val-256 { background-color: #DAA520; } /* Ring */
.ml-val-512 { background-color: #FF69B4; } /* Hochzeit */
.ml-val-1024 { background-color: #2E8B57; } /* Haus */
.ml-val-2048 { background-color: #FF1493; box-shadow: 0 0 15px #FF1493; } /* Herz */
.ml-val-super { background-color: #FFD700; color: #000; text-shadow: none; box-shadow: 0 0 20px #FFD700; } /* Krone */

/* === MIND READER (Wort Spion) === */
.mr-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.mr-card {
    background-color: var(--bg-card);
    border: 2px solid var(--border-card);
    border-radius: 8px;
    padding: 10px 4px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    word-break: break-word;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

.mr-card:hover:not(.revealed):not(.locked) {
    transform: translateY(-3px) scale(1.05);
    border-color: var(--text-accent);
}

.mr-card.target-p1 {
    background-color: rgba(34, 197, 94, 0.2);
    border-color: #22c55e;
    color: #4ade80;
}

.mr-card.revealed-correct {
    background-color: #22c55e !important;
    border-color: #16a34a !important;
    color: white !important;
    transform: scale(0.95);
}

.mr-card.revealed-wrong {
    background-color: #ef4444 !important;
    border-color: #dc2626 !important;
    color: white !important;
    transform: scale(0.95);
}

/* === ZEN MATCH (Tile 3D) === */
.zm-board {
    position: relative;
    width: 100%;
    max-width: 350px;
    height: 350px;
    margin: 0 auto;
}
.zm-tile {
    position: absolute;
    width: 44px;
    height: 48px;
    background-color: var(--bg-card);
    border: 2px solid var(--border-card);
    border-bottom-width: 6px; /* Pseudo 3D Effekt */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    /* Die Transition macht die Bewegung zur Bank extrem flüssig */
    transition: left 0.4s ease-out, top 0.4s ease-out, transform 0.2s;
    user-select: none;
}
.zm-tile:hover:not(.locked) {
    transform: translateY(-4px);
    border-color: var(--text-accent);
}
/* Wenn eine Kachel blockiert ist (liegt was drüber) */
.zm-tile.locked {
    filter: brightness(0.5);
    cursor: not-allowed;
}
.zm-bank {
    display: flex;
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: 350px;
    margin: 20px auto 0 auto;
    background-color: rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 12px;
    border: 2px dashed var(--border-card);
    min-height: 70px;
}
/* Platzhalter in der Bank */
.zm-bank-slot {
    width: 44px;
    height: 48px;
    background-color: rgba(255,255,255,0.05);
    border-radius: 8px;
}
.zm-powerup-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 1.2rem;
    transition: transform 0.1s, background 0.2s;
    position: relative;
}
.zm-powerup-btn:active { transform: scale(0.9); }
.zm-powerup-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.zm-powerup-badge {
    position: absolute; top: -5px; right: -5px;
    background: var(--text-accent); color: white;
    font-size: 0.6rem; font-weight: bold;
    padding: 2px 6px; border-radius: 99px;
}
.zm-combo-container {
    width: 100%; height: 4px; background: rgba(255,255,255,0.1);
    border-radius: 2px; overflow: hidden; margin-bottom: 8px;
}
.zm-combo-bar {
    height: 100%; background: var(--text-accent);
    transition: width 0.1s linear; width: 0%;
}

/* Neon Runner 2.0 Warp Effect */
@keyframes speedWarp {
    0% { filter: contrast(1) hue-rotate(0deg); }
    50% { filter: contrast(1.5) hue-rotate(90deg); transform: scale(1.02); }
    100% { filter: contrast(1) hue-rotate(0deg); transform: scale(1); }
}
.neon-warp-active {
    animation: speedWarp 2s ease-in-out;
}

/* --- FANCY ARCADE HELP MODAL --- */
/* WICHTIGER FIX: Überschreibt die standard .modal z-index: 60 Regel */
#game-help-modal {
    z-index: 9999 !important; 
}

/* Verwandelt normale <b> Tags in stylische, leuchtende Badges im aktiven Theme */
#game-help-content b {
    display: inline-block;
    background: var(--bg-main-container);
    color: var(--text-primary);
    border: 1px solid var(--text-accent);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
    margin-top: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#game-help-content b:first-child { margin-top: 0; }

/* Verwandelt normale <i> Tags (Tipps) in abgesetzte Info-Boxen im aktiven Theme */
#game-help-content i {
    display: block;
    background: var(--bg-main-container);
    border: 1px solid var(--text-accent);
    color: var(--text-secondary);
    padding: 10px;
    border-radius: 8px;
    font-style: normal;
    font-size: 0.75rem;
    margin-top: 16px;
    line-height: 1.4;
}

/* === MERGE POP & BLOCK DROP (CANVAS GAMES) === */
.arcade-canvas-container {
    background-color: var(--bg-card);
    border: 2px solid var(--border-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.5);
    position: relative;
    /* Verhindert Scrollen beim Wischen */
    touch-action: none;
    margin: 0 auto;
}
.arcade-canvas-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.game-over-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Stop Button Area */
.categories-stop-btn-container {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    background: linear-gradient(to top, var(--bg-app) 80%, transparent);
    position: sticky;
    bottom: 0;
    z-index: 20;
}

/* Hilfsklasse für Animationen */
@keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }

/* Log Details Animation */
.log-chevron {
    font-size: 0.8rem;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Screen Shake Animation für Fehler & Explosionen (Sudoku, Merge Pop) */
@keyframes screenShake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-3px, 2px) rotate(-1deg); }
    50% { transform: translate(3px, -2px) rotate(1deg); }
    75% { transform: translate(-3px, -2px) rotate(0deg); }
}
.arcade-shake {
    animation: screenShake 0.3s cubic-bezier(.36,.07,.19,.97) both;
}

/* Merge Pop 2.0 */
.mp-evolution-bar {
    display: flex;
    justify-content: center;
    gap: 4px;
    background: rgba(0,0,0,0.3);
    padding: 6px;
    border-radius: 99px;
    font-size: 0.8rem;
    overflow-x: auto;
}
.mp-evolution-arrow {
    opacity: 0.5; font-size: 0.6rem; margin-top: 3px;
}
.mp-action-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: bold;
    transition: all 0.2s;
    box-shadow: 0 4px 0 rgba(0,0,0,0.3);
}
.mp-action-btn:active { 
    transform: translateY(4px);
    box-shadow: 0 0 0 rgba(0,0,0,0.3); 
}

/* Merge Life 2.0 - Joker Kachel */
.ml-val-joker {
    background: linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 200% 200%;
    animation: rainbow-shift 3s ease infinite;
    box-shadow: 0 0 15px rgba(255,255,255,0.5);
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* === SUDOKU === */
.sudoku-lives {
    display: flex; gap: 4px; font-size: 1.2rem;
}
.sudoku-note-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    height: 100%;
    font-size: 0.5rem;
    line-height: 1;
    color: var(--text-secondary);
    pointer-events: none;
}
.sudoku-note-cell {
    display: flex; align-items: center; justify-content: center;
}
.sudoku-highlight {
    background-color: rgba(59, 130, 246, 0.3) !important; /* Leichtes Blau für Smart Highlight */
}
.btn-note-mode {
    transition: all 0.2s;
}
.btn-note-mode.active {
    background-color: var(--text-accent);
    color: white;
    box-shadow: 0 0 10px var(--text-accent);
}

/* =================================================================
   GAME NAVIGATION BAR (Themed)
   ================================================================= */
.game-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    
    /* THEME MAGIC: Passt sich an Cotton Candy, Arcade etc. an */
    background-color: var(--bg-card); 
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    
    /* Kleiner Blur-Effekt für Modernität */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* Titel im Balken */
#game-view-title {
    color: var(--text-primary);
    text-align: center;
    /* Damit der Titel bei langen Namen nicht die Buttons quetscht */
    flex-grow: 1; 
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-danger {
    background-color: var(--color-danger);
    color: white;
    border-radius: var(--radius-button);
    padding: 0.75rem 1.5rem;
    font-weight: bold;
    border: none;
	position: relative;
	
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
	
	transition: all 0.1s ease-in-out;
	transform: translateY(0);
}
.btn-danger:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.3);
}
.btn-danger:active {
    transform: translateY(2px) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
/* Der "Beenden / Mülleimer" Button - dezentes Rot */
.btn-danger-subtle {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 0.5rem 1rem; /* Etwas mehr Padding für Klickbarkeit */
    border-radius: var(--radius-button);
    font-size: 0.85rem;
    font-weight: 700;
    position: relative;
    box-shadow: 0 3px 0 rgba(239, 68, 68, 0.2); /* Roter Schatten */
    transition: all 0.1s ease-in-out;
    transform: translateY(0);
}
.btn-danger-subtle:hover {
    background-color: #ef4444;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgba(239, 68, 68, 0.4); /* Stärkerer Schatten beim Hover */
}
.btn-danger-subtle:active {
    transform: translateY(2px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Spezieller Style für den Wunschlisten-Löschen Button */
.delete-wish-btn {
    background-color: rgba(153, 27, 27, 0.8);
    color: white;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-button);
    font-size: 0.875rem;
    flex: 1;
    border: none;
    position: relative;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.1s ease-in-out;
    transform: translateY(0);
}
.delete-wish-btn:hover {
    background-color: #b91c1c;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3);
}
.delete-wish-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

/* === ARCADE STATS (Highscore Header) === */
.arcade-stats-container {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.stats-score-bar {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    margin: 1rem 0;
    background: var(--bg-main-container);
}
.stats-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--bg-main-container);
    border: 1px solid var(--border-card);
    color: var(--text-secondary);
    margin-top: 4px;
	width: fit-content;
}
/* Grid-Header für stabile Ausrichtung */
.stats-header-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Links, Mitte (VS), Rechts */
    align-items: flex-end; /* Unten bündig */
    gap: 1rem;
    margin-bottom: 0.5rem;
    width: 100%;
}
/* Container für die Titel (Badges) */
.stats-badges-col {
    display: flex;
    flex-direction: column; /* Untereinander stapeln */
    gap: 4px;
    margin-top: 4px;
}
/* Spezifische Ausrichtung für Spieler 2 (Rechts) */
.stats-badges-col.right {
    align-items: flex-end; 
}
.stats-badges-col.right .stats-badge {
    margin-left: auto; 
}

.editor-tab-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.editor-tab-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-main-container); /* Leichter Hintergrund beim Hover */
}

.editor-tab-btn.active {
    color: var(--text-accent);
    border-bottom-color: var(--text-accent);
    background-color: transparent;
}

/* Überschreibt spezifische Styles für das Herz-Icon */
#save-date-idea-btn {
    transition: all 0.2s ease;
}
#save-date-idea-btn:hover {
    transform: scale(1.1);
}

/* Stellt sicher, dass Canvas sich an den Container anpasst */
canvas {
    max-width: 100%;
    max-height: 100%;
}

/* ==================================================
               UPDATE NOTIFICATION Toast
   ================================================== */
#notification-prompt-toast.toast-update {
    /* Nutzt den blickdichten App-Hintergrund des jeweiligen Themes */
    background: var(--bg-app) !important; 
    /* Lässt den Hintergrund sanft animieren (wie die App selbst) */
    background-size: 400% 400% !important;
    animation: aurora-gradient 25s ease infinite !important;
    
    border: 2px solid var(--text-accent); /* Rahmen in Akzentfarbe für die Aufmerksamkeit */
    box-shadow: 0 10px 25px rgba(0,0,0,0.5), var(--shadow-glow); /* Starker Schatten + Glow */
}
#notification-prompt-toast.toast-update p {
    color: var(--text-primary) !important; /* Primäre Textfarbe für den Titel */
}
#notification-prompt-toast.toast-update p:not(.font-bold) {
    color: var(--text-secondary) !important; /* Sekundäre Textfarbe für die Beschreibung */
}
#notification-prompt-toast.toast-update .text-2xl {
    animation: spin 2s linear infinite; /* Icon dreht sich */
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* ==============================================
               STATUS INDICATOR
   ============================================== */
/* 1. Alles etwas grauer machen, wenn offline (bleibt gleich) */
body.is-offline #app-view {
    filter: grayscale(0.8);
    transition: filter 0.5s ease;
}

/* Rote Leiste ganz oben am Bildschirm fixiert */
body.is-offline::before {
    content: '⚠️ Keine Internetverbindung';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ef4444; /* Rot */
    color: white;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.85rem;
    font-weight: bold;
    z-index: 9999; /* Über allem anderen (auch über Modals) */
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Wenn Offline: Buttons deaktivieren und ausgrauen */
body.is-offline .requires-online {
    opacity: 0.5;
    pointer-events: none; /* Klick nicht möglich */
    filter: grayscale(1);
    position: relative;
}

/* Kleines "X" Icon über dem Button anzeigen */
body.is-offline .requires-online::after {
    content: '📡'; /* Satelliten-Icon oder durchgestrichenes Wifi */
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 1rem;
    background: var(--bg-card);
    border-radius: 50%;
}

/* Verhindert Auto-Zoom auf iPhones */
@media screen and (max-width: 768px) {
    input, textarea, select {
        font-size: 16px !important; /* Mindestgröße */
    }
    
    /* Damit das Design nicht kaputt geht, passen wir das Padding ggf. an */
    .themed-input {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
}

/* =========================================
   Styling für den Benachrichtigungs-Schalter
   ========================================= */
.toggle-switch {
    position: relative;
    width: 3rem;  /* 48px */
    height: 1.5rem; /* 24px */
    border-radius: 9999px;
    background-color: var(--bg-main-container); /* Inaktiv: Dunkel/Theme-Hintergrund */
    border: 1px solid var(--border-card);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}
.toggle-switch:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--text-accent);
}
/* Der Knopf im Switch */
.toggle-knob {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 1.25rem; /* 20px */
    height: 1.25rem;
    background-color: var(--text-primary); /* Knopf-Farbe passend zum Text */
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* AKTIVER ZUSTAND (Klasse .active via JS) */
.toggle-switch.active {
    background-color: var(--text-accent); /* Hintergrund wird Akzentfarbe */
    border-color: var(--text-accent);
}
.toggle-switch.active .toggle-knob {
    transform: translateX(1.5rem); /* Knopf wandert nach rechts */
    background-color: white; /* Knopf wird weiß für Kontrast */
}
/* Status-Text Farben */
.text-status-active { color: var(--text-accent); }
.text-status-inactive { color: var(--text-secondary); }

/* Globale Scrollbar für Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px; /* Für horizontale Scrollbars */
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1); 
}
::-webkit-scrollbar-thumb {
    background-color: var(--border-card); /* Dezent */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-secondary); /* Heller beim Hover */
}
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-card) transparent;
}

/* Styling für Listen-Elemente (Decks, Kategorien) */
.list-item-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    border-radius: var(--radius-button);
    
    /* Theme Farben */
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    color: var(--text-primary);
    
    text-align: left;
    transition: all 0.2s ease;
}
.list-item-card:hover {
    background-color: var(--bg-main-container);
    border-color: var(--text-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}
.list-item-card .icon {
    color: var(--text-accent);
    flex-shrink: 0;
}

/* Styling für die kleinen Action-Buttons in Achievement Cards */
.btn-card-action {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem; /* text-xs */
    font-weight: 600;   /* font-semibold */
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
    
    /* Theme Farben */
    background-color: var(--bg-main-container); 
    color: var(--text-secondary);
    border: 1px solid var(--border-card);
}
.btn-card-action:hover {
    background-color: var(--bg-button-primary);
    color: var(--text-on-primary-btn);
    border-color: transparent;
    transform: translateY(-1px);
}


/* Fix für Bucket-Achievement Add Button */
.btn-dashed-3d {
    background-color: var(--bg-card);
    color: var(--text-secondary);
    
    /* Der eigentliche Rand: Gestrichelt rundherum */
    border: 2px dashed var(--border-card); 
    border-radius: var(--radius-button);
    
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    
    /* Der 3D-Effekt wird durch einen harten Schatten erzeugt, statt durch Border-Bottom */
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); 
    
    transition: all 0.1s ease;
    transform: translateY(0);
}
.btn-dashed-3d:hover {
    background-color: var(--bg-main-container);
    color: var(--text-primary);
    border-color: var(--text-accent); /* Rand leuchtet in Akzentfarbe */
    /* Schatten wird etwas größer beim Hover für "Lift"-Effekt */
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); 
    transform: translateY(-2px);
}
.btn-dashed-3d:active {
    /* Beim Klicken: Schatten weg und Button bewegt sich runter */
    transform: translateY(2px); 
    box-shadow: none; 
}

/* BUTTONS */
/* Theme-angepasster Hamburger Button */
.btn-hamburger-themed {
    color: var(--text-secondary);
    background-color: transparent;
    transition: all 0.2s ease;
    top: 0.5rem !important;  /* Etwas Abstand von oben */
    left: 0.5rem !important; /* Etwas Abstand von links */
    border-radius: var(--radius-button) !important; /* Statt rounded-md */
}

.btn-hamburger-themed:hover {
    color: var(--text-primary);
    background-color: var(--bg-card);
}

/* Theme-angepasster Profil-Edit Button (der runde Button auf dem Bild) */
.profile-edit-btn {
    background-color: var(--bg-button-primary); /* Theme Primär-Button Farbe */
    color: var(--text-on-primary-btn);
    transition: background-color 0.2s ease;
}
.profile-edit-btn:hover {
    background-color: var(--bg-button-primary-hover); /* Theme Hover Farbe */
}

/* Repariert den ungleichen linken Rand beim Autoren-Feld */
#note-quote-author {
    box-sizing: border-box; /* Wichtigste Zeile: Berechnet Rand nach innen */
    
    /* Erzwingt sauberen Rahmen */
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--border-card) !important;
    box-shadow: none; 
    width: 100%;
}

#note-quote-author:focus {
    border-color: var(--text-accent) !important;
    box-shadow: 0 0 0 1px var(--text-accent);
}

/* ============================================================
   FIX: INPUT NUMBER PFEILE ENTFERNEN (SPIN BUTTONS)
   Damit die Zahl im Counter-Feld perfekt mittig ist.
   ============================================================ */

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* =========================================
   Arcade Stats
   ========================================= */

/* Wir brauchen Hilfsklassen für Textfarben in JS */
.text-user-1 { color: var(--user-color-1); }
.text-user-2 { color: var(--user-color-2); }
.bg-user-1 { background-color: var(--user-color-1); }
.bg-user-2 { background-color: var(--user-color-2); }
.border-user-1 { border-color: var(--user-color-1); }
.border-user-2 { border-color: var(--user-color-2); }

/* Papierkorb Item */
.trash-item {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-button);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.trash-item:hover {
    background-color: var(--bg-main-container);
    border-color: var(--text-secondary);
}

.trash-item-info {
    flex-grow: 1;
    min-width: 0; /* Für Text-Overflow */
    margin-right: 1rem;
}

.trash-item-title {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trash-item-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.trash-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Wiederherstellen Button (Grün) */
.btn-restore {
    color: #4ade80;
    padding: 0.4rem;
    border-radius: 50%;
    transition: background 0.2s;
}
.btn-restore:hover {
    background-color: rgba(74, 222, 128, 0.1);
}

/* Endgültig Löschen Button (Rot) */
.btn-purge {
    color: #ef4444;
    padding: 0.4rem;
    border-radius: 50%;
    transition: background 0.2s;
}
.btn-purge:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

/* Undo Button State */
#note-undo-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Styling für den Text-Toggle-Button (Achievements, Archiv, Logbuch) */
.btn-toggle-text {
    font-weight: 600; /* semibold */
    color: var(--text-secondary); /* Theme Sekundärfarbe (grau/lila/grün) */
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-toggle-text:hover {
    color: var(--text-primary); /* Theme Primärfarbe (weiß/dunkel) */
    transform: translateY(-1px); /* Optional: Kleiner Lift-Effekt */
}

/* --- 1. MODAL POP-IN (Elastisches Öffnen) --- */
/* Wir überschreiben die Standard-Transition für das innere Modal-Div */
.modal > div {
    /* Startzustand (wird durch Animation überschrieben) */
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    
    /* Die Animation */
    animation: modalPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes modalPopIn {
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* --- 2. SHIMMER EFFECT (Lichtreflexion auf Karten) --- */
/* Kann auf .achievement-card, .bucket-card, .note-card angewendet werden */
.shimmer-card {
    position: relative;
    overflow: hidden; /* Wichtig, damit der Glanz nicht rausläuft */
    /* Z-Index Fix für Inhalt */
    z-index: 1;
}
/* Der Lichtbalken */
.shimmer-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        transparent 0%, 
        var(--shimmer-color) 50%, 
        transparent 100%
    );
    transform: skewX(-25deg); /* Schräg stellen */
    pointer-events: none; /* Klicks gehen durch */
    z-index: 2;
    transition: none; /* Reset */
}
/* Animation beim Hover */
.shimmer-card:hover::after {
    animation: shimmerPass 0.75s ease-in-out;
}
@keyframes shimmerPass {
    100% {
        left: 150%;
    }
}
/* PERFORMANCE FIX: Shimmer für abgeschlossene Karten deaktivieren */
.achievement-card.completed.shimmer-card::after {
    display: none;
    animation: none;
}
/* Auch den Hover-Effekt deaktivieren */
.achievement-card.completed.shimmer-card:hover::after {
    animation: none;
}

/* --- 3. PULSIERENDER FAB (Haupt-Button) --- */
/* Macht den Haupt-Button lebendiger, wenn er inaktiv ist */
#fab-container:not(.active) #fab-main-btn {
    animation: subtle-pulse 3s infinite ease-in-out;
}
@keyframes subtle-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--text-accent-rgb), 0.4); transform: scale(1); }
    50% { box-shadow: 0 0 0 10px rgba(var(--text-accent-rgb), 0); transform: scale(1.05); }
    100% { box-shadow: 0 0 0 0 rgba(var(--text-accent-rgb), 0); transform: scale(1); }
}

/* --- 4. CASCADING LIST ENTRY (Stagger) --- */
/* Basis-Klasse für Elemente, die nacheinander reinfliegen */
.stagger-item {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === MODERN MOTD BANNER === */
.motd-modern {
    width: 90%;
    max-width: 600px;
    margin: 10px auto 0 auto; /* Oben etwas Abstand, zentriert */
    border-radius: 12px;
    padding: 12px 16px;
    
    /* Modernes Glas/Gradient Design */
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    
    /* Animation beim Einblenden */
    animation: slideDownFade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* Flexbox für Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
     /* Positionierung */
    position: fixed; /* Fixiert, schwebt über Content */
    top: 10px; /* Abstand von oben */
    left: 50%;
    transform: translateX(-50%);
    z-index: 90; /* Unter Modal (100), über App Content */
}

/* Farbenvarianten (überschreiben Background) */
.motd-modern.bg-blue-600 { 
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(29, 78, 216, 0.9)); 
    border-color: rgba(96, 165, 250, 0.3);
}
.motd-modern.bg-orange-500 { 
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.9), rgba(234, 88, 12, 0.9));
    border-color: rgba(253, 186, 116, 0.3);
}
.motd-modern.bg-green-600 { 
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.9), rgba(21, 128, 61, 0.9));
    border-color: rgba(134, 239, 172, 0.3);
}
.motd-modern.bg-pink-500 { 
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.9), rgba(219, 39, 119, 0.9));
    border-color: rgba(249, 168, 212, 0.3);
}

.motd-close-btn {
    opacity: 0.6;
    transition: opacity 0.2s;
    font-size: 1.2rem;
    padding: 4px;
    line-height: 1;
    cursor: pointer;
    order: -1; 
    margin-right: auto; 
}
.motd-close-btn:hover { opacity: 1; }

.motd-content {
    flex-grow: 1;
    text-align: center;
    padding-right: 24px; /* Ausgleich für den linken Button, damit Text mittig bleibt */
}

@keyframes slideDownFade {
    from { 
        opacity: 0; 
        transform: translate(-50%, -20px); 
    }
    to { 
        opacity: 1; 
        transform: translate(-50%, 0); 
    }
}

/* ==================================================
   💎 ARCADE VITRINE (3D SHOWPIECES) - VOLL MODULAR
   ================================================== */
/* Wrapper für den 3D Hover-Effekt, trennt Form von Layout */
.showpiece-wrapper {
    perspective: 1000px;
    width: 100%;
    aspect-ratio: 3 / 4;
}

/* Äußerer Container: Hält den Rand (Border) als Hintergrundfarbe und den 3D-Effekt */
.showpiece-card {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 4px; /* 4px Rahmen-Dicke */
    background: #475569; /* Fallback Border-Farbe */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    transform-style: preserve-3d;
    cursor: default;
    border: none !important; /* Verhindert Stör-Rahmen vom alten CSS */
}

.showpiece-wrapper:hover .showpiece-card {
    transform: translateY(-10px) rotateX(8deg) rotateY(-8deg);
    box-shadow: -15px 20px 30px rgba(0,0,0,0.6);
    z-index: 20;
}

.showpiece-wrapper:hover .showpiece-icon {
    transform: scale(1.15) translateZ(40px); /* 3D Pop-Out */
}

/* Innerer Container: Hält die eigentliche Farbe, Form und Inhalte */
.showpiece-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    width: 100%;
    height: 100%;
    background: var(--bg-card, #1e293b); 
    z-index: 1;
    overflow: hidden; 
}
.showpiece-inner::before, .showpiece-inner::after {
    border-radius: 0 !important;
    clip-path: none !important;
}

/* --- 1. MODUL: FORMEN (Shapes) --- */
.shape-standard, .shape-standard .showpiece-inner { border-radius: 12px; }
.shape-sharp, .shape-sharp .showpiece-inner { border-radius: 0px; }

.shape-ticket, .shape-ticket .showpiece-inner { 
    clip-path: polygon(15% 0%, 85% 0%, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0% 85%, 0% 15%); 
}
.shape-shield, .shape-shield .showpiece-inner { 
    clip-path: polygon(50% 0%, 100% 10%, 100% 70%, 50% 100%, 0% 70%, 0% 10%); 
}
.shape-hexagon, .shape-hexagon .showpiece-inner {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.shape-diamond, .shape-diamond .showpiece-inner {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.shape-tombstone, .shape-tombstone .showpiece-inner {
    border-radius: 120px 120px 8px 8px;
}
.shape-octagon, .shape-octagon .showpiece-inner {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

/* --- 2. MODUL: HINTERGRÜNDE (Backgrounds) --- */
.bg-obsidian .showpiece-inner { background: radial-gradient(circle at top right, #334155, #020617); }
.bg-holographic .showpiece-inner {
    background: linear-gradient(135deg, #a855f7, #3b82f6, #22c55e, #a855f7);
    background-size: 300% 300%;
    animation: holoBgShift 6s ease infinite;
}
.bg-gold-foil .showpiece-inner { background: radial-gradient(ellipse at center, #fff9c4 0%, #ffd700 40%, #b8860b 100%); }
.bg-cyber-grid .showpiece-inner {
    background-color: #020617;
    background-image: 
        linear-gradient(rgba(0, 255, 242, 0.2) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(236, 72, 153, 0.2) 1px, transparent 1px);
    background-size: 20px 20px;
}
.bg-cosmic .showpiece-inner { background: radial-gradient(circle at bottom, #4c1d95, #0f172a 80%); }
.bg-nebula .showpiece-inner {
    background: linear-gradient(45deg, #ff00cc, #333399);
    background-size: 200% 200%;
    animation: holoBgShift 8s ease infinite;
}
.bg-circuit .showpiece-inner {
    background-color: #064e3b;
    background-image: radial-gradient(#10b981 1px, transparent 1px);
    background-size: 15px 15px;
}
.bg-crimson-velvet .showpiece-inner { background: radial-gradient(ellipse at top left, #991b1b, #450a0a); }
.bg-toxic-biohazard .showpiece-inner {
    background: radial-gradient(circle at center, #14532d, #022c22);
    background-image: repeating-radial-gradient(#16a34a 0, transparent 2px, transparent 10px);
}
.bg-pearl-marble .showpiece-inner { background: linear-gradient(120deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%); }
.bg-midnight-city .showpiece-inner { background: linear-gradient(to bottom, #1e1b4b, #312e81, #0f172a); }

@keyframes holoBgShift { 
    0% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
    100% { background-position: 0% 50%; } 
}

/* --- 3. MODUL: RÄNDER (Borders) --- */
/* Ränder für Arcade Items werden AUSSCHLIESSLICH durch die Hintergrundfarbe simuliert, 
   da normale CSS-Borders die "Clip-Path"-Formen zerstören würden! */
.showpiece-card.border-glass { background: rgba(255,255,255,0.2) !important; }
.showpiece-card.border-elegant { background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 100%) !important; }
.showpiece-card.border-transparent { background: transparent !important; }

/* Glow Effekte mit Drop-Shadow (Passt sich der Clip-Path Form an) */
.showpiece-card.border-glow-cyan { background: #00fff2 !important; filter: drop-shadow(0 0 10px rgba(0,255,242,0.6)); }
.showpiece-card.border-glow-gold { background: #ffd700 !important; filter: drop-shadow(0 0 10px rgba(218,165,32,0.6)); }
.showpiece-card.border-neon-pink { background: #ff2a85 !important; filter: drop-shadow(0 0 8px #ff2a85); }
.showpiece-card.border-neon-pink .showpiece-inner { box-shadow: inset 0 0 15px rgba(255, 42, 133, 0.4); }
.showpiece-card.border-dashed { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.6) 0, rgba(255,255,255,0.6) 6px, transparent 6px, transparent 12px) !important; }

/* Spezial-Ränder (Keine Masken für Arcade, nur Background & Drop-Shadow!) */
.showpiece-card.border-holo { background-image: linear-gradient(135deg, #a855f7, #3b82f6, #22c55e, #a855f7) !important; background-size: 300% 300% !important; animation: holoBorderShift 4s linear infinite; }
.showpiece-card.border-molten-lava { background-image: linear-gradient(90deg, #f97316, #ef4444, #b91c1c, #f97316) !important; background-size: 200% 200% !important; animation: holoBorderShift 2s linear infinite; filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5)); }
.showpiece-card.border-toxic-glow { background: #22c55e !important; filter: drop-shadow(0 0 12px rgba(34,197,94,0.8)); }
.showpiece-card.border-diamond-cut { background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #64748b 100%) !important; }
.showpiece-card.border-shadow-realm { background: #0f172a !important; filter: drop-shadow(0 0 15px rgba(88,28,135,0.9)); }

@keyframes holoBorderShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- 4. MODUL: EFFEKTE (Effects) --- */
/* Effekt 1: Holo Glare (Scharfe, holografische Lichtkante) */
.effect-holo-glare .showpiece-inner::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.6) 25%, rgba(255, 105, 180, 0.4) 28%, rgba(100, 149, 237, 0.4) 32%, transparent 35%);
    background-size: 300% 300%; background-position: 200% 200%;
    opacity: 0; transition: opacity 0.3s; z-index: 5; pointer-events: none;
    mix-blend-mode: color-dodge;
}
.showpiece-wrapper:hover .effect-holo-glare .showpiece-inner::after { 
    opacity: 1; animation: holoGlareSweep 2.5s ease-in-out infinite; 
}
@keyframes holoGlareSweep { 
    0% { background-position: 200% 200%; } 
    100% { background-position: -100% -100%; } 
}

/* Effekt 2: Cyber Pulse (Sci-Fi Scanner) */
.effect-cyber-pulse .showpiece-inner::after {
    content: ''; position: absolute; left: 0; right: 0; height: 15%; top: -20%;
    background: linear-gradient(to bottom, transparent, rgba(0, 255, 242, 0.6), transparent);
    box-shadow: 0 0 20px rgba(0,255,242,0.5);
    z-index: 5; pointer-events: none; opacity: 0;
    mix-blend-mode: screen; transition: opacity 0.3s;
}
.showpiece-wrapper:hover .effect-cyber-pulse .showpiece-inner::after {
    opacity: 1; animation: cyberScan 3s ease-in-out infinite;
}
@keyframes cyberScan { 
    0% { top: -20%; } 
    50% { top: 120%; } 
    100% { top: -20%; } 
}

/* Effekt 3: Stardust (Sanft pulsierende Lichtkugeln) */
.effect-stardust .showpiece-inner::before {
    content: ''; position: absolute; inset: -50%; z-index: 4; pointer-events: none;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.4) 2px, transparent 3px),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.3) 3px, transparent 4px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,0.5) 1.5px, transparent 2px);
    background-size: 50px 50px;
    opacity: 0; transition: opacity 0.5s;
    mix-blend-mode: overlay;
}
.showpiece-wrapper:hover .effect-stardust .showpiece-inner::before {
    opacity: 1; animation: stardustFloat 10s linear infinite;
}
@keyframes stardustFloat {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-50px) rotate(10deg); }
}

/* Effekt 4: Prismatic Foil (Animierter Regenbogen-Schimmer) */
.effect-prismatic-foil .showpiece-inner::after {
    content: ''; position: absolute; inset: -50%; z-index: 4; pointer-events: none;
    background: conic-gradient(from 0deg, transparent, rgba(255, 0, 0, 0.2), rgba(255, 165, 0, 0.2), rgba(255, 255, 0, 0.2), rgba(0, 128, 0, 0.2), rgba(0, 0, 255, 0.2), rgba(75, 0, 130, 0.2), rgba(238, 130, 238, 0.2), transparent);
    opacity: 0; transition: opacity 0.3s;
    mix-blend-mode: color-dodge;
}
.showpiece-wrapper:hover .effect-prismatic-foil .showpiece-inner::after {
    opacity: 1; animation: prismaticSpin 4s linear infinite;
}
@keyframes prismaticSpin {
    100% { transform: rotate(360deg); }
}

/* Effekt 5: Liquid Aurora (Sanfte, bewegliche Farbkleckse) */
.effect-liquid-aurora .showpiece-inner::after {
    content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: 
        radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.4) 0%, transparent 50%);
    background-size: 200% 200%; background-position: 0% 0%;
    opacity: 0; transition: opacity 0.3s;
    mix-blend-mode: screen; filter: blur(10px);
}
.showpiece-wrapper:hover .effect-liquid-aurora .showpiece-inner::after {
    opacity: 1; animation: auroraSway 5s ease-in-out infinite alternate;
}
@keyframes auroraSway {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* --- INHALTE --- */
.showpiece-content { 
    flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; width: 100%; 
}
.showpiece-icon { 
    font-size: 2.5rem; line-height: 1; 
    filter: drop-shadow(0 15px 15px rgba(0,0,0,0.6)); 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.showpiece-footer { 
    z-index: 10; width: 100%; text-align: center; padding-bottom: 0.5rem; margin-top: auto; 
    /* Basis-Padding für normale Formen */
    padding-left: 0.5rem; padding-right: 0.5rem;
}

/* FIX FÜR ABGESCHNITTENE TITEL */
.shape-shield .showpiece-footer { padding-bottom: 1.5rem; padding-left: 0.75rem; padding-right: 0.75rem; }
.shape-ticket .showpiece-footer { padding-bottom: 0.75rem; }
.shape-hexagon .showpiece-footer { padding-bottom: 1rem; }
.shape-diamond .showpiece-footer { padding-bottom: 1.5rem; padding-left: 1rem; padding-right: 1rem; }
.shape-octagon .showpiece-footer { padding-bottom: 0.75rem; }

.showpiece-title { 
    font-weight: 900; font-size: 0.65rem; color: white; text-transform: uppercase; 
    letter-spacing: 0.05em; text-shadow: 0 4px 10px rgba(0,0,0,0.8); line-height: 1.2; word-wrap: break-word; 
}

@media (min-width: 640px) {
    .showpiece-icon { font-size: 3rem; }
    .showpiece-title { font-size: 0.75rem; }
}

/* ==============================================
   DRIVER.JS (ONBOARDING) THEME OVERRIDES
   ============================================== */
.driver-popover {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--text-accent) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px var(--text-accent-glow) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.driver-popover-title {
    font-family: var(--font-heading) !important;
    font-size: 1.25rem !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
}

.driver-popover-description {
    font-family: var(--font-body) !important;
    color: var(--text-secondary) !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}

.driver-popover-footer button {
    background-color: var(--bg-main-container) !important;
    border: 1px solid var(--border-card) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-button) !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}

.driver-popover-footer button:hover {
    background-color: var(--text-accent) !important;
    color: white !important;
}

.driver-popover-arrow {
    border-color: var(--text-accent) !important; /* Passt den Pfeil an die Border-Farbe an */
}

/* =========================================
   TUTORIAL / ONBOARDING SPERRE
   ========================================= */
/* Blockiert manuelles Scrollen und Wischen, während das Tutorial läuft */
body.tour-active {
    overflow: hidden !important;
    touch-action: none !important;
}
/* Blockiert alle Klicks auf die App */
body.tour-active #app-view {
    pointer-events: none !important;
    user-select: none !important;
}
/* Zwingt den FAB und ALLE seine Buttons strikt dazu, nicht klickbar zu sein.
   Das '*', überschreibt die Inline-Styles von Driver.js, wenn der Button hervorgehoben wird. */
body.tour-active #fab-container,
body.tour-active #fab-container * {
    pointer-events: none !important;
}
/* Blockiert Klicks auf das Element, das im Tutorial gerade hervorgehoben wird! */
body.tour-active .driver-active-element,
body.tour-active .driver-active-element * {
    pointer-events: none !important;
}

/* =========================================
   LEVEL-UP ANIMATION STYLES
   ========================================= */
/* Deaktiviert den Blur-Effekt der App kurzzeitig, damit das Hexagon aus dem Container "ausbrechen" kann */
body.level-up-active #app-view {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Dunkles Overlay für den Fokus auf das Hexagon */
#level-up-overlay {
    position: fixed;
    inset: 0;
	width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    z-index: 80; /* Unter Modals, über App */
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}
#level-up-overlay.active {
    display: block;
    opacity: 1;
}
/* Hebt den Header-Bereich während der Animation über das Overlay */
.level-up-focus {
    position: relative;
    z-index: 85 !important; 
    background: var(--bg-main-container); /* Sorgt für einen leichten Glaseffekt hinter dem Badge */
    border-radius: var(--radius-container);
    box-shadow: 0 0 30px var(--shadow-glow); /* Lässt den Bereich leuchten */
}
/* Die schwebende Belohnungs-Blase (Diamant/Punkte) */
.reward-bubble {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--text-accent);
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    color: var(--text-primary);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 0 20px var(--shadow-glow);
    opacity: 0;
    z-index: 100;
    pointer-events: none;
    white-space: nowrap;
}
/* Das neue Glassmorphism Level-Up Panel in der Bildschirmmitte */
#level-up-panel {
    position: fixed;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 90;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-container);
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6), 0 0 30px var(--shadow-glow);
    width: 90%;
    max-width: 400px;
    pointer-events: none;
    display: none;
}
#level-up-panel.active {
    display: block;
    pointer-events: auto;
}

/* =========================================
   STATISTIK AKKORDEON THEME FIX
   ========================================= */
.stats-accordion-summary {
    color: var(--text-secondary);
}
.stats-accordion-summary:hover {
    color: var(--text-primary);
}

/* =========================================
   Public Settings Modal (Bilder Selektion)
   ========================================= */
.public-photo-item {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
    border: 3px solid transparent;
}
.public-photo-item:hover {
    transform: scale(1.05);
    z-index: 10;
}
.public-photo-item.selected {
    border-color: var(--text-accent);
    box-shadow: 0 0 15px var(--text-accent-glow);
    transform: scale(0.95);
}
.public-photo-item .checkmark {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: var(--text-accent);
    color: white;
}
.public-photo-item.selected .checkmark {
    opacity: 1;
    transform: scale(1);
}

/* ==================================================
   🎨 DATE CARD THEMES & EFFECTS (PRO)
   ================================================== */

/* Atmosphärische Hintergründe (Subtil, modern, elegant verblendet) */
.date-bg-romantic { background: radial-gradient(circle at top right, rgba(190, 18, 60, 0.25), var(--bg-card)); }
.date-bg-spooky { background: radial-gradient(circle at bottom left, rgba(88, 28, 135, 0.3), rgba(154, 52, 18, 0.15), var(--bg-card)); }
.date-bg-winter { background: radial-gradient(circle at top left, rgba(14, 165, 233, 0.2), var(--bg-card)); }
.date-bg-forest { background: radial-gradient(circle at center, rgba(4, 120, 87, 0.25), var(--bg-card)); }
.date-bg-night { background: radial-gradient(ellipse at top, rgba(30, 27, 75, 0.5), var(--bg-card)); }
.date-bg-sunset { background: linear-gradient(135deg, rgba(180, 83, 9, 0.2), rgba(190, 18, 60, 0.2), var(--bg-card)); }
.date-bg-ocean { background: radial-gradient(circle at bottom right, rgba(8, 145, 178, 0.25), var(--bg-card)); }
.date-bg-gold { background: radial-gradient(ellipse at center, rgba(218, 165, 32, 0.2), var(--bg-card)); }

/* Subtile Ränder & Glassmorphism für Cards (Nutzt strikt .date-border-layer um Arcade nicht zu brechen) */
.date-border-layer.border-glass { border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 8px 32px rgba(0,0,0,0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.date-border-layer.border-glow-cyan { border: 1px solid rgba(0, 255, 242, 0.3); box-shadow: inset 0 0 20px rgba(0, 255, 242, 0.05), 0 0 15px rgba(0, 255, 242, 0.1); }
.date-border-layer.border-glow-gold { border: 1px solid rgba(255, 215, 0, 0.3); box-shadow: inset 0 0 20px rgba(218, 165, 32, 0.05), 0 0 15px rgba(218, 165, 32, 0.1); }
.date-border-layer.border-dashed { border: 2px dashed rgba(255, 255, 255, 0.2); }
.date-border-layer.border-elegant { border: 1px solid rgba(255,255,255,0.05); border-top: 1px solid rgba(255,255,255,0.2); box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.date-border-layer.border-transparent { border: 1px solid transparent; }
.date-border-layer.border-neon-pink { border: 1px solid rgba(236, 72, 153, 0.6); box-shadow: inset 0 0 15px rgba(236, 72, 153, 0.2), 0 0 15px rgba(236, 72, 153, 0.3); }

/* Komplexe Gradient/Glow-Ränder für Date-Karten */
.date-border-layer.border-holo { background-image: linear-gradient(135deg, #a855f7, #3b82f6, #22c55e, #a855f7); background-size: 300% 300%; animation: holoBorderShift 4s linear infinite; }
.date-border-layer.border-molten-lava { background-image: linear-gradient(90deg, #f97316, #ef4444, #b91c1c, #f97316); background-size: 200% 200%; animation: holoBorderShift 2s linear infinite; filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5)); }
.date-border-layer.border-toxic-glow { background: #22c55e; filter: drop-shadow(0 0 12px rgba(34,197,94,0.8)); }
.date-border-layer.border-diamond-cut { background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #64748b 100%); }
.date-border-layer.border-shadow-realm { background: #0f172a; filter: drop-shadow(0 0 15px rgba(88,28,135,0.9)); }

/* Masken-Trick: Höhlt die Mitte der Ebene aus, sodass nur ein Rand bleibt (NUR für Date-Karten!) */
.date-border-layer.border-holo,
.date-border-layer.border-molten-lava,
.date-border-layer.border-toxic-glow,
.date-border-layer.border-diamond-cut,
.date-border-layer.border-shadow-realm {
    border: none !important;
    border-radius: inherit;
    padding: 3px; /* Das bestimmt die Rahmen-Dicke */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

/* Basis für den FX Layer (100% Abdeckung erzwingen) */
.date-fx-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1; 
}

/* Partikel Basis */
.fx-particle {
    position: absolute;
    will-change: transform, opacity;
    /* Verhindert, dass Emojis markiert werden können */
    user-select: none; 
}

/* === NEU: WASSERZEICHEN-DEKO EMOJIS === */
/* Wie im Arcade Game-Help-Modal: Groß, im Hintergrund, fast transparent, entsättigt */
.theme-deco-watermark {
    position: absolute;
    font-size: 6rem; /* Sehr groß */
    opacity: 0.08;   /* Sehr transparent (Wasserzeichen) */
    z-index: 0;      /* Ganz nach hinten */
    pointer-events: none;
    filter: grayscale(100%) blur(1px); /* Nimmt die Farbe raus, passt sich dem BG an */
    user-select: none;
}

.theme-deco-tr {
    top: -20px;
    right: -20px;
    transform: rotate(15deg);
}

.theme-deco-bl {
    bottom: -20px;
    left: -20px;
    transform: rotate(-15deg);
}

/* === SCHNEE EFFEKT (Angepasst für 100% Verteilung) === */
@keyframes snowFall {
    /* Wir nutzen vw/vh falls %, nicht greifen, oder bleiben bei %, aber zwingen das Elternelement */
    0% { transform: translate3d(var(--start-x), -20px, 0) rotate(0deg); opacity: 0; }
    10% { opacity: var(--max-opacity); }
    80% { opacity: var(--max-opacity); }
    100% { transform: translate3d(var(--end-x), calc(100% + 20px), 0) rotate(var(--rot)); opacity: 0; }
}
.fx-snow {
    background: radial-gradient(circle at center, rgba(255,255,255,1) 0%, rgba(255,255,255,0.4) 100%);
    border-radius: 50%;
    animation: snowFall var(--duration) linear infinite;
    animation-delay: var(--delay);
}
/* Schneedecke unten */
.fx-snow-ground {
    position: absolute;
    bottom: -10px; left: -10%; width: 120%; height: 30px;
    background: white;
    filter: blur(8px);
    opacity: 0.4;
    border-radius: 50% 50% 0 0;
    z-index: 1;
    pointer-events: none;
}

/* === HERBSTBLÄTTER === */
@keyframes leafFall {
    0% { transform: translate3d(var(--start-x), -30px, 0) rotate3d(1, 1, 1, 0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate3d(var(--end-x), calc(100% + 30px), 0) rotate3d(1, 2, 0.5, var(--rot)); opacity: 0; }
}
.fx-leaf {
    animation: leafFall var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
    font-size: var(--size);
}

/* === GLÜHWÜRMCHEN === */
@keyframes fireflyFloat {
    0% { transform: translate(var(--start-x), var(--start-y)) scale(0.8); opacity: 0; box-shadow: 0 0 5px 1px #fef08a; }
    20% { opacity: 1; box-shadow: 0 0 15px 3px #fef08a; }
    50% { transform: translate(var(--end-x), var(--end-y)) scale(1.2); opacity: 0.5; box-shadow: 0 0 8px 1px #fef08a; }
    80% { opacity: 1; box-shadow: 0 0 15px 3px #fef08a; }
    100% { transform: translate(var(--start-x), var(--start-y)) scale(0.8); opacity: 0; box-shadow: 0 0 5px 1px #fef08a; }
}
.fx-firefly {
    background: #fef08a;
    border-radius: 50%;
    animation: fireflyFloat var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
}

/* === HERZEN === */
@keyframes heartFloat {
    0% { transform: translate3d(var(--start-x), calc(100% + 30px), 0) rotate(var(--start-rot)); opacity: 0; }
    10% { opacity: 0.8; }
    80% { opacity: 0.8; }
    100% { transform: translate3d(var(--end-x), -30px, 0) rotate(var(--end-rot)); opacity: 0; }
}
.fx-heart {
    animation: heartFloat var(--duration) ease-in infinite;
    animation-delay: var(--delay);
    font-size: var(--size);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* === FLEDERMÄUSE === */
@keyframes batFly {
    0% { transform: translate(var(--start-x), calc(100% + 30px)) scale(var(--scale)); opacity: 0; }
    10% { opacity: 1; }
    25% { transform: translate(var(--mid-x1), 75%) scale(calc(var(--scale) * 1.2)); }
    50% { transform: translate(var(--mid-x2), 50%) scale(var(--scale)); }
    75% { transform: translate(var(--mid-x3), 25%) scale(calc(var(--scale) * 0.8)); }
    90% { opacity: 1; }
    100% { transform: translate(var(--end-x), -30px) scale(var(--scale)); opacity: 0; }
}
.fx-bat {
    animation: batFly var(--duration) linear infinite;
    animation-delay: var(--delay);
    filter: drop-shadow(0 5px 8px rgba(0,0,0,0.8));
}

/* === STERNE (Funkeln) === */
@keyframes starTwinkle {
    0%, 100% { transform: scale(0.5); opacity: 0.1; }
    50% { transform: scale(1.2); opacity: 1; filter: drop-shadow(0 0 5px #fef08a); }
}
.fx-star {
    animation: starTwinkle var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
    font-size: var(--size);
}

/* === BLASEN (Floating) === */
@keyframes bubbleFloat {
    0% { transform: translate(var(--start-x), calc(100% + 20px)) scale(0.8); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translate(var(--end-x), -20px) scale(1.2); opacity: 0; }
}
.fx-bubble {
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.4);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(255,255,255,0.1));
    box-shadow: inset 0 0 10px rgba(255,255,255,0.5);
    animation: bubbleFloat var(--duration) ease-in infinite;
    animation-delay: var(--delay);
}

/* === MUSIKNOTEN === */
@keyframes musicFloat {
    0% { transform: translate(var(--start-x), calc(100% + 20px)) rotate(-10deg) scale(0.8); opacity: 0; }
    20% { opacity: var(--opacity, 0.8); }
    80% { opacity: var(--opacity, 0.8); }
    100% { transform: translate(var(--end-x), -20px) rotate(20deg) scale(1.2); opacity: 0; }
}
.fx-music {
    animation: musicFloat var(--duration) ease-in infinite;
    animation-delay: var(--delay);
    font-size: var(--size);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}