body {
    background: #41522A;
    color: #888;
    font-family: 'Courier New', monospace;
    padding: 40px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* Die normale Kachel */
.card {
    background: #0a0a0a;
    border: 1px solid #222;
    padding: 20px;
    position: relative;
    /* Das hier macht die Bewegung weich: */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: crosshair; /* Optional: Ein Fadenkreuz als Mauszeiger */
}

/* Der Effekt beim Drüberfahren (Hover) */
.card:hover {
    background: #111;
    border-color: #00ff00; /* Deine Akzentfarbe */
    
    /* Ein sanftes grünes Glühen nach außen */
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4), 
                inset 0 0 10px rgba(0, 255, 0, 0.1);
    
    /* Die Kachel kommt dem Nutzer leicht entgegen */
    transform: translateY(-5px) scale(1.01);
    
    /* Der Text darin soll auch heller werden */
    color: #fff;
}

/* Optional: Ein kleiner Puls-Effekt für die Tags */
.tag {
    font-size: 10px;
    color: #00ff00;
    border: 1px solid #00ff00;
    padding: 2px 5px;
    text-transform: uppercase;
    transition: background 0.3s;
}

.card:hover .tag {
    background: rgba(0, 255, 0, 0.2);
    box-shadow: 0 0 8px #00ff00;
}

.tag {
    font-size: 10px;
    color: #00ff00;
    border: 1px solid #00ff00;
    padding: 2px 5px;
    text-transform: uppercase;
}

h3 { color: #eee; margin: 15px 0 5px 0; text-transform: uppercase; }

iframe {
  width: 100%;
  border: 0;
  margin-top: 15px;
  background: transparent; /* Verhindert weißes Blinken beim Laden */
  filter: contrast(0.9) brightness(0.9); /* Macht den Player etwas 'dystopischer' */
}

/* Wenn du mit der Maus drüberfährst, wird der Player klarer */
.card:hover iframe {
  filter: contrast(1) brightness(1);
}

.rating {
  color: #555; /* Standardfarbe für leere Sterne */
  font-size: 14px;
  letter-spacing: 2px;
}

/* Wir stylen die Sterne so, dass sie grün leuchten, wenn die Karte gehovert wird */
.card:hover .rating {
  color: #00ff00;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
}
