/* ==========================================================================
   Game Single Template Styles
   ========================================================================== */

/*-------------------------------------------
   1. GLOBAL & LAYOUT
-------------------------------------------*/
.site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Section headers */
.game-about h2,
.game-info-sidebar h2,
.game-trophies-psn h2,
.game-wiki-entries h2,
.game-related-posts h2 {
    margin-bottom: 1.2rem;
}

/*-------------------------------------------
   2. HERO HEADER (with video background)
-------------------------------------------*/
.game-header-hero {
    display: flex;
    flex-direction: column;
    min-height: 500px;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 2rem;
}

/* Background video/image */
.game-header-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.6s ease;
}

/* Video is loading – keep it invisible so the fallback image shows through */
.game-header-video--pending {
    opacity: 0;
}

/* Video has buffered and is playing – fade it in */
.game-header-video--ready {
    opacity: 1;
}

.game-header-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.45;
    z-index: 1;
}

/* Fallback image shown behind a pending/failed video – same styling, stacks below video z-index */
.game-header-image--fallback {
    z-index: 0;
}

.game-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.4) 100%);
    z-index: 2;
}

.game-header-youtube {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.game-header-youtube iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Main content area (title, ratings, thumbnail) */
.game-header-content {
    flex: 1;
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 2rem 5%;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}

.game-header-left {
    flex: 1;
    min-width: 300px;
}

.game-header-right {
    flex-shrink: 0;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.game-title {
    font-size: 2.5rem;
    margin: 0 0 0.5rem 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    color: #fff;
}

/* Platforms */
.game-platforms {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}
.game-platforms img {
    width: auto;
    height: 29px;
    opacity: 0.9;
    transition: opacity 0.2s;
}
.game-platforms img:hover {
    opacity: 1;
}

/* Ratings */
.game-ratings {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    margin: 15px 0;
}

/* Hide the "You have already voted" notice — stars being non-interactive already
   signals this clearly. Showing it adds height only under the local rating badge,
   pushing the IGDB badge lower and breaking the row alignment. */
.game-rating-notice {
    display: none !important;
}

/* Trophy counts */
.game-trophies {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    background: rgba(244, 242, 242, 0.227);
    padding: 10px 15px;
    border-radius: 8px;
    margin: 15px 0 10px;
    width: auto;
}
.trophy-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.95rem;
}
.trophy-item img {
    width: 20px;
    height: 20px;
}
.trophy-count {
    font-weight: 600;
    color: #f8f9fa;
}

/* Quick links + PEGI row */
.game-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
.game-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1;
}
.quick-link {
    display: inline-block;
    background: rgba(244, 242, 242, 0.227);
    padding: 8px 15px;
    border-radius: 8px;
    color: #f8f9fa;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}
.quick-link:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.game-pegi {
    flex-shrink: 0;
}
.game-pegi img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Featured image */
.game-featured-image img {
    width: 220px;
    height: 220px;
    object-fit: cover;
    aspect-ratio: 1/1;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    max-width: 100%;
    height: auto;
}

/*-------------------------------------------
   3. HERO CAROUSEL (Slick inside hero)
-------------------------------------------*/
.game-header-carousel {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0.5rem 5% 0.25rem;
    background: rgba(244, 242, 242, 0.227);
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Override slick-theme.css margins (can't edit the CDN file) */
.game-header-carousel .slick-dotted.slick-slider {
    margin-bottom: 10px !important;
    margin-top: 5px !important;
}

/* Hide slick dots if any remain */
.game-header-carousel .slick-dots {
    display: none !important;
}

/* Override Slick defaults */
.game-header-carousel .slick-list {
    margin: 0 -1.5px;
}
.game-header-carousel .slick-slide {
    margin: 0 1.5px;
    width: 124px; /* Fixed width for items */
}

/* Ensure anchor is positioned for overlay */
.game-header-carousel .carousel-item a {
    display: block;
    position: relative;
}

.game-header-carousel .carousel-item {
    width: 124px;
    box-sizing: border-box;
}
.game-header-carousel .carousel-item img {
    width: 124px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
}

/* Play overlay for videos */
.game-header-carousel .play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}
.game-header-carousel .play-overlay img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    background: transparent;
}

/* Custom arrows for hero carousel */
.game-header-carousel .slick-prev,
.game-header-carousel .slick-next {
    width: 40px !important;
    height: 40px !important;
    background: rgba(0,0,0,0.5) !important;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.game-header-carousel .slick-prev img,
.game-header-carousel .slick-next img {
    width: 20px;
    height: 20px;
    display: block;
}
.game-header-carousel .slick-prev {
    left: 10px;
}
.game-header-carousel .slick-next {
    right: 10px;
}
/* Remove default Slick arrow pseudo-elements */
.game-header-carousel .slick-prev:before,
.game-header-carousel .slick-next:before {
    content: none !important;
    display: none !important;
}

/* Responsive adjustments for hero carousel */
@media (max-width: 768px) {
    .game-header-carousel .slick-slide,
    .game-header-carousel .carousel-item,
    .game-header-carousel .carousel-item img {
        width: 104px;
        height: 60px;
    }
}
@media (max-width: 480px) {
    .game-header-carousel .slick-slide,
    .game-header-carousel .carousel-item,
    .game-header-carousel .carousel-item img {
        width: 124px;
        height: 70px;
    }
}

/*-------------------------------------------
   4. TWO-COLUMN CONTENT (About + Guides left, Game Info right)
-------------------------------------------*/
.game-content-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Left column stacks About and Guides vertically */
.game-left-column {
    flex: 2;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.game-about {
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.game-info-sidebar {
    flex: 1;
    min-width: 250px;
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    align-self: flex-start;
}

/* Game info table */
.game-info-table {
    width: 100%;
    border-collapse: collapse;
}
.game-info-table tr {
    border-bottom: 1px solid #dee2e6;
}
.game-info-table tr:last-child {
    border-bottom: none;
}
.game-info-table td {
    padding: 10px 0;
}
.game-info-table td:first-child {
    font-weight: 600;
    color: #495057;
    width: 40%;
}

/* Guides section (standalone left column container) */
.game-guides-section {
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.guides-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}
.guides-header h2 {
    margin: 0;
}
.guides-view-all {
    background: #c23434;
    color: #f2eeee;
    padding: 6px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.2s;
}
.guides-view-all:hover {
    background: #a82b2b;
    color: #fff;
}

/* Guide cards list */
.guides-cards {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.guide-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}
.guide-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.guide-card:first-child {
    padding-top: 0;
}

/* Thumbnail */
.guide-card__thumb-wrap {
    flex-shrink: 0;
    width: 100px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    display: block;
    background: #f0f2f5;
}
.guide-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.guide-card__thumb-wrap:hover .guide-card__thumb {
    transform: scale(1.06);
}
.guide-card__thumb-wrap--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f2f5, #e4e8ee);
}
.guide-card__thumb-icon {
    font-size: 1.5rem;
    opacity: 0.5;
}

/* Body */
.guide-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.guide-card__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
}
.guide-card__title a {
    color: #1a1a2e;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.guide-card__title a:hover {
    color: #c23434;
}
.guide-card__excerpt {
    margin: 0;
    font-size: 0.82rem;
    color: #666;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta row */
.guide-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    flex-wrap: wrap;
}
.guide-card__date,
.guide-card__views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    color: #888;
}
.guide-card__share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    background: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px 7px;
    color: #888;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    line-height: 1;
}
.guide-card__share:hover {
    border-color: #c23434;
    color: #c23434;
    background: #fff0f0;
}

