/* Reset für den gesamten body */
body .main-container {
    margin: 0 auto;
    width: 80%;
}
body {
    margin: 0;
    padding: 0;
    background: radial-gradient(circle at top, #0f172a, #020617);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
}

/* Header Container */
.header-container {
    margin: 0;
    padding: 0;
    background-color: #5c5c5c;
    width: 100%;
}

/* Hintergrund Container */
.background-container {
    position: relative;
    overflow: hidden;
    background-color: #993300; /* Standardfarbe, falls kein Bild vorhanden ist */
    margin: 0 auto;
    display: flex; /* Flexbox aktivieren */
    flex-direction: column; /* Vertikale Anordnung der inneren divs */
    justify-content: flex-start; /* Optional: Bestimmt die vertikale Ausrichtung (oben) */
    align-items: center; /* Optional: Bestimmt die horizontale Ausrichtung (zentriert) */
}

/* Hintergrundbild anpassen */
.background-container img.background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%; /* Füllt den Bereich, aber nicht mehr als nötig */
    height: auto;
    transform: translate(-50%, -50%);
    filter: brightness(50%); /* Optional: Verdunkelt das Hintergrundbild */
    z-index: -1; /* Setzt das Bild hinter den Inhalt */
}

@media (max-width: 1179px) {
    .background-container {
        height: auto; /* 🔥 Passt sich automatisch dem Inhalt an */
        min-height: 550px; /* Optional: Falls du trotzdem eine Mindesthöhe willst */
    }

.background-container img.background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800%; /* Füllt den Bereich, aber nicht mehr als nötig */
    height: auto;
    transform: translate(-50%, -50%);
    filter: brightness(50%); /* Optional: Verdunkelt das Hintergrundbild */
    z-index: -1; /* Setzt das Bild hinter den Inhalt */
}

}


/* Spieldetails */
.details-table {
    width: 80%;
    background: transparent;
    border: none;
    color: white;
    font-size: 2em;
    padding-left: 8px;
}

/* Standardlayout für große Bildschirme */
.details-table2 {
    display: flex;
    gap: 20px;
    flex-direction: row; /* Standard: nebeneinander */
    width: 80%;
    background: transparent;
    border: none;
    color: white;
    font-size: large;
    padding-left: 8px;
    justify-content: space-between;
}

/* Standardbreiten für große Bildschirme */
.details-table2 > div {
    flex: 1;
    min-width: 0; /* wichtig gegen overflow */
    padding: 10px;
}

/* LEFT (Cover – feste Breite) */
.details-table2 > div:nth-child(1) {
    flex: 0 0 180px; /* 🔥 exakt Cover-Breite */
}

/* MIDDLE + RIGHT teilen sich den Rest */
.details-table2 > div:nth-child(2),
.details-table2 > div:nth-child(3) {
    flex: 1;        /* 🔥 beide gleich groß */
    min-width: 0;   /* 🔥 verhindert overflow */
}

/* RIGHT SIDEBAR */

/* ✅ **Mobile Ansicht: Untereinander + 100% Breite** */
@media (max-width: 1179px) {
    .details-table2 {
        flex-direction: column; /* 🔥 Stapelt die divs UNTEREINANDER */
        width: 100%; /* Ganze Breite nutzen */
align-items: center; /* 🔥 Zentriert die divs horizontal */
        display: flex; /* Flexbox aktivieren */
    }

    .details-table2 > div {
        width: 80%; /* 🔥 Jedes div bekommt 100% */
	align: center;
        margin: 0 auto 10px auto; /* 🔥 Zentriert durch 'auto' */
    }
.details-table2 > div:nth-child(1) { width: 80%; }
.details-table2 > div:nth-child(2) { width: 80%; }
.details-table2 > div:nth-child(3) { width: 80%; }

}


/* Standardmäßig ausblenden */
.mobile-only {
    display: none;
}

/* Nur auf Mobilgeräten (< 768px) anzeigen */
@media (max-width: 1179px) {
    .mobile-only {
        display: block; /* Oder flex, je nach Layout */
    }
}

/* Standardmäßig anzeigen */
.normal-device-only {
    display: block;
}

/* Auf Mobilgeräten (max. 768px) ausblenden */
@media (max-width: 768px) {
    .normal-device-only {
        display: none;
    }
}




