/* Game Single Page Styles - Extracted from single-games.php */

/* Mobile-only affiliate section - hidden on desktop, shown on mobile via game-single-mobile.css */
.mobile-affiliate-section {
    display: none;
}

/* ==========================================================================
   RetroAchievements Section
   ========================================================================== */

/* RetroAchievements Main Container - Phase 3 Step 1 */
.retroachievements-main-section {
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 35px;
    background: rgba(77,164,75,0.03);
    border-radius: 16px;
    border: 2px solid rgba(77,164,75,0.15);
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Reset any unwanted image styling within RetroAchievements section */
.retroachievements-main-section img {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

/* Decorative Accent Bar - Step 2 */
.ra-decorative-accent {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, #4da44b, #ff6b35);
    border-radius: 0 0 6px 6px;
}

/* Header Title - Step 3 */
.ra-header-title {
    color: #4da44b;
    margin-bottom: 30px;
    font-size: 2.4rem;
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: center;
    justify-content: center;
    font-weight: bold;
}

/* Status Badges - Step 4 */
.ra-status-badge {
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: bold;
}

.ra-status-mastered {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    border: 2px solid #FF8C00;
    box-shadow: 0 4px 8px rgba(255,215,0,0.3);
}

.ra-status-completed {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.ra-status-in-progress {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
}

.ra-status-not-started {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    color: white;
}

/* Progress Stats - Step 5 */
.ra-stat-achievements {
    background: rgba(25,118,210,0.1);
    color: #1976d2;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: bold;
    border: 1px solid rgba(25,118,210,0.2);
}

.ra-stat-points {
    background: rgba(245,124,0,0.1);
    color: #f57c00;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: bold;
    border: 1px solid rgba(245,124,0,0.2);
}

/* Container Layouts - Step 6 */
.ra-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 20px;
}

.ra-status-progress {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.ra-progress-stats {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Game Details Section - Step 7 */
.ra-game-details {
    text-align: right;
    color: #ccc;
    font-size: 14px;
}

.ra-mastery-info {
    color: #FFD700;
    font-size: 13px;
}

.ra-date-range {
    font-size: 12px;
}

.ra-last-played {
    font-size: 12px;
}

/* Achievement Badges Grid - Step 8 */
.ra-badges-container {
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid rgba(77,164,75,0.2);
}

.ra-badges-title {
    color: #ccc;
    margin-bottom: 20px;
    font-size: 1.1rem;
    text-align: center;
    letter-spacing: 1px;
}

.ra-badges-grid {
    display: grid;
    gap: 8px;
    justify-items: center;
    margin-bottom: 15px;
    grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
}

/* Achievement Badge Images - Step 9 - Sized for 10 per row */
.achievement-badge {
    width: 68px;
    height: 68px;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
    min-width: 68px;
    min-height: 68px;
}

.achievement-badge.earned {
    box-shadow: 0 4px 8px rgba(0,0,0,0.6), 0 0 12px rgba(255,215,0,0.5);
    border: 2px solid rgba(255,215,0,0.8);
}

.achievement-badge.not-earned {
    box-shadow: 0 4px 8px rgba(0,0,0,0.6);
    opacity: 0.4;
    filter: grayscale(80%);
}

/* Achievement Summary Section - Step 10 */
.ra-achievement-summary {
    text-align: center;
    font-size: 14px;
    color: #999;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
}

.ra-summary-total {
    color: #4da44b;
}

.ra-summary-earned {
    color: #FFD700;
}

.ra-summary-remaining {
    color: #666;
}

/* Header Emoji - Step 11 */
.ra-header-emoji {
    font-size: 32px;
}

/* Steam Achievements Main Container - Steam Step 1 */
.steam-achievements-section {
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 35px;
    background: rgba(0,123,255,0.03);
    border-radius: 16px;
    border: 2px solid rgba(0,123,255,0.15);
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Steam Decorative Accent Bar - Steam Step 2 */
.steam-decorative-accent {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, #007bff, #00bcd4);
    border-radius: 0 0 6px 6px;
}

/* Steam Header Title - Steam Step 3 */
.steam-header-title {
    color: #007bff;
    margin-bottom: 30px;
    font-size: 2.4rem;
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: center;
    justify-content: center;
    font-weight: bold;
}

.steam-header-emoji {
    font-size: 32px;
}

/* Steam Stats Header Container - Steam Step 4 */
.steam-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 20px;
}

/* Steam Game Info Section - Steam Step 5 */
.steam-game-title {
    color: #fff;
    margin: 0 0 10px 0;
    font-size: 1.5rem;
}

.steam-game-platform {
    color: #aaa;
    font-size: 14px;
}

/* Steam Achievement Stats Section - Steam Step 6 */
.steam-stats-section {
    text-align: right;
}

.steam-achievement-count {
    color: #007bff;
    font-size: 36px;
    font-weight: bold;
    line-height: 1;
}

.steam-completion-info {
    color: #aaa;
    font-size: 14px;
}

.steam-last-unlock {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}

/* Steam Badge Grid Container - Steam Step 7 */
.steam-badges-container {
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid rgba(0,123,255,0.2);
}

.steam-badges-title {
    color: #ccc;
    margin-bottom: 20px;
    font-size: 1.1rem;
    text-align: center;
    letter-spacing: 1px;
}

.steam-badges-grid {
    display: grid;
    gap: 8px;
    justify-items: center;
    margin-bottom: 15px;
    grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
}

/* Steam Badge Images - Steam Step 9 - Match RetroAchievements sizing */
.steam-achievement-badge {
    width: 68px;
    height: 68px;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
    min-width: 68px;
    min-height: 68px;
}

.steam-achievement-badge.earned {
    box-shadow: 0 4px 8px rgba(0,0,0,0.6), 0 0 12px rgba(0,123,255,0.5);
    border: 2px solid rgba(0,123,255,0.8);
}

.steam-achievement-badge.not-earned {
    box-shadow: 0 4px 8px rgba(0,0,0,0.6);
    opacity: 0.4;
    filter: grayscale(80%);
}

/* Game Navigation - NAV Step 2 - Visual game cards */
.game-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 50px 0;
    gap: 20px;
}

.nav-prev,
.nav-next {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 220px;
}

.nav-current {
    flex: 0 0 auto;
}

.nav-game-card {
    text-align: center;
    transition: all 0.3s ease;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.nav-game-card:hover {
    transform: translateY(-2px);
}

.nav-box-art {
    position: relative;
    display: inline-block;
    margin: 0 auto 10px;
    border-radius: 8px;
    overflow: hidden;
    max-width: 200px;
}

.nav-box-art-img {
    display: block;
    width: 100%;
    height: auto;
    /* Darken background for contrast with colorful text */
    filter: brightness(0.3) contrast(0.9) saturate(0.8);
}

.nav-rank-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-rank-number {
    font-size: 140px;
    font-weight: 900;
    font-family: 'Arial Black', 'Helvetica Bold', Arial, sans-serif;
    text-align: center;
    letter-spacing: -8px;
    line-height: 0.8;
    margin: 0;
    /* Default styling */
    color: white;
    text-shadow: 
        4px 4px 0 #000,
        -4px 4px 0 #000,
        4px -4px 0 #000,
        -4px -4px 0 #000,
        0 0 30px rgba(0,0,0,0.9);
}

/* CSS-Tricks technique - image shows through text */
.nav-rank-number.with-image {
    /* background-image is set inline */
    background-size: 200px auto;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Add subtle green stroke for definition */
    -webkit-text-stroke: 2px #4da44b;
    text-shadow: none;
}

/* Fallback for browsers without background-clip support */
.nav-rank-number:not([style*="background-image"]) {
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

/* Fallback styling for browsers that don't support background-clip */
.nav-rank-number:not([style*="background-image"]) {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.nav-box-art.placeholder {
    background: linear-gradient(135deg, #444, #222);
}

.nav-box-art.placeholder .nav-rank-number {
    color: #888;
    font-size: 72px;
    /* No background-clip for placeholders */
}

.nav-game-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
    line-height: 1.2;
}

.nav-game-rank {
    font-size: 12px;
    color: #4da44b;
    font-weight: bold;
}

.nav-placeholder {
    opacity: 0.4;
    pointer-events: none;
}

.view-all-rankings {
    background: linear-gradient(135deg, #4da44b, #3d8b40);
    color: white;
    padding: 15px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.view-all-rankings:hover {
    background: linear-gradient(135deg, #5cb85c, #4da44b);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(77,164,75,0.3);
}



/* Review Title and Attribution Styling */
/* Uses high specificity to override H2 bracket corners on board game pages
   where the review title is rendered as an H2 instead of H1 */
.game-single .game-review-content .review-title {
    font-size: 3em;
    font-weight: 800;
    color: #4da44b;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.2;
    /* Line-clamp = JS-off safety net. title-autofit.js shrinks the
       font-size until the review title fits 3 lines; if JS fails to
       load, this clamp keeps a huge review title from blowing out the
       hero section visually. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(77, 164, 75, 0.08) 0%, rgba(20, 20, 20, 0.95) 100%);
    border-left: 5px solid #4da44b;
    padding: 20px 28px;
    border-radius: 0 6px 6px 0;
}

.review-attribution {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 30px;
    font-style: italic;
}

.game-name-highlight {
    color: #ff69b4;
    font-weight: 600;
}

/* Site Header - Ensure it stays on top */
.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px);
}

.site-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(90deg, #4da44b, #ff6b35);
    clip-path: polygon(0% 0%, 10% 80%, 20% 60%, 30% 90%, 40% 70%, 50% 85%, 60% 65%, 70% 95%, 80% 75%, 90% 55%, 100% 85%, 100% 100%, 0% 100%);
}

/* Game Page Layout with Wavy Borders */
.game-single {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 60px 60px 60px;
    background: #1a1a1a;
    color: #fff;
    min-height: 100vh;
    position: relative;
    clip-path: polygon(0% 0.5%, 20% 0%, 40% 0.5%, 60% 0%, 80% 0.5%, 100% 0%, 98% 5%, 99% 10%, 97% 15%, 100% 20%, 98% 25%, 99% 30%, 97% 35%, 100% 40%, 98% 45%, 99% 50%, 97% 55%, 100% 60%, 98% 65%, 99% 70%, 97% 75%, 100% 80%, 98% 85%, 99% 90%, 97% 95%, 100% 99.5%, 80% 100%, 60% 99.5%, 40% 100%, 20% 99.5%, 0% 100%, 2% 95%, 1% 90%, 3% 85%, 0% 80%, 2% 75%, 1% 70%, 3% 65%, 0% 60%, 2% 55%, 1% 50%, 3% 45%, 0% 40%, 2% 35%, 1% 30%, 3% 25%, 0% 20%, 2% 15%, 1% 10%, 3% 5%);
}

/* Game Description with Wavy Bottom Border */
.game-description {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #fff;
    margin: 5px 0 20px 0;
    background: rgba(0, 0, 0, 0.65);
    padding: 20px 25px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    max-width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 95% 92%, 90% 85%, 85% 95%, 80% 88%, 75% 96%, 70% 89%, 65% 94%, 60% 87%, 55% 93%, 50% 86%, 45% 95%, 40% 88%, 35% 92%, 30% 86%, 25% 94%, 20% 89%, 15% 96%, 10% 90%, 5% 94%, 0% 87%);
}

.game-description p {
    margin: 0 0 15px 0;
    color: #f5f5f5;
}

.game-description p:last-child {
    margin-bottom: 0;
}

/* Full-width Banner Container */
.game-banner-full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 80px;
    margin-bottom: 0;
}

/* Banner Lines with Wavy Effect */
.game-banner-top-line {
    height: 8px;
    background: #4da44b;
    width: 100%;
}

.game-banner-bottom-line {
    height: 20px;
    width: 100%;
    background: #4da44b;
    clip-path: polygon(0% 0%, 10% 80%, 20% 60%, 30% 90%, 40% 50%, 50% 85%, 60% 40%, 70% 75%, 80% 55%, 90% 80%, 100% 0%, 100% 0%, 0% 0%);
}


/* Review Content H2 Headers - Green color with bracket corners */
.game-single .game-review-content h2,
.game-single .game-review-content h2.wp-block-heading {
    color: #4da44b !important;
    font-weight: 700;
    font-size: 2.2em;
    margin-top: 40px;
    margin-bottom: 25px;
    display: inline-block;
    padding: 12px 24px;
    background:
        /* top-left corner */
        linear-gradient(to right, #4da44b, #4da44b) no-repeat top left / 16px 2px,
        linear-gradient(to bottom, #4da44b, #4da44b) no-repeat top left / 2px 16px,
        /* top-right corner */
        linear-gradient(to left, #4da44b, #4da44b) no-repeat top right / 16px 2px,
        linear-gradient(to bottom, #4da44b, #4da44b) no-repeat top right / 2px 16px,
        /* bottom-left corner */
        linear-gradient(to right, #4da44b, #4da44b) no-repeat bottom left / 16px 2px,
        linear-gradient(to top, #4da44b, #4da44b) no-repeat bottom left / 2px 16px,
        /* bottom-right corner */
        linear-gradient(to left, #4da44b, #4da44b) no-repeat bottom right / 16px 2px,
        linear-gradient(to top, #4da44b, #4da44b) no-repeat bottom right / 2px 16px,
        /* subtle dark background */
        rgba(77, 164, 75, 0.04);
}

/* Make the h2 strong tags inherit the green color */
.game-single .game-review-content h2 strong,
.game-single .game-review-content h2.wp-block-heading strong {
    color: inherit !important;
}

/* Review body — fixed line-height keeps rows consistent whether or not
   a bolded word is on the line. Bold words are larger, nudged down 1px,
   with 4px horizontal breathing room. */
.game-single .game-review-content p,
.game-single .game-review-content li {
    line-height: 28px;
}
.game-single .game-review-content ul,
.game-single .game-review-content ol {
    margin-bottom: 10px;
}
.game-single .game-review-content p strong,
.game-single .game-review-content li strong {
    font-size: 20px;
    margin: 0 4px;
}

/* Section headings outside review content - same green bracket corner style */
.game-single h2.game-section-heading {
    color: #4da44b !important;
    font-weight: 700;
    font-size: 2.2em;
    margin-top: 40px;
    margin-bottom: 25px;
    display: inline-block;
    padding: 12px 24px;
    background:
        /* top-left corner */
        linear-gradient(to right, #4da44b, #4da44b) no-repeat top left / 16px 2px,
        linear-gradient(to bottom, #4da44b, #4da44b) no-repeat top left / 2px 16px,
        /* top-right corner */
        linear-gradient(to left, #4da44b, #4da44b) no-repeat top right / 16px 2px,
        linear-gradient(to bottom, #4da44b, #4da44b) no-repeat top right / 2px 16px,
        /* bottom-left corner */
        linear-gradient(to right, #4da44b, #4da44b) no-repeat bottom left / 16px 2px,
        linear-gradient(to top, #4da44b, #4da44b) no-repeat bottom left / 2px 16px,
        /* bottom-right corner */
        linear-gradient(to left, #4da44b, #4da44b) no-repeat bottom right / 16px 2px,
        linear-gradient(to top, #4da44b, #4da44b) no-repeat bottom right / 2px 16px,
        /* subtle dark background */
        rgba(77, 164, 75, 0.04);
}

/* Section continuation — gentle wavy edges on all 4 sides, no min-height */
.game-single.game-section-continue {
    min-height: auto;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 25px;
    clip-path: polygon(
        /* top edge — wavy */
        0% 1.5%, 8% 0%, 20% 1%, 35% 0%, 50% 1.5%, 65% 0%, 80% 1%, 92% 0%, 100% 1%,
        /* right edge — wavy */
        99% 8%, 100% 18%, 98.5% 28%, 100% 40%, 99% 52%, 100% 63%, 98.5% 75%, 100% 87%, 99% 95%,
        /* bottom edge — wavy */
        100% 99%, 90% 100%, 78% 98.5%, 63% 100%, 48% 99%, 33% 100%, 18% 98.5%, 7% 100%, 0% 99%,
        /* left edge — wavy */
        1% 92%, 0% 82%, 1.5% 70%, 0% 58%, 1% 45%, 0% 33%, 1.5% 22%, 0% 12%, 1% 5%
    );
}

/* Alternate wavy pattern for every other continuation section */
.game-single.game-section-continue:nth-of-type(even) {
    clip-path: polygon(
        /* top edge — wavy (offset) */
        0% 1%, 12% 0%, 25% 1.5%, 40% 0%, 55% 1%, 70% 0%, 85% 1.5%, 95% 0%, 100% 0.5%,
        /* right edge — wavy */
        98.5% 6%, 100% 15%, 99% 26%, 100% 38%, 98.5% 50%, 100% 62%, 99% 74%, 100% 85%, 98.5% 94%,
        /* bottom edge — wavy (offset) */
        100% 98.5%, 88% 100%, 73% 99%, 58% 100%, 45% 98.5%, 30% 100%, 15% 99%, 5% 100%, 0% 98.5%,
        /* left edge — wavy */
        1% 96%, 0% 85%, 1.5% 73%, 0% 60%, 1% 48%, 0% 36%, 1.5% 25%, 0% 15%, 1% 7%
    );
}

/* Reduce heading top margin in continuation sections since padding handles it */
.game-single.game-section-continue h2.game-section-heading:first-child,
.game-single.game-section-continue .game-metadata > h2.game-section-heading,
.game-single.game-section-continue .game-rankings-detailed > h2.game-section-heading,
.game-single.game-section-continue .game-comments-section > h2.game-section-heading {
    margin-top: 0;
}

/* ==========================================================================
   Scrolling Sidebar - Affiliate Widget (Ultra-wide screens only)
   ========================================================================== */

/* Wrapper provides positioning context for sidebar */
.game-content-wrapper {
    position: relative;
    overflow: visible; /* Allow sidebar to extend outside */
}

/* Hidden by default - only visible on ultra-wide screens */
.game-sidebar-fixed {
    display: none;
}

/* Only show on screens 1700px+ where there's actual margin space */
@media (min-width: 1700px) {
    .game-sidebar-fixed {
        display: block;
        position: absolute;
        left: 20px; /* Position from left edge of viewport */
        top: 0; /* Aligns with top of the article/main content */
        width: 260px;
        z-index: 50;
        /* Use fixed positioning relative to viewport left edge */
        margin-left: calc(-50vw + 50%); /* Move to left edge of viewport */
        transform: translateX(0);
    }
}

/* Slightly wider sidebar on 1920px+ screens */
@media (min-width: 1920px) {
    .game-sidebar-fixed {
        left: 30px;
        width: 280px;
    }
}

/* ==========================================================================
   Left Sidebar - Ranking & Metadata (Positioned in Left Margin)
   ========================================================================== */

/* Hidden by default - only visible on wide screens with margin space */
.game-left-sidebar {
    display: none;
}

/* Only show on screens 1400px+ where there's margin space on the left */
@media (min-width: 1400px) {
    .game-left-sidebar {
        display: block;
        position: absolute;
        left: 20px;
        top: -30px;
        width: 180px;
        z-index: 50;
        /* Position in the left margin */
        margin-left: calc(-50vw + 50%);
        transform: translateX(0);
    }
}

/* Slightly wider on 1600px+ screens */
@media (min-width: 1600px) {
    .game-left-sidebar {
        left: 40px;
        width: 200px;
    }
}

/* Even wider on 1920px+ screens */
@media (min-width: 1920px) {
    .game-left-sidebar {
        left: 60px;
        width: 220px;
    }
}

/* Rank box styling - uses info-box sizing (280px) to match video box */
.sidebar-rank-box {
    width: 280px;
    background: rgba(26, 26, 26, 0.95);
    border: 2px solid rgba(77, 164, 75, 0.4);
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
    text-align: center;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.sidebar-rank-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: #87CEEB;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.sidebar-rank-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: #4da44b;
    line-height: 1;
    margin-bottom: 8px;
}

.sidebar-rank-change {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    display: inline-block;
}

.sidebar-rank-change.up {
    background: #4da44b;
    color: #fff;
}

.sidebar-rank-change.down {
    background: #ff6b6b;
    color: #fff;
}

.sidebar-rank-change.neutral {
    background: #666;
    color: #ccc;
}

.sidebar-rank-days {
    font-size: 0.75rem;
    color: #888;
    margin-top: 4px;
}

.sidebar-rank-sparkline {
    margin-top: 10px;
    width: 100%;
}

.sidebar-rank-sparkline .rank-sparkline {
    width: 100%;
}

/* Catalog / unranked stub rank box - shown when a game has no current
   rank yet so the sidebar still has a populated rank slot. Same shell
   as the live rank box, muted "Unranked" / "In Catalog" status text.
   Margin matches .sidebar-rank-box so the vote panel below has the
   same visual gap as in the live layout. */
.sidebar-rank-box--stub {
    margin-bottom: 20px;
}
.sidebar-rank-box--stub .ranking-number--stub,
.sidebar-rank-box--stub .sidebar-rank-number--stub {
    font-size: 1.4rem;
    color: #c8b9a0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.1;
}

.sidebar-rank-stub-note {
    font-size: 0.78rem;
    color: #aaa;
    margin: 6px 0 10px;
    line-height: 1.3;
}

.sidebar-rank-stub-link {
    display: inline-block;
    font-size: 0.8rem;
    color: #4da44b;
    text-decoration: none;
    font-weight: 600;
}
.sidebar-rank-stub-link:hover { text-decoration: underline; }

/* Scroll offset for anchor links - keeps headings visible below sticky header */
.game-single h1[id],
.game-single h2[id],
.game-single h3[id],
.game-single [id].game-review-content,
.game-single [id].game-details-section,
.game-single [id].game-rankings-detailed,
[id=wakasms-review],
[id=wakasms-tier-rankings],
[id=game-details],
[id=retroachievements-section],
[id=steam-section],
[id=videos-section],
[id=screenshots-section],
[id=boardgame-details],
[id=tracker-section],
[id=playthroughs-section],
[id=catalog-body] {
    scroll-margin-top: 150px;
}

/* Early Impressions Notice */
.early-impressions-notice {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-left: 3px solid #f59e0b;
    color: #ccc;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.early-impressions-notice strong {
    color: #f59e0b;
}

.early-impressions-highlight {
    color: #f59e0b;
    font-weight: 700;
}

.early-impressions-link {
    color: #f59e0b !important;
}

/* Sidebar Table of Contents */
.sidebar-toc-wrapper {
    width: 280px;
    box-sizing: border-box;
    background: rgba(26, 26, 26, 0.95);
    border: 2px solid rgba(77, 164, 75, 0.4);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.sidebar-toc-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: #4da44b;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(77, 164, 75, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toc-top-link {
    font-size: 0.7rem;
    color: #888 !important;
    text-decoration: none !important;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    transition: color 0.2s;
}

.toc-top-link:hover {
    color: #4da44b !important;
}

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

.sidebar-toc-list li a {
    text-decoration: none;
    display: block;
    transition: color 0.2s;
    line-height: 1.3;
}

.sidebar-toc-list li a:hover {
    color: #4da44b !important;
}

.sidebar-toc-list li a.toc-active {
    color: #ff9800 !important;
    font-weight: 700;
}

.sidebar-toc-h2 {
    margin: 4px 0;
}

.sidebar-toc-h2 > a {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.sidebar-toc-h3 {
    margin: 3px 0;
    padding-left: 12px;
}

.sidebar-toc-h3 > a {
    color: #aaa;
    font-size: 0.85rem;
    font-weight: 400;
}

/* Mobile TOC - Hidden on desktop, shown only on mobile via game-single-mobile.css */
.mobile-toc-container {
    display: none;
}

/* Showcase Video Box */
.sidebar-video-box {
    width: 280px;
    box-sizing: border-box;
    background: rgba(26, 26, 26, 0.95);
    border: 2px solid rgba(77, 164, 75, 0.4);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
}

.sidebar-video-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: #87CEEB;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.sidebar-video-container {
    border-radius: 6px;
    overflow: hidden;
}

.sidebar-showcase-video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

/* Game Status Box */
.sidebar-status-box {
    background: linear-gradient(180deg, #1a1a1a 0%, #252525 100%);
    border: 2px solid rgba(77, 164, 75, 0.4);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    margin-bottom: 20px;
}

.sidebar-status-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: #87CEEB;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.sidebar-status-value {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
}

.sidebar-status-value .status-icon {
    font-size: 1.2rem;
}

.sidebar-status-date {
    font-size: 0.8rem;
    color: #aaa;
    margin-top: 5px;
}

/* ============================================================
   Muted green borders for ALL sidebar/container elements
   Single override instead of editing each PHP template
   ============================================================ */
.game-box-art-image,
.boardgame-box-art-image,
.game-ranking-box,
.game-status-badges,
.wakasm-support-container,
.game-rankings-detailed,
.current-rank,
.game-toc-wrapper,
.nav-box-art {
    border-color: rgba(77, 164, 75, 0.4) !important;
}

/* Page Attributions / Credits — standalone section below main content */
.page-attributions {
    font-size: 0.825rem;
    color: #999;
    text-align: center;
    padding: 14px 24px;
    max-width: 1200px;
    margin: 20px auto 30px;
    line-height: 1.6;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.page-attributions-label {
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.page-attributions a {
    color: #4da44b;
    text-decoration: none;
}

.page-attributions a:hover {
    text-decoration: underline;
}

/* Comments section — remove wpDiscuz dark background (article already provides it) */
.game-single #comments,
.game-single #respond,
.game-single .comments-area,
.game-single #wpdcom,
.game-single #wpdcom.wpd-dark,
.game-single #wpdcom .wpd-form-wrap,
.game-single #wpdcom .wpd-comment-form,
.game-single #wpdcom .wpd-board-default,
.game-single #wpdcom .wpd-thread-list,
.game-single #wpdcom .wpd-load-more-submit,
.game-single .wpd-comment-wrap {
    background: transparent !important;
    background-color: transparent !important;
}

.comments-disclaimer {
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
    margin-bottom: 1.5em;
    line-height: 1.5;
}