/* Responsive */
@media (max-width: 480px) {
    .guide-card__thumb-wrap {
        width: 80px;
        height: 56px;
    }
    .guide-card__excerpt {
        display: none;
    }
}

/*-------------------------------------------
   5. TROPHIES ROW (Trophies 2/3 + Comments 1/3)
-------------------------------------------*/
.game-trophies-row {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    align-items: flex-start;
}

.game-trophies-psn {
    flex: 2;
    min-width: 0;
    padding: 1.5rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.game-trophies-psn h2 {
    margin-top: 0;
    color: #333;
    font-size: 1.5rem;
}

/* Tabs */
.trophy-tabs .tab-links {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    border-bottom: 2px solid #dee2e6;
}
.trophy-tabs .tab-links li {
    margin-right: 5px;
}
.trophy-tabs .tab-links li a {
    display: block;
    padding: 10px 20px;
    background: #f8f9fa;
    color: #495057;
    text-decoration: none;
    border-radius: 8px 8px 0 0;
    border: 1px solid #dee2e6;
    border-bottom: none;
}
.trophy-tabs .tab-links li.active a {
    background: #fff;
    color: #0073aa;
    font-weight: bold;
    border-bottom: 2px solid #fff;
    margin-bottom: -2px;
}
.trophy-tabs .tab-content {
    display: none;
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0 8px 8px 8px;
    background: #fff;
}
.trophy-tabs .tab-content.active {
    display: block;
}

/*-------------------------------------------
   5b. RECENT COMMENTS SIDEBAR
-------------------------------------------*/
.game-recent-comments {
    flex: 1;
    min-width: 220px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 1.5rem;
    align-self: flex-start;
}
.game-recent-comments h2 {
    margin-top: 0;
    color: #333;
    font-size: 1.25rem;
    margin-bottom: 1.1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #f0f0f0;
}

.recent-comments-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.recent-comment {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 0;
    border-bottom: 1px solid #f4f4f4;
}
.recent-comment:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.recent-comment:first-child {
    padding-top: 0;
}

.recent-comment__avatar-wrap {
    flex-shrink: 0;
}
.recent-comment__avatar-wrap img,
.recent-comment__avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50%;
    display: block;
}