.title-right-con {
    background: var(--card);
backdrop-filter: blur(14px);
border: 1px solid var(--border);
    display: flex;
    flex-direction: column; /* Stellt die divs untereinander */
    gap: 20px;
    align-items: stretch; /* Sorgt dafür, dass die divs die gesamte Breite nutzen */
    
    padding: 20px; /* Innenabstand */
    margin: 10px 0; /* Abstand nach oben und unten */
    border-radius: 12px; /* Abgerundete Ecken */
}

.title-rating-con {
  display: flex; /* Flexbox aktivieren */
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 4px;
  margin: 0px;
  padding-left: 0px;
  padding-right: 0px;
  width: 100%;
  min-height: 100px;
  overflow: hidden; /* 🔥 verhindert Layout-Break */
  min-width: 0; /* 🔥 falls noch nicht gesetzt */
  gap: 20px;
}

.title-rating-con table {
    width: 100%;
    table-layout: fixed; /* 🔥 verhindert Wachstum */
}

.innerrating {
  display: flex; /* Flexbox für innere Elemente */
  flex-direction: column; /* Elemente untereinander anordnen */
  align-items: center; /* Horizontale Zentrierung */
  justify-content: center; /* Vertikale Zentrierung */
  border: 1px solid rgb(255, 255, 255);
  width: 50%; /* Breite anpassen */
  height: 100%; /* Höhe auf 100% setzen, um vertikal zu zentrieren */
}

th, td {
    padding: 8px;
    text-align: center;
    word-break: break-word;
}


.cover-image {
    max-width: 100%; /* Bild passt sich der Containerbreite an */
    height: auto; /* Höhe wird proportional angepasst */
}

.cover-image-container {
    justify-content: center; /* Zentriert horizontal */
    align-items: center; /* Zentriert vertikal */
}

/* Plattformen Container */
.platforms-container {
    width: 100%;
    background: #5C5C5C;
    text-align: center;
    margin: 0 auto;
}

.platforms-table {
    width: 80%;
    margin: 0 auto;
    color: white;
    border-collapse: collapse;
}

/* Bewertungsbereich */
.rating-container {
    margin-top: 20px;
    margin: 0 auto;
}

/* Navigation */
.navigation-container {
    position: sticky;
    top: 0;
    z-index: 500;
    background: rgba(2,6,23,0.9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}

/* Menü-Wrapper */
.navigation-container {
    position: sticky;
    top: 0;
    z-index: 500;
    background: rgba(2,6,23,0.9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}

/* Button */
.navigation-content button {
    padding: 10px 20px;
    background-color: #ee7600;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    transition: background 0.3s ease;
}

/* Button Hover */
.navigation-content button:hover {
    background-color: #ff8c00;
}

/* Hamburger-Menü für kleine Bildschirme */
.menu-icon {
    display: none;
    font-size: 26px;
    cursor: pointer;
    background: none;
    color: white;
    border: none;
    padding: 10px;
}

/* Responsive Anpassungen */
@media (max-width: 1179px) {
    .navigation-content {
        display: none;
        flex-direction: column;
        align-items: center;
        width: 100%;
        background: rgba(2,6,23,0.95);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--border);
        padding: 10px 0;
    }

    .navigation-content.show {
        display: flex;
    }

    .navigation-container {
        justify-content: space-between;
        padding: 10px 20px;
    }

    .menu-icon {
        display: block;
    }
}



/* Aktiver Tab */
.navigation-content a.active-tab {
    color: #ee7600;  /* Textfarbe für aktiven Tab */
    font-weight: bold;  /* Fett für aktiven Tab */
    text-decoration: underline;  /* Unterstrichen für aktiven Tab */
}

/* Standardmäßig weißen Text */
.navigation-content a {
    color: white;
}

/* Tab-Inhalte */
.content-area {
    width: 80%;
    margin: 0 auto;
}

.tab-content {
    display: none;
    border-radius: 5px;
    margin-top: 20px;
}

.tab-content.active {
    display: block;
}

.navigation-content a.active {
    font-weight: bold;
    color: #ee7600; /* Oder eine andere Farbe */
}

/* Styling für jedes der 12 Divs */
.right-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center; /* 🔥 vertikal */
}