.recent-comment__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.recent-comment__header {
    font-size: 0.78rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px;
    line-height: 1.3;
}
.recent-comment__author {
    color: #1a1a2e;
    font-weight: 600;
}
.recent-comment__on {
    color: #aaa;
    font-size: 0.72rem;
}
.recent-comment__post-title {
    color: #c23434;
    text-decoration: none;
    font-size: 0.76rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
}
.recent-comment__post-title:hover {
    text-decoration: underline;
}

.recent-comment__text {
    font-size: 0.82rem;
    color: #555;
    line-height: 1.4;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.recent-comment__text:hover {
    color: #1a1a2e;
}
.recent-comment__date {
    font-size: 0.7rem;
    color: #bbb;
}

.recent-comments-empty {
    color: #999;
    font-size: 0.9rem;
    margin: 0;
}

/* Responsive: stack on tablet */
@media (max-width: 900px) {
    .game-trophies-row {
        flex-direction: column;
    }
    .game-trophies-psn {
        flex: none;
        width: 100%;
    }
    .game-recent-comments {
        flex: none;
        width: 100%;
    }
}

/*-------------------------------------------
   6. WIKI ENTRIES CAROUSEL
-------------------------------------------*/
.game-wiki-entries {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.wiki-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.wiki-view-all {
    background: #c23434;
    color: #f2eeee;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
}
.wiki-view-all:hover {
    color: #bddc0e;
}

.wiki-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.carousel-track-container {
    overflow: hidden;
    width: 100%;
}
.carousel-track {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease;
}
.wiki-carousel .carousel-item {
    flex: 0 0 calc(33.333% - 14px); /* 3 items with gap */
    min-width: 200px;
}

/* Wiki card */
.wiki-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    margin-bottom: 5px;
}
.wiki-card-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.wiki-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wiki-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #fff;
    padding: 15px;
}
.wiki-card-title {
    color: #fff;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
}
.wiki-card-title a {
    color: #fff;
    text-decoration: none;
}
.wiki-card-title a:hover {
    text-decoration: underline;
}
.wiki-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.85rem;
    opacity: 0.9;
    align-items: center;
}
.wiki-card-meta a {
    color: #fff;
    text-decoration: underline;
}
.wiki-card-excerpt {
    padding: 15px;
    font-size: 0.9rem;
    color: #333;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3; /* Standard property for compatibility */
    line-height: 1.5;
    min-height: 95px;
}