#overview h2 {
    color: #993300;
    font-size: 1.8em;
}

#overview ul {
    list-style-type: none;
    padding: 0;
}

#overview ul li {
    font-size: 1.2em;
    margin: 8px 0;
}

/* Sterne-Bewertung */
.stars {
    direction: rtl; /* Reversed Order für Anzeige */
}

.stars input {
    display: none; /* Versteckt die Radio-Buttons */
}

.stars label {
    font-size: 25px;
    color: #ccc;
    cursor: pointer;
}

/* Hover und Auswahl */
.stars label:hover,
.stars label:hover ~ label,
.stars input:checked ~ label {
    color: gold;
}







.numbers {
    display: flex;
    flex-direction: row-reverse; /* Reihenfolge umdrehen */
    gap: 5px;
}

.numbers input {
    display: none; /* Versteckt die Radio-Buttons */
}

.numbers label {
    font-size: 20px;
    color: #ccc;
    cursor: pointer;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    min-width: 25px;
}

/* Jetzt von links nach rechts einfärben */
.numbers label:hover,
.numbers label:hover ~ label {
    color: gold;
    border-color: gold;
}

/* Klick-Effekt: Zahl wird markiert */
.numbers input:checked ~ label {
    color: gold;
    border-color: gold;
    font-weight: bold;
}






















#age-ratings table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#age-ratings th, #age-ratings td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

#age-ratings th {
    background-color: #f4f4f4;
}



#links {
    text-align: center; 
    vertical-align: middle;
}


/* Stellt sicher, dass der Container den gesamten vertikalen Raum einnimmt */
.developer-container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertikal zentrieren */
padding-top: 0px;
}

.developer-container p {
    margin: 5px 0;           /* Abstand zwischen den Entwicklern */
padding-top: 0px;
}