/* Wiki carousel arrows (not Slick, custom) */
.wiki-carousel .carousel-arrow {
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 2;
}
.wiki-carousel .carousel-arrow:hover {
    background: rgba(0,0,0,0.8);
}
.wiki-carousel .carousel-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/*-------------------------------------------
   7. RELATED POSTS / NEWS GRID
-------------------------------------------*/
.game-related-posts {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.game-related-posts h2 {
    margin-top: 0;
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
}

/* News grid: 1 big left + 4 small right forming 2x2 */
.news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* News card base */
.news-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    background: #1a1a2e;
}
.news-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.news-card:hover .news-card-img {
    transform: scale(1.05);
}
.news-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.news-card-cat {
    display: inline-block;
    background: #c23434;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
    align-self: flex-start;
}
.news-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
}
.news-card-meta {
    display: flex;
    gap: 12px;
    font-size: 0.78rem;
    opacity: 0.8;
    margin-top: 5px;
}

/* Main (big) card */
.news-card-main {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    min-height: 380px;
}
.news-card-main .news-card-title {
    font-size: 1.25rem;
}

/* Small cards 2x2 grid */
.news-grid-small {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
}
.news-card-small {
    min-height: 180px;
}
.news-card-small .news-card-title {
    font-size: 0.88rem;
}
.news-card-small .news-card-overlay {
    padding: 12px;
}
.news-card-small .news-card-cat {
    font-size: 0.65rem;
    padding: 2px 6px;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
    .news-card-main {
        min-height: 260px;
    }
    .news-grid-small {
        grid-template-columns: 1fr 1fr;
    }
    .news-card-small {
        min-height: 150px;
    }
}
@media (max-width: 480px) {
    .news-grid-small {
        grid-template-columns: 1fr;
    }
    .news-card-small {
        min-height: 180px;
    }
}

/*-------------------------------------------
   8. RESPONSIVE DESIGN
-------------------------------------------*/

/* -- 768px: tablets & large phones --------------------------------------- */
@media (max-width: 768px) {
    .game-header-hero {
        min-height: auto;
    }
    .game-header-content {
        flex-direction: column;
        text-align: center;
    }
    /* Cover moves above the title on tablet */
    .game-header-right {
        order: -1;
        max-width: 200px;
        align-items: center;
    }
    .game-title {
        font-size: 1.8rem;
    }
    .game-platforms,
    .game-ratings,
    .game-trophies {
        justify-content: center;
    }
    /* Wiki: one card visible at a time */
    .wiki-carousel .carousel-item {
        flex: 0 0 100%;
    }
}

/* -- 600px: small phones (landscape) ------------------------------------- */
@media (max-width: 600px) {
    /* Quick links stack above PEGI so neither gets squashed */
    .game-header-actions {
        flex-direction: column;
        align-items: center;
    }
    .game-quick-links {
        justify-content: center;
    }
    .game-pegi {
        align-self: center;
    }
}