.info-box {
    background: rgba(2,6,23,0.9);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.info-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.info-box strong {
    display: block;
    margin-bottom: 10px;
    font-size: 1.1rem;
    color: #ffffff;
}



.containerneu {
    width: 100%;
    background: var(--card);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    margin: 15px 0;
    transition: 0.3s;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    padding-top: 20px;
}

.containerneu:hover {
    transform: translateY(-4px);
}


.divider {
    width: calc(100% + 40px); /* 100% + doppeltes Padding (20px links + 20px rechts) */
    height: 5px;
    background-color: lightgray;
    margin-left: -20px;
    margin-right: -20px;
}



.release-item {
	padding-bottom: 5px;
	padding-top: 5px;
}





.pill {
    display: inline-block;
    padding: 6px 12px;
    margin: 4px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    color: white;
    transition: all 0.2s ease;
}

.pill:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Plattform Farben */
.pill.pc { background: #444; }
.pill.playstation { background: #003791; }
.pill.xbox { background: #107c10; }
.pill.switch { background: #e60012; }
.pill.nintendo { background: #e60012; }
.pill.default { background: #666; }





#overview .overview-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

#overview .left-content {
    width: 100%;
    border-radius: 8px;
}

#overview .right-content {
    width: 0%;
    border-radius: 8px;
}






.similar-games-container {
    text-align: center;
    margin: 40px 0;
}

.similar-game {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: 0.3s;
}

.similar-game:hover {
    transform: scale(1.05);
}

/* Spezifischer Selektor für Bilder in .similar-game, um das globale img zu überschreiben */
.similar-game img {
    width: 100%;
    height: auto;
    max-height: 352px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 0; /* Entfernt den margin-bottom für diese Bilder */
}

.similar-game p {
    margin: 10px 0 0;
    font-size: 16px;
}

.similar-game a {
    text-decoration: none;
  
}

.title {
    width: 80% !important;  /* Erzwingt die Anwendung der Regel */
    text-align: left;
    box-sizing: border-box;
}




























/* ===== WISHLIST CARD DESIGN ===== */

/* ===== ACTION BUTTONS (Wishlist / Collection / Completed) ===== */

.wishlist {
    gap: 12px;
    flex-wrap: wrap;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 38px;
    padding: 0 14px;

    gap: 8px;

    border-radius: 999px;
    background: #161b22;
    border: 1px solid #2a2f36;

    font-size: 0.85rem;
    color: #bbb;

    transition: all 0.2s ease;
}

.action-btn:hover {
    background: #21262d;
    transform: translateY(-2px);
    color: #fff;
}

/* ICON */
.action-btn i {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 0.95rem;
    opacity: 0.85;
}

/* TEXT */
.action-btn span {
    display: flex;
    align-items: center;
}

/* COUNT BADGE */
.action-btn .count {
    background: #333;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #aaa;
}


/* ===== ACTIVE STATES ===== */

/* Wishlist */
.action-btn.wishlist.active {
    background: #ff4d6d;
    border-color: #ff4d6d;
    color: white;
}

.action-btn.wishlist.active .count {
    background: rgba(255,255,255,0.2);
    color: white;
}

/* Collection */
.action-btn.collection.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #3b82f6;
    color: white;
    box-shadow: 0 0 8px rgba(59,130,246,0.5);
}

/* Completed */
.action-btn.completed.active {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
}

/* CLICK FEEDBACK */
.action-btn:active {
    transform: scale(0.96);
}





















/* ===== design ===== */

.dlc-container {
    display: flex;
    flex-direction: column; /* 🔥 untereinander */

    gap: 12px;

    background: linear-gradient(145deg, rgba(15,23,42,0.8), rgba(2,6,23,0.9));
    backdrop-filter: blur(14px);

    border: 1px solid var(--border);
    border-radius: 16px;

    padding: 20px;

    font-size: large;
    line-height: 1.5;
}

/* Einzelne Box */
.dlc-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 12px;
    transition: 0.2s;
    overflow: visible;
}

.dlc-item:hover {
    background: rgba(255,255,255,0.06);
}

/* Titel */
.dlc-title {
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Inhalt */
.dlc-content {
    font-size: 1rem;
    color: white;
}

/* Flex für Pills */
.dlc-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    max-width: 100%;
}

/* Pills */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 4px 10px;
    border-radius: 999px;

    background: rgba(255,255,255,0.08);
    color: white;
    text-decoration: none;
    font-size: 0.85rem;

    transition: 0.2s;
}

.pill:hover {
    background: rgba(255,255,255,0.15);
}

/* SVG Icons */
.pill-icon svg {
    width: 16px;
    height: 16px;
}





/* Container */
.rating-box-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
}

/* Score Circle */
.score-circle {
    width: 60px;
    height: 60px;
    border-radius: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    font-weight: bold;
    color: white;
}

/* Farben wie Metacritic */
.score-circle.green {
    background-color: #66cc33;
}

.score-circle.yellow {
    background-color: #ffcc33;
    color: black;
}

.score-circle.red {
    background-color: #ff3333;
}

/* Text daneben */
.score-info {
    text-align: left;
}

.score-label {
    font-size: 0.9rem;
    color: var(--muted);
}

.score-count {
    font-size: 0.85rem;
    color: #aaa;
}










.spinner {
    border: 4px solid #f3f3f3; /* Helles Grau */
    border-top: 4px solid #3498db; /* Blau */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


















.media-overview {
    width: 80%;
    margin: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
}

.media-content {
    display: flex;
    flex-wrap: wrap; /* Umbrüche ermöglichen */
    gap: 10px;
    justify-content: center;
}

.screenshot {
    width: calc(25% - 10px); /* 4 Bilder pro Reihe */
    max-width: 370px; /* Begrenzung der Bildgröße */
    height: auto;
    border-radius: 5px;
}

/* Nach jeder 4. Spalte soll ein Umbruch erzwungen werden */
.row-break {
    flex-basis: 100%;
    height: 0;
}




.video-row {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.video-item {
    width: 200px;
    height: auto;
}


.video-container {
        flex-wrap: wrap;  /* Bricht nach max. 4 Videos pro Zeile */
    gap: 10px; /* Abstand zwischen den Videos */
    justify-content: center; /* Zentriert die Videos */
    margin: 0 auto; /* Zentriert den Container */
}





.playtime-section {
    width: 100%; /* 🔥 nimmt volle Breite der Sidebar */
    padding: 20px;
    background: linear-gradient(145deg, rgba(15,23,42,0.8), rgba(2,6,23,0.9));
    backdrop-filter: blur(16px);
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}





.right-item2 {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 15px;
}

.release-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 6px 0;
}

.release-row strong {
    color: white;
}

.release-row span {
    color: #aaa;
    font-size: 0.9rem;
}



a {
    color: var(--accent);
}

a:hover {
    color: #60a5fa;
}

a:active {
    color: #FA8258;  /* Aktiv (wenn der Link angeklickt wird) */
}










.bundle-container {
    display: flex;
    overflow-x: auto; /* Ermöglicht horizontales Scrollen */
    gap: 10px;  /* Abstand zwischen den Spielen */
    padding: 20px 0; /* Padding oben und unten */
}

.bundle-game {
    min-width: 200px;  /* Breite für jedes Spiel */
    flex-shrink: 0; /* Verhindert das Schrumpfen der Spiel-Container */
    text-align: center;
}

.bundle-games {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.game-cover-container {
    position: relative;
    width: 150px;
    height: 200px;
    overflow: hidden;
}

.game-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.game-title {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-cover-container:hover .game-title {
    opacity: 1;
}

.game-cover-container:hover .game-cover {
    opacity: 0.3; /* Makes the cover image semi-transparent when hovered */
}




.ratings-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center; /* Zentriert die Elemente */
}

.rating-box {
    width: calc(50% - 10px); /* Stellt sicher, dass 2 Boxen nebeneinander passen */
    max-width: 150px; /* Optionale Begrenzung */
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.rating-image {
    max-width: 100px;
    max-height: 100px;
    height: auto;
    display: block;
    margin: 5px auto;
}



.trophy {
  display: flex;
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}

.trophy-left {
  flex: 0 0 100px; /* Feste Breite für das Bild */
  margin-right: 15px;
}

.trophy-left img {
  width: 100%;
  height: auto;
  display: block;
}

.trophy-middle {
  flex: 1;
  text-align: left;
}

.trophy-middle p {
  margin: 2px 0;
}

.trophy-right {
  flex: 0 0 150px; /* Feste Breite für Trophy und Points */
  text-align: left;
  padding-left: 15px;
}



.critic-container {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}

.critic-left,
.critic-right {
    width: 50%;
}

.critic-left h2 {
    margin: 0 0 10px 0;
}

.critic-ratings {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.critic-rating-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.critic-rating-row > div {
    flex: 1;
    text-align: left;
}


.btn-edit {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    border: none;
    color: white;
    border-radius: 10px;
    padding: 10px 15px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-edit:hover {
    transform: translateY(-2px);
}




/* HERO */

.game-hero{
    position:relative;
    min-height:600px;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,.9));
}

.hero-container{
    position:relative;
    z-index:2;
    max-width:1400px;
    margin:0 auto;
    padding:60px 20px;
    display:flex;
    gap:60px;
    flex-wrap:wrap;
}

.hero-cover{
    width:280px;
    border-radius:20px;
    box-shadow:0 30px 60px rgba(0,0,0,.6);
}

.hero-content h1{
    font-size:42px;
    margin-bottom:10px;
}

.hero-developer{
    color:#8b949e;
    margin-bottom:20px;
}

.hero-meta{
    display:flex;
    gap:40px;
    margin-bottom:20px;
}

.meta-label{
    font-size:12px;
    color:#8b949e;
    display:block;
}

/* PLATFORM BADGE */

.platform-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#161b22;
    padding:6px 12px;
    border-radius:8px;
    margin-right:8px;
    text-decoration:none;
    color:#e6edf3;
}

/* SVG FIX */
.platform-svg svg{
    width:22px;
    height:22px;
}

/* EXTREM WICHTIG – verhindert Grau-Färbung */
.platform-svg svg path{
    fill:unset !important;
}

.platform-svg svg{
    color:unset !important;
}

/* RATINGS */

.hero-ratings{
    display:flex;
    gap:30px;
    margin:25px 0;
}

.rating-box2{
    background: rgba(2,6,23,0.9);
    padding:15px 25px;
    border-radius:15px;
    text-align:center;
}

.rating-value{
    font-size:26px;
    font-weight:bold;
}

.rating-label{
    font-size:12px;
    color:#8b949e;
}

.action-btn.active-btn{
    background:#da3633;
}


.game-hero {
    position: relative;
    min-height: 600px;
    background-size: cover;
    background-position: center;
}

.hero-overlay {
    background: linear-gradient(to bottom, rgba(2,6,23,0.6), #020617);
}

.aka-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aka-list li {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}

.aka-list strong {
    white-space: nowrap; /* 🔥 verhindert Zeilenumbruch */
}

.rating-top {
    display: flex;
    gap: 20px;
}

.rating-block {
    flex: 1;
    display: flex;
    justify-content: center;
}

.rating-bottom {
    display: flex;
    justify-content: center;
}




.bundle-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.bundle-item {
    width: 120px;
    text-align: center;
    transition: 0.2s;
}

.bundle-item img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
}

.bundle-title {
    margin-top: 5px;
    font-size: 0.8rem;
    color: #ccc;
}

/* Hover */
.bundle-item:hover {
    transform: scale(1.05);
}









/* WRAPPER */
.similar-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* SLIDER */
.similar-games-slider {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 10px;
    scroll-behavior: smooth;
}

/* CARD */
.similar-card {
    min-width: 140px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 8px;
    text-align: center;
    transition: 0.2s;
}

.similar-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
}

/* TEXT */
.similar-title {
    margin-top: 6px;
    font-size: 0.85rem;
    color: white;
}

.similar-rating {
    font-size: 0.75rem;
    color: #aaa;
}

/* HOVER */
.similar-card:hover {
    transform: scale(1.05);
}

/* BUTTONS */
.scroll-btn {
    background: rgba(0,0,0,0.6);
    border: none;
    color: white;
    font-size: 20px;
    padding: 10px;
    cursor: pointer;
    border-radius: 8px;
}

.left-btn {
    margin-right: 5px;
}

.right-btn {
    margin-left: 5px;
}





/* GRID */
.community-grid {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

/* LEFT / RIGHT */
.community-left {
    flex: 2;
    min-width: 300px;
}

.community-right {
    flex: 1;
    min-width: 220px;
}

/* FILTER */
.filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.filter-bar select {
    background: #161b22;
    border: 1px solid #2a2f36;
    color: #ccc;
    padding: 6px 10px;
    border-radius: 8px;
}

/* CRITIC CARD */
.critic-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    transition: 0.2s;
}

.critic-card:hover {
    background: rgba(255,255,255,0.06);
}

/* TOP ROW */
.critic-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.critic-name {
    font-weight: 500;
}

.critic-score {
    font-weight: bold;
    color: #22c55e;
}

/* BOTTOM */
.critic-bottom {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #aaa;
}

.review-link {
    color: #60a5fa;
    text-decoration: none;
}

.review-link:hover {
    text-decoration: underline;
}

/* STATS */
.stat-card {
    display: flex;
    justify-content: space-between;
    align-items: center;

    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);

    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

.stat-card.main {
    font-size: 1.2rem;
    font-weight: bold;
}

.stat-right {
    text-align: right;
}

.stat-right span {
    font-size: 0.75rem;
    color: #888;
}


/* ===== SCREENSHOTS ===== */

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

.screenshot-card {
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    transition: 0.2s;
}

.screenshot-card img {
    width: 100%;
    height: 140px; /* 🔥 rechteckig */
    object-fit: cover;
    display: block;
}

.screenshot-card:hover {
    transform: scale(1.03);
}


/* ===== VIDEOS ===== */

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

.video-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    overflow: hidden;
    padding: 10px;
}

.video-card iframe {
    width: 100%;
    height: 180px;
    border: none;
    border-radius: 8px;
}

.video-type {
    margin-top: 6px;
    font-size: 0.8rem;
    color: #aaa;
    text-align: center;
}

/* GRID */
.trophy-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CARD */
.trophy-card {
    display: flex;
    gap: 15px;
    align-items: center;

    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;

    padding: 12px;
    transition: 0.2s;
}

.trophy-card:hover {
    background: rgba(255,255,255,0.06);
}

/* ICON */
.trophy-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* CONTENT */
.trophy-content {
    flex: 1;
}

.trophy-title {
    font-weight: bold;
    font-size: 1rem;
    color: white;
}

.trophy-descriptions {
    margin-top: 5px;
    font-size: 0.85rem;
    color: #aaa;
}

.desc {
    margin-bottom: 2px;
}

/* RIGHT META */
.trophy-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.meta-item img {
    width: 28px;
}

.meta-item.points {
    background: #107c10;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: white;
}