/* -- 480px: typical portrait phones -------------------------------------- */
@media (max-width: 480px) {
    /* Tighten hero padding */
    .game-header-content {
        padding: 1.25rem 4%;
        gap: 1rem;
    }

    /* Title */
    .game-title {
        font-size: 1.5rem;
        line-height: 1.25;
    }

    /* Cover image: smaller so title area breathes */
    .game-header-right {
        max-width: 140px;
    }
    .game-featured-image img {
        width: 140px;
        height: 140px;
    }

    /* Platform icons: allow wrap, keep them crisp */
    .game-platforms {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
    .game-platforms img {
        height: 26px;
    }

    /* Ratings: tighten gap */
    .game-ratings {
        gap: 8px;
    }

    /* Trophies: keep in one row, shrink icons slightly */
    .game-trophies {
        flex-wrap: nowrap;
        width: auto;
        padding: 6px 10px;
        gap: 6px;
        margin: 10px 0;
    }
    .trophy-item {
        white-space: nowrap;
        font-size: 0.8rem;
    }
    .trophy-item img {
        width: 18px;
        height: 18px;
    }

    /* Quick links: smaller pills */
    .quick-link {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    /* PEGI icon */
    .game-pegi img {
        width: 52px;
        height: 52px;
    }

    /* Card sections: reduce padding so they're not cramped */
    .game-about,
    .game-guides-section,
    .game-info-sidebar,
    .game-trophies-psn,
    .game-wiki-entries,
    .game-related-posts {
        padding: 1rem;
    }

    /* News small grid: single column */
    .news-grid-small {
        grid-template-columns: 1fr;
    }
    .news-card-small {
        min-height: 180px;
    }
}

/* -- 320px: very small phones -------------------------------------------- */
@media (max-width: 320px) {
    /* Even tighter hero padding */
    .game-header-content {
        padding: 1rem 3%;
        gap: 0.75rem;
    }

    /* Title: one more step down so long names don't overflow */
    .game-title {
        font-size: 1.2rem;
    }

    /* Cover: compact so it doesn't crowd the left column */
    .game-header-right {
        max-width: 100px;
    }
    .game-featured-image img {
        width: 100px;
        height: 100px;
    }

    /* Platform icons */
    .game-platforms img {
        height: 22px;
    }

    /* Trophies: reduce icon size further */
    .game-trophies {
        gap: 4px;
        padding: 5px 8px;
    }
    .trophy-item img {
        width: 14px;
        height: 14px;
    }
    .trophy-item {
        font-size: 0.72rem;
    }

    /* Quick links: very compact */
    .quick-link {
        font-size: 0.72rem;
        padding: 5px 9px;
    }

    /* PEGI icon: minimum comfortable tap target */
    .game-pegi img {
        width: 44px;
        height: 44px;
    }

    /* Card sections: minimal padding */
    .game-about,
    .game-guides-section,
    .game-info-sidebar,
    .game-trophies-psn,
    .game-wiki-entries,
    .game-related-posts {
        padding: 0.75rem;
        border-radius: 8px;
    }

    /* Hero carousel thumbnails */
    .game-header-carousel .slick-slide,
    .game-header-carousel .carousel-item,
    .game-header-carousel .carousel-item img {
        width: 90px;
        height: 52px;
    }

    /* News cards */
    .news-card-main {
        min-height: 200px;
    }
    .news-card-small {
        min-height: 140px;
    }
    .news-card-title {
        font-size: 0.88rem;
    }
}



/* ── PS Plus Hero Badge ── */
.psplus-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 7px;
    border-radius: 6px;
    background: #1d1d1d;
    border: 1px solid #3a3a3a;
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffc800;
    white-space: nowrap;
    animation: psplusFadeIn 0.4s ease;
    text-shadow: none;
    backdrop-filter: none;
    letter-spacing: 0.02em;
}

.psplus-badge--left {
    color: #888;
    border-color: #333;
    background: #1a1a1a;
}

.psplus-badge-icon {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain;
    flex-shrink: 0;
}

.psplus-badge--left .psplus-badge-icon {
    filter: grayscale(1);
    opacity: 0.5;
}
 
@keyframes psplusFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
 
/* ── PS Plus Sidebar Cell ── */
.psplus-sidebar-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.psplus-sidebar-cell .psplus-info-tier {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 2px;
}

.psplus-sidebar-cell .psplus-info-dates {
    font-size: 0.82rem;
    color: #6c757d;
    line-height: 1.5;
}

.psplus-info-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 2px;
}

.psplus-info-status--active {
    color: #16a34a;
}

.psplus-info-status--left {
    color: #9ca3af;
}

.psplus-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.psplus-status-dot--active {
    background: #16a34a;
}

.psplus-status-dot--left {
    background: #9ca3af;
}
 
@media (max-width: 768px) {
    .psplus-badge {
        font-size: 0.72rem;
        padding: 3px 8px 3px 5px;
    }
    .psplus-badge-icon {
        width: 15px !important;
        height: 15px !important;
    }
}