/**
 * Single Game Page Styles
 *
 * @package CRMPRP
 */

/* Breadcrumbs */
.breadcrumbs { 
    padding: 24px 32px; 
}

.breadcrumbs-inner { 
    max-width: 1400px; 
    margin: 0 auto; 
}

.breadcrumbs-list { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    list-style: none; 
    font-size: 14px; 
    flex-wrap: wrap; 
}

.breadcrumbs-list a { 
    color: var(--text-muted); 
    transition: color 0.2s; 
}

.breadcrumbs-list a:hover { 
    color: var(--accent-1); 
}

.breadcrumbs-list .sep { 
    color: var(--border); 
}

.breadcrumbs-list .current { 
    color: var(--text-secondary); 
    font-weight: 500; 
}

/* Game Hero - Redesigned */
.game-hero { 
    padding: 0 32px 32px; 
}

.game-hero-inner { 
    max-width: 1400px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: minmax(0, 1fr) 420px; 
    gap: 32px; 
    align-items: start; 
}

/* Gallery - More compact */
.gallery { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

.gallery-main { 
    position: relative; 
    aspect-ratio: 16/10; 
    max-height: 550px;
    border-radius: var(--radius-xl); 
    overflow: hidden; 
    background: var(--bg-tertiary); 
    box-shadow: var(--shadow-lg); 
}

.gallery-main img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.gallery-main-overlay { 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(180deg, transparent 60%, rgba(15,23,42,0.6)); 
    pointer-events: none; 
}

.gallery-badge { 
    position: absolute; 
    top: 16px; 
    left: 16px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    padding: 10px 18px; 
    background: var(--gradient-hot); 
    border-radius: var(--radius-full); 
    color: white; 
    font-size: 13px; 
    font-weight: 700; 
}

.gallery-nav { 
    position: absolute; 
    bottom: 16px; 
    right: 16px; 
    display: flex; 
    gap: 8px; 
}

.gallery-nav-btn { 
    width: 44px; 
    height: 44px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: rgba(255,255,255,0.9); 
    backdrop-filter: blur(8px); 
    border: none; 
    border-radius: var(--radius-full); 
    font-size: 20px; 
    color: var(--text-primary); 
    cursor: pointer; 
    transition: all 0.2s; 
}

.gallery-nav-btn:hover { 
    background: white; 
    transform: scale(1.05); 
}

.gallery-thumbs { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 12px; 
}

.gallery-thumb { 
    aspect-ratio: 16/10; 
    border-radius: var(--radius-md); 
    overflow: hidden; 
    cursor: pointer; 
    border: 3px solid transparent; 
    transition: all 0.2s; 
}

.gallery-thumb:hover, 
.gallery-thumb.active { 
    border-color: var(--accent-1); 
}

.gallery-thumb img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* Sidebar - Prominent */
.game-sidebar { 
    /* No sticky - scrolls with page */
}

.sidebar-card { 
    background: var(--bg-secondary); 
    border: 1px solid var(--border-light); 
    border-radius: var(--radius-xl); 
    overflow: hidden; 
    box-shadow: var(--shadow-xl); 
}

.sidebar-header { 
    padding: 20px; 
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); 
    color: white; 
}

.game-info-top { 
    display: flex; 
    gap: 16px; 
}

.game-icon { 
    width: 96px; 
    height: 96px; 
    border-radius: var(--radius-lg); 
    overflow: hidden; 
    box-shadow: var(--shadow-lg); 
    flex-shrink: 0; 
    border: 3px solid rgba(255,255,255,0.3); 
}

.game-icon img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.game-titles { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

.game-title { 
    font-size: 22px; 
    font-weight: 800; 
    margin-bottom: 4px; 
}

.game-developer { 
    font-size: 14px; 
    opacity: 0.85; 
}

.sidebar-stats { 
    display: flex; 
    gap: 20px; 
    margin-top: 20px; 
    padding-top: 20px; 
    border-top: 1px solid rgba(255,255,255,0.2); 
}

.sidebar-stat { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    flex: 1; 
}

.sidebar-stat-value { 
    font-size: 18px; 
    font-weight: 800; 
}

.sidebar-stat-label { 
    font-size: 11px; 
    opacity: 0.8; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
}

/* Quick Stats Line */
.sidebar-quick-stats {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.quick-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.quick-stat i {
    font-size: 14px;
    opacity: 0.8;
}

.quick-stat i.ph-fill.ph-star {
    color: #FBBF24;
}

.sidebar-body { 
    padding: 16px 20px 20px; 
}

/* LSI Tags in Sidebar */
.sidebar-lsi { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 6px; 
    margin-bottom: 16px;
    margin-top: 8px;
}

.sidebar-lsi .lsi-badge {
    padding: 6px 12px;
    font-size: 11px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.sidebar-lsi .lsi-badge:hover {
    background: var(--accent-1);
    color: white;
}

/* LSI Tags global style */
.lsi-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
}

.lsi-tag:hover {
    background: var(--gradient-primary);
    color: white;
}

/* Game Features */
.game-features {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
}

.game-features .features-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
}

.game-features .features-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--gradient-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 100%;
    overflow: hidden;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    transition: all 0.2s ease;
    margin: 3px;
}

.feature-item:hover {
    border-color: var(--accent-1);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.feature-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    color: white;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.feature-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.feature-content .feature-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.feature-content p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Features responsive */
@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .game-features {
        margin-top: 24px;
        padding-top: 20px;
    }
    
    .game-features h3 {
        font-size: 16px;
    }
    
    .feature-item {
        padding: 16px;
        gap: 12px;
    }
    
    .feature-icon {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }
    
    .feature-content .feature-title {
        font-size: 14px;
    }
    
    .feature-content p {
        font-size: 12px;
    }
}

/* Install Platform Section */
.install-platform {
    margin-bottom: 28px;
}

.install-platform:last-child {
    margin-bottom: 0;
}

.install-platform .install-platform-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.install-platform .install-platform-title i {
    font-size: 22px;
    color: var(--accent-1);
}

/* No downloads message */
.no-downloads {
    text-align: center;
    padding: 40px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
}

.no-downloads i {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.no-downloads p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.download-section { 
    margin-bottom: 16px; 
}

.download-btn { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 12px; 
    width: 100%; 
    padding: 16px 24px; 
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); 
    border: none; 
    border-radius: var(--radius-lg); 
    color: white; 
    font-family: inherit; 
    font-size: 17px; 
    font-weight: 800; 
    cursor: pointer; 
    transition: all 0.3s; 
    margin-bottom: 10px;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.45);
    position: relative;
    overflow: hidden;
}

.download-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s;
}

.download-btn:hover::before {
    left: 100%;
}

.download-btn:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 8px 30px rgba(34, 197, 94, 0.55);
}

.download-btn i { 
    font-size: 24px; 
}

.download-btn-sub { 
    font-size: 11px; 
    opacity: 0.9; 
    font-weight: 500; 
}

.download-options { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px; 
}

.download-option { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    padding: 14px; 
    background: var(--bg-tertiary); 
    border: 1px solid var(--border); 
    border-radius: var(--radius-md); 
    font-size: 13px; 
    font-weight: 600; 
    color: var(--text-secondary); 
    cursor: pointer; 
    transition: all 0.2s; 
}

.download-option:hover { 
    border-color: var(--accent-1); 
    color: var(--accent-1); 
    background: rgba(14, 165, 233, 0.05); 
}

.download-option i { 
    font-size: 20px; 
}

.game-meta { 
    display: flex; 
    flex-direction: column; 
    gap: 14px; 
    margin-top: 20px; 
}

.meta-row { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}

.meta-label { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 14px; 
    color: var(--text-muted); 
}

.meta-label i { 
    font-size: 18px; 
}

.meta-value { 
    font-size: 14px; 
    font-weight: 600; 
}

.sidebar-footer { 
    padding: 16px 24px; 
    background: var(--bg-tertiary); 
    display: flex; 
    gap: 12px; 
}

.action-btn { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 6px; 
    padding: 12px; 
    background: var(--bg-secondary); 
    border: 1px solid var(--border); 
    border-radius: var(--radius-md); 
    font-family: inherit; 
    font-size: 13px; 
    font-weight: 600; 
    color: var(--text-secondary); 
    cursor: pointer; 
    transition: all 0.2s; 
}

.action-btn:hover { 
    border-color: var(--accent-1); 
    color: var(--accent-1); 
}

.action-btn i { 
    font-size: 18px; 
}

/* Content Section */
.content-section { 
    padding: 0 32px 80px; 
}

.content-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 32px;
    align-items: stretch;
}

.content-main { 
    min-width: 0; 
}

/* Navigation Pills */
.nav-pills { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 32px; 
    z-index: 10; 
    border-bottom: 1px solid var(--border-light); 
    padding-bottom: 16px;
}

.nav-pill { 
    flex: 1;
    display: flex; 
    align-items: center;
    justify-content: center;
    gap: 8px; 
    padding: 12px 16px; 
    background: var(--bg-secondary); 
    border: 1px solid var(--border); 
    border-radius: var(--radius-full); 
    font-size: 14px; 
    font-weight: 600; 
    color: var(--text-secondary); 
    transition: all 0.2s;
    white-space: nowrap;
}

.nav-pill:hover { 
    border-color: var(--accent-1); 
    color: var(--accent-1); 
}

.nav-pill.active { 
    background: var(--gradient-primary); 
    border-color: transparent; 
    color: white; 
}

.nav-pill i { 
    font-size: 18px; 
}

/* Content Blocks */
.content-block { 
    background: var(--bg-secondary); 
    border: 1px solid var(--border-light); 
    border-radius: var(--radius-xl); 
    padding: 32px; 
    margin-bottom: 24px; 
}

.block-header { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    margin-bottom: 20px; 
}

.block-icon { 
    width: 44px; 
    height: 44px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: var(--gradient-primary); 
    border-radius: var(--radius-md); 
    color: white; 
    font-size: 22px; 
}

.block-title { 
    font-size: 20px; 
    font-weight: 800;
    margin: 0;
}

h2.block-title {
    margin: 0;
    padding: 0;
}

/* ==========================================
   DESCRIPTION TEXT - RICH FORMATTING
   ========================================== */
.description-text { 
    font-size: 16px; 
    color: var(--text-secondary); 
    line-height: 1.8; 
}

.description-text p { 
    margin-bottom: 20px; 
}

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

/* Headings */
.description-text h2 { 
    font-size: 24px; 
    font-weight: 800; 
    color: var(--text-primary); 
    margin: 40px 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-light);
    position: relative;
}

.description-text h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 80px;
    height: 2px;
    background: var(--gradient-primary);
}

.description-text h3 { 
    font-size: 20px; 
    font-weight: 800; 
    color: var(--text-primary); 
    margin: 32px 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.description-text h3::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--gradient-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.description-text h4 { 
    font-size: 17px; 
    font-weight: 700; 
    color: var(--text-primary); 
    margin: 24px 0 12px;
}

.description-text h5 { 
    font-size: 15px; 
    font-weight: 700; 
    color: var(--text-primary); 
    margin: 20px 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.description-text h6 { 
    font-size: 14px; 
    font-weight: 700; 
    color: var(--text-secondary); 
    margin: 16px 0 8px;
}

/* First heading - no top margin */
.description-text > h2:first-child,
.description-text > h3:first-child,
.description-text > h4:first-child {
    margin-top: 0;
}

/* Lists */
.description-text ul { 
    margin: 20px 0; 
    padding: 0;
    list-style: none;
}

.description-text ul li { 
    margin-bottom: 12px;
    padding-left: 28px;
    position: relative;
}

.description-text ul li::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 10px;
    width: 8px;
    height: 8px;
    background: var(--gradient-primary);
    border-radius: 50%;
}

.description-text ol { 
    margin: 20px 0; 
    padding: 0;
    list-style: none;
    counter-reset: list-counter;
}

.description-text ol li { 
    margin-bottom: 14px;
    padding-left: 36px;
    position: relative;
    counter-increment: list-counter;
}

.description-text ol li::before {
    content: counter(list-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    background: var(--gradient-primary);
    color: white;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Nested lists */
.description-text ul ul,
.description-text ol ol,
.description-text ul ol,
.description-text ol ul {
    margin: 12px 0;
}

.description-text ul ul li::before {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    top: 11px;
}

/* Blockquote - Attention/Note block */
.description-text blockquote {
    margin: 28px 0;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-left: 4px solid #F59E0B;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    position: relative;
}

.description-text blockquote::before {
    content: '!';
    position: absolute;
    top: -10px;
    left: -14px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.description-text blockquote p {
    margin: 0;
    color: var(--text-primary);
    font-weight: 500;
}

.description-text blockquote p:not(:last-child) {
    margin-bottom: 12px;
}

/* Info blockquote variant (can use class) */
.description-text blockquote.info,
.description-text blockquote[data-type="info"] {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);
    border-left-color: #0EA5E9;
}

.description-text blockquote.info::before,
.description-text blockquote[data-type="info"]::before {
    content: 'i';
    background: linear-gradient(135deg, #0EA5E9 0%, #06B6D4 100%);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

/* Success blockquote */
.description-text blockquote.success,
.description-text blockquote[data-type="success"] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-left-color: #22C55E;
}

.description-text blockquote.success::before,
.description-text blockquote[data-type="success"]::before {
    content: '✓';
    background: linear-gradient(135deg, #22C55E 0%, #10B981 100%);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* Danger blockquote */
.description-text blockquote.danger,
.description-text blockquote[data-type="danger"] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
    border-left-color: #EF4444;
}

.description-text blockquote.danger::before,
.description-text blockquote[data-type="danger"]::before {
    content: '✕';
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Code inline */
.description-text code {
    padding: 3px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.9em;
    color: var(--accent-1);
}

/* Code block */
.description-text pre {
    margin: 24px 0;
    padding: 20px 24px;
    background: #1a1a2e;
    border-radius: var(--radius-lg);
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.description-text pre code {
    padding: 0;
    background: none;
    border: none;
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.6;
}

/* Strong and emphasis */
.description-text strong,
.description-text b {
    color: var(--text-primary);
    font-weight: 700;
}

.description-text em,
.description-text i {
    font-style: italic;
}

.description-text mark {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3) 0%, rgba(251, 191, 36, 0.15) 100%);
    padding: 2px 6px;
    border-radius: 4px;
    color: inherit;
}

/* Links */
.description-text a {
    color: var(--accent-1);
    text-decoration: none;
    border-bottom: 1px dashed var(--accent-1);
    transition: all 0.2s;
}

.description-text a:hover {
    color: var(--accent-2);
    border-bottom-style: solid;
}

/* Horizontal rule */
.description-text hr {
    margin: 32px 0;
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--border-light), transparent);
}

/* Tables */
.description-text table {
    width: 100%;
    margin: 24px 0;
    border-collapse: collapse;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.description-text th,
.description-text td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

.description-text th {
    background: var(--bg-tertiary);
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.description-text tr:last-child td {
    border-bottom: none;
}

.description-text tr:nth-child(even) {
    background: var(--bg-tertiary);
}

/* Images in text */
.description-text img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    margin: 24px 0;
    box-shadow: var(--shadow-lg);
}

.description-text figure {
    margin: 28px 0;
}

.description-text figcaption {
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* Image alignment */
.description-text .aligncenter,
.description-text .wp-block-image.aligncenter,
.description-text figure.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.description-text .aligncenter img,
.description-text .wp-block-image.aligncenter img,
.description-text figure.aligncenter img {
    margin-left: auto;
    margin-right: auto;
}

.description-text img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.description-text .alignleft,
.description-text .wp-block-image.alignleft,
.description-text figure.alignleft {
    float: left;
    margin: 8px 24px 16px 0;
}

.description-text .alignright,
.description-text .wp-block-image.alignright,
.description-text figure.alignright {
    float: right;
    margin: 8px 0 16px 24px;
}

/* Clear floats after images */
.description-text .alignleft + *,
.description-text .alignright + * {
    clear: none;
}

.description-text p::after {
    content: '';
    display: table;
    clear: both;
}

/* Keyboard shortcut */
.description-text kbd {
    display: inline-block;
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 0 var(--border);
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
}

/* Abbreviation */
.description-text abbr {
    text-decoration: underline dotted;
    cursor: help;
}

/* Definition list */
.description-text dl {
    margin: 24px 0;
}

.description-text dt {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.description-text dd {
    margin: 0 0 16px 0;
    padding-left: 20px;
    border-left: 3px solid var(--border-light);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .description-text h2 {
        font-size: 20px;
        margin: 32px 0 16px;
    }
    
    .description-text h3 {
        font-size: 18px;
        margin: 24px 0 12px;
    }
    
    .description-text h4 {
        font-size: 16px;
    }
    
    .description-text blockquote {
        padding: 20px;
        margin: 20px 0;
    }
    
    .description-text table {
        font-size: 14px;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    
    .description-text table tbody,
    .description-text table thead {
        display: table;
        width: 100%;
        min-width: 500px;
    }
    
    .description-text th,
    .description-text td {
        padding: 10px 12px;
        white-space: normal;
    }
    
    .description-text pre {
        padding: 16px;
        font-size: 13px;
    }
}

/* Mod Features */
.mod-features { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 16px; 
    margin-top: 24px; 
}

.mod-feature { 
    display: flex; 
    align-items: center; 
    gap: 14px; 
    padding: 18px; 
    background: var(--bg-tertiary); 
    border-radius: var(--radius-lg); 
    transition: all 0.2s; 
}

.mod-feature:hover { 
    background: var(--bg-primary); 
    box-shadow: var(--shadow-md); 
}

.mod-feature-icon { 
    width: 44px; 
    height: 44px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: var(--radius-md); 
    color: white; 
    font-size: 20px; 
    flex-shrink: 0; 
}

.mod-feature-content h4 { 
    font-size: 14px; 
    font-weight: 700; 
    margin-bottom: 2px; 
}

.mod-feature-content p { 
    font-size: 12px; 
    color: var(--text-muted); 
    margin: 0;
}

/* Video Block */
.video-wrapper { 
    position: relative; 
    aspect-ratio: 16/9; 
    border-radius: var(--radius-lg); 
    overflow: hidden; 
    background: var(--bg-dark); 
    cursor: pointer; 
}

.video-placeholder { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 100%; 
    color: white; 
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); 
    transition: all 0.3s; 
}

.video-placeholder:hover { 
    background: linear-gradient(135deg, #16213e 0%, #0f3460 100%); 
}

.video-placeholder:hover .video-play-btn { 
    transform: scale(1.1); 
}

.video-thumb { 
    position: absolute; 
    inset: 0; 
    object-fit: cover; 
    opacity: 0.6; 
}

.video-play-btn { 
    width: 80px; 
    height: 80px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: var(--gradient-primary); 
    border-radius: 50%; 
    font-size: 32px; 
    margin-bottom: 16px; 
    box-shadow: 0 8px 32px rgba(14, 165, 233, 0.4); 
    transition: transform 0.3s; 
    position: relative; 
    z-index: 1; 
}

.video-placeholder span { 
    font-size: 16px; 
    font-weight: 600; 
    position: relative; 
    z-index: 1; 
}

.video-wrapper iframe { 
    width: 100%; 
    height: 100%; 
    border: none; 
}

.video-source-btns { 
    display: flex; 
    gap: 12px; 
    margin-top: 16px; 
}

.video-source-btn { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    padding: 12px 20px; 
    background: var(--bg-tertiary); 
    border: 1px solid var(--border); 
    border-radius: var(--radius-full); 
    font-size: 13px; 
    font-weight: 600; 
    color: var(--text-secondary); 
    cursor: pointer; 
    transition: all 0.2s; 
}

.video-source-btn:hover, 
.video-source-btn.active { 
    border-color: var(--accent-1); 
    color: var(--accent-1); 
    background: rgba(14, 165, 233, 0.05); 
}

.video-source-btn i { 
    font-size: 18px; 
}

/* Requirements */
.requirements-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px; 
}

.requirements-card { 
    background: var(--bg-tertiary); 
    border-radius: var(--radius-lg); 
    padding: 24px; 
}

.requirements-header { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    margin-bottom: 20px; 
    padding-bottom: 16px; 
    border-bottom: 1px solid var(--border); 
}

.requirements-header i { 
    font-size: 28px; 
    color: var(--accent-1); 
}

.requirements-header .requirements-platform { 
    font-size: 18px; 
    font-weight: 700; 
}

.requirements-list { 
    display: grid; 
    grid-template-columns: 1fr 1fr;
    gap: 20px; 
}

.requirement-item { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
}

.requirement-label { 
    font-size: 12px; 
    color: var(--text-muted); 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    font-weight: 700; 
}

.requirement-value { 
    font-size: 15px; 
    font-weight: 600; 
    color: var(--text-primary);
}

/* FAQ styles at bottom of file */

/* Install Guide */
.install-steps { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.install-step { 
    display: flex; 
    gap: 16px; 
    padding: 20px; 
    background: var(--bg-tertiary); 
    border-radius: var(--radius-lg); 
}

.install-step-num { 
    width: 36px; 
    height: 36px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: var(--gradient-primary); 
    border-radius: 50%; 
    color: white; 
    font-size: 15px; 
    font-weight: 800; 
    flex-shrink: 0; 
}

.install-step-content .install-step-title { 
    display: block;
    font-size: 15px; 
    font-weight: 700; 
    margin-bottom: 6px; 
}

.install-step-content p { 
    font-size: 13px; 
    color: var(--text-secondary); 
    line-height: 1.6; 
    margin: 0;
}

/* ==========================================
   AD RECOMMEND BLOCK
   ========================================== */
.ad-recommend {
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    border: 2px solid var(--border-light);
    border-radius: var(--radius-xl);
}

.ad-recommend-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ad-recommend-label i {
    color: var(--accent-1);
    font-size: 18px;
}

.ad-recommend-banner {
    text-align: center;
}

.ad-recommend-banner a {
    display: block;
}

.ad-recommend-banner img {
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* Sidebar Sticky Ad */
.sidebar-ad-sticky {
    position: sticky;
    top: 100px;
}

.sidebar-ad-sticky .ad-recommend-label {
    margin-bottom: 12px;
    font-size: 12px;
}

.sidebar-ad-sticky .ad-recommend-banner img {
    border-radius: 0;
}

/* ==========================================
   DOWNLOADS SECTION - REDESIGNED
   ========================================== */
.download-cards { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.download-card { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    padding: 24px 28px; 
    background: var(--bg-tertiary);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-xl); 
    transition: all 0.3s ease; 
    position: relative;
    overflow: hidden;
}

/* Platform-specific border colors */
.download-card.android {
    border-left: 4px solid #3DDC84;
}

.download-card.windows {
    border-left: 4px solid #0078D4;
}

.download-card.partner {
    border-left: 4px solid var(--accent-1);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, var(--bg-tertiary) 100%);
}

.download-card:hover { 
    border-color: var(--accent-1);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); 
}

.download-card.android:hover {
    border-color: #3DDC84;
    box-shadow: 0 12px 40px rgba(61, 220, 132, 0.2);
}

.download-card.windows:hover {
    border-color: #0078D4;
    box-shadow: 0 12px 40px rgba(0, 120, 212, 0.2);
}

.download-card-icon { 
    width: 72px; 
    height: 72px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: var(--radius-xl); 
    font-size: 36px; 
    flex-shrink: 0; 
    position: relative;
}

.download-card-icon.android { 
    background: linear-gradient(145deg, #3DDC84 0%, #00C853 100%); 
    color: white; 
    box-shadow: 0 8px 24px rgba(61, 220, 132, 0.35);
}

.download-card-icon.windows { 
    background: linear-gradient(145deg, #0078D4 0%, #00BCF2 100%); 
    color: white; 
    box-shadow: 0 8px 24px rgba(0, 120, 212, 0.35);
}

.download-card-icon.partner { 
    background: var(--gradient-primary); 
    color: white; 
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
}

.download-card-info { 
    flex: 1; 
    min-width: 0;
}

.download-card-title { 
    font-size: 20px; 
    font-weight: 800; 
    margin-bottom: 10px; 
    color: var(--text-primary);
}

.download-card-meta { 
    display: flex; 
    flex-wrap: wrap;
    gap: 10px; 
    font-size: 13px; 
    color: var(--text-muted); 
}

.download-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    font-weight: 500;
}

.download-card-meta span i {
    font-size: 14px;
    opacity: 0.7;
}

.download-card-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    gap: 10px; 
    padding: 16px 36px; 
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none; 
    border-radius: var(--radius-full); 
    color: white; 
    font-family: inherit; 
    font-size: 16px; 
    font-weight: 700; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35);
    position: relative;
    overflow: hidden;
}

.download-card-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.5s;
}

.download-card-btn:hover::before {
    left: 100%;
}

.download-card-btn i {
    font-size: 22px;
}

.download-card-btn:hover { 
    transform: translateY(-3px) scale(1.02); 
    box-shadow: 0 12px 30px rgba(34, 197, 94, 0.45);
}

.download-card-btn.partner {
    background: var(--gradient-primary);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
}

.download-card-btn.partner:hover {
    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.45);
}

/* Mobile responsive for downloads */
@media (max-width: 768px) {
    .download-card { 
        flex-direction: column; 
        text-align: center;
        padding: 24px 20px;
        gap: 16px;
    }
    
    .download-card.android,
    .download-card.windows,
    .download-card.partner {
        border-left: 2px solid var(--border-light);
        border-top: 4px solid;
    }
    
    .download-card.android {
        border-top-color: #3DDC84;
    }
    
    .download-card.windows {
        border-top-color: #0078D4;
    }
    
    .download-card.partner {
        border-top-color: var(--accent-1);
    }
    
    .download-card-icon {
        width: 64px;
        height: 64px;
        font-size: 30px;
    }
    
    .download-card-title {
        font-size: 18px;
    }
    
    .download-card-meta {
        justify-content: center;
    }
    
    .download-card-btn {
        width: 100%;
        padding: 16px 24px;
    }
}


/* Sidebar Blocks */
.content-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-block { 
    background: var(--bg-secondary); 
    border: 1px solid var(--border-light); 
    border-radius: var(--radius-xl); 
    padding: 24px; 
}

.sidebar-block-header { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin-bottom: 20px; 
}

.sidebar-block-header i { 
    font-size: 22px; 
    color: var(--accent-1); 
}

.sidebar-block-title { 
    font-size: 16px; 
    font-weight: 700; 
}

/* Related Games */
.related-games { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.related-game { 
    display: flex; 
    gap: 14px; 
}

.related-game:hover .related-game-title { 
    color: var(--accent-1); 
}

.related-game-image { 
    width: 80px; 
    height: 60px; 
    border-radius: var(--radius-md); 
    overflow: hidden; 
    flex-shrink: 0; 
}

.related-game-image img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.related-game-info { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

.related-game-title { 
    font-size: 14px; 
    font-weight: 700; 
    margin-bottom: 4px; 
    transition: color 0.2s; 
}

.related-game-meta { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 12px; 
    color: var(--text-muted); 
}

.related-game-meta i { 
    color: #FBBF24; 
}

/* Tags */
.tags-list { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; 
}

.tag-link { 
    padding: 8px 14px; 
    background: var(--bg-tertiary); 
    border-radius: var(--radius-full); 
    font-size: 13px; 
    font-weight: 600; 
    color: var(--text-secondary); 
    transition: all 0.2s; 
}

.tag-link:hover { 
    background: var(--gradient-primary); 
    color: white; 
}

/* Tags toggle */
.tags-hidden {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.tags-list.expanded .tags-hidden {
    display: flex;
}

.tags-toggle {
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-1);
    cursor: pointer;
    transition: all 0.2s;
}

.tags-toggle:hover {
    background: var(--accent-1);
    border-color: var(--accent-1);
    color: white;
}

.tags-toggle-less {
    display: none;
}

.tags-list.expanded .tags-toggle-more {
    display: none;
}

.tags-list.expanded .tags-toggle-less {
    display: inline;
}

/* Responsive */
@media (max-width: 1200px) {
    .game-hero-inner, 
    .content-inner { 
        grid-template-columns: 1fr; 
    }
    
    .game-sidebar { 
        position: static; 
        order: -1; 
    }
    
    .content-sidebar { 
        display: grid; 
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 768px) {
    .breadcrumbs, 
    .game-hero, 
    .content-section { 
        padding-left: 16px; 
        padding-right: 16px; 
    }
    
    .gallery-thumbs { 
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    
    .mod-features, 
    .requirements-grid { 
        grid-template-columns: 1fr; 
    }
    
    .content-sidebar { 
        grid-template-columns: 1fr; 
    }
    
    /* Navigation pills - horizontal scroll on mobile */
    .nav-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
        gap: 6px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .nav-pills::-webkit-scrollbar {
        display: none;
    }
    
    .nav-pill {
        flex: 0 0 auto;
        padding: 8px 14px;
        font-size: 13px;
    }
    
    .nav-pill i {
        font-size: 16px;
    }
    
    .video-source-btns {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .video-source-btn {
        flex: 1;
        min-width: 100px;
        justify-content: center;
    }
    
    /* Content blocks */
    .content-block {
        padding: 20px;
        margin-bottom: 16px;
    }
    
    .block-header {
        gap: 10px;
        margin-bottom: 16px;
    }
    
    .block-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
    
    .block-title {
        font-size: 17px;
    }
    
    /* Game sidebar on mobile */
    .sidebar-card {
        border-radius: var(--radius-lg);
    }
    
    .sidebar-header {
        padding: 16px;
    }
    
    .game-icon {
        width: 72px;
        height: 72px;
    }
    
    .game-title {
        font-size: 18px;
    }
    
    .sidebar-body {
        padding: 16px;
    }
    
    .sidebar-footer {
        padding: 12px 16px;
        flex-wrap: wrap;
    }
    
    .action-btn {
        flex: 1 1 45%;
        padding: 10px;
        font-size: 12px;
    }
    
    /* Game meta */
    .game-meta {
        gap: 10px;
    }
    
    .meta-row {
        font-size: 13px;
    }
    
    .meta-label {
        font-size: 13px;
        gap: 8px;
    }
    
    .meta-label i {
        font-size: 16px;
    }
    
    /* Install steps */
    .install-step {
        padding: 16px;
        gap: 14px;
    }
    
    .install-step-num {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .install-step-content .install-step-title {
        font-size: 14px;
    }
    
    .install-step-content p {
        font-size: 13px;
    }
    
    /* FAQ */
    .faq-question {
        padding: 16px;
        font-size: 14px;
    }
    
    .faq-answer-inner {
        padding: 0 16px;
        font-size: 14px;
    }
    
    .faq-item.active .faq-answer-inner {
        padding: 0 16px 16px;
    }
    
}

@media (max-width: 480px) {
    .breadcrumbs, 
    .game-hero, 
    .content-section { 
        padding-left: 12px; 
        padding-right: 12px; 
    }
    
    .gallery-thumbs {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .sidebar-quick-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    
    .quick-stat {
        font-size: 12px;
    }
    
    .game-info-top {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .game-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }
    
    .game-titles {
        align-items: center;
    }
    
    .download-btn {
        padding: 14px 20px;
        font-size: 15px;
    }
    
    .download-options {
        grid-template-columns: 1fr;
    }
    
    /* LSI tags */
    .sidebar-lsi {
        justify-content: center;
    }
    
    /* Rating widget */
    .rating-widget {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .rating-head {
        align-items: center;
    }
}

/* ==========================================
   STAR RATING SYSTEM - COMPACT SINGLE ROW
   ========================================== */
.rating-widget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 16px 0 0;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

.rating-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.rating-val {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
}

.rating-count {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.rating-stars-interactive {
    display: flex;
    gap: 4px;
}

.rating-star {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 18px;
    color: #cbd5e1; /* Default empty color */
    cursor: pointer;
    transition: all 0.15s ease;
}

.rating-star:hover {
    color: #FBBF24;
    border-color: #FBBF24;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);
}

.rating-star.voted {
    color: #FBBF24;
    border-color: #FBBF24;
    background: rgba(251, 191, 36, 0.1);
}

/* Hover preview effect */
.rating-star.preview {
    color: #FBBF24;
    border-color: #FBBF24;
}

.rating-clickable:hover .rating-star {
    color: var(--border);
}

.rating-clickable:hover .rating-star.preview {
    color: #FBBF24;
}

@media (max-width: 480px) {
    .rating-widget {
        flex-direction: column;
        gap: 12px;
    }
    
    .rating-label {
        display: none;
    }
}

/* ==========================================
   FAQ STYLES (Fixed)
   ========================================== */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.faq-item:hover {
    border-color: var(--accent-1);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.faq-question:hover {
    color: var(--accent-1);
}

.faq-question i {
    font-size: 18px;
    color: var(--text-muted);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
    color: var(--accent-1);
}

/* FAQ Answer - smooth animation using grid */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer > * {
    overflow: hidden;
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}

.faq-answer-inner {
    padding: 0 24px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s, padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-answer-inner {
    padding: 0 24px 20px;
    opacity: 1;
    transform: translateY(0);
}

.faq-answer-inner p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 14px;
    margin: 0 0 12px;
}

.faq-answer-inner p:last-child {
    margin-bottom: 0;
}

.faq-answer-inner ul,
.faq-answer-inner ol {
    margin: 12px 0;
    padding-left: 20px;
    color: var(--text-secondary);
}

.faq-answer-inner li {
    margin-bottom: 8px;
    font-size: 14px;
}

/* ==========================================
   VIDEO SOURCE BUTTONS (Improved)
   ========================================== */
.video-source-btns {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.video-source-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.video-source-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.video-source-btn.active {
    background: var(--gradient-primary);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.video-source-btn i {
    font-size: 18px;
}

.video-wrapper {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    transition: all 0.2s;
}

.video-wrapper:hover .video-placeholder {
    background: rgba(0, 0, 0, 0.3);
}

.video-play-btn {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: 50%;
    font-size: 32px;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
    transition: transform 0.2s;
}

.video-wrapper:hover .video-play-btn {
    transform: scale(1.1);
}

.video-placeholder span {
    font-size: 14px;
    opacity: 0.9;
}

/* ==========================================
   COMMENTS STYLES - REDESIGNED
   ========================================== */
.comments-area {
    margin: 0;
    padding: 0;
}

.comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}

.comments-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.comments-title i {
    color: var(--accent-1);
}

.comments-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 6px 14px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
}

/* Comment list */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comment {
    padding: 24px;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-light);
}

.comment-body {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: start;
}

.comment .avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    border: 3px solid var(--bg-tertiary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comment-content {
    flex: 1;
    min-width: 0;
}

.comment-author {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.comment-author .fn {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
}

.comment-author .fn a {
    color: inherit;
    text-decoration: none;
}

.comment-author .fn a:hover {
    color: var(--accent-1);
}

.comment-author .says {
    display: none;
}

.comment-metadata {
    font-size: 13px;
    color: var(--text-muted);
}

.comment-metadata a {
    color: var(--text-muted);
    text-decoration: none;
}

.comment-metadata a:hover {
    color: var(--accent-1);
}

.comment-content > p {
    color: var(--text-primary);
    line-height: 1.7;
    margin: 0;
    font-size: 15px;
    background: var(--bg-tertiary);
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    margin-top: 4px;
}

.reply {
    margin-top: 12px;
}

.reply {
    align-self: start;
}

.reply a,
.comment-reply-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.reply a:hover,
.comment-reply-link:hover {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
}

/* Nested comments */
.children {
    list-style: none;
    margin: 16px 0 0 0;
    padding: 0 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.children .comment {
    border-left: 3px solid var(--accent-1);
    background: var(--bg-secondary);
}

/* Comment form */
.comment-respond-wrapper {
    margin-top: 24px;
}

.comment-respond {
    background: var(--bg-tertiary);
    padding: 28px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-light);
}

.comment-reply-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 24px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.comment-reply-title small {
    font-size: 14px;
    font-weight: 400;
}

.comment-reply-title small a {
    color: var(--accent-1);
    margin-left: 4px;
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comment-form p {
    margin: 0;
}

.comment-form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.comment-form .required {
    color: #EF4444;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form input[type="number"],
.comment-form textarea {
    width: 100%;
    padding: 14px 18px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    font-family: inherit;
    font-size: 15px;
    color: var(--text-primary);
    transition: all 0.2s;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--accent-1);
    background: var(--bg-primary);
}

.comment-form textarea {
    min-height: 140px;
    resize: vertical;
}

/* Side by side fields */
.comment-notes {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px !important;
}

.comment-form-author,
.comment-form-email {
    display: flex;
    flex-direction: column;
}

@media (min-width: 640px) {
    .comment-form > .comment-form-author,
    .comment-form > .comment-form-email {
        display: inline-block;
        width: calc(50% - 10px);
    }
    
    .comment-form > .comment-form-author {
        margin-right: 20px;
    }
}

.comment-form-cookies-consent,
.comment-form-privacy-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

.comment-form-cookies-consent label,
.comment-form-privacy-consent label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 0;
    color: var(--text-muted);
    line-height: 1.5;
    cursor: pointer;
}

.comment-form-privacy-consent label span,
.comment-form-cookies-consent label span {
    flex: 1;
}

/* WordPress cookies consent - checkbox outside label */
.comment-form-cookies-consent > input[type="checkbox"] {
    margin: 0;
}

.comment-form-cookies-consent > label {
    flex: 1;
}

.comment-form-privacy-consent a {
    color: var(--accent-1);
    text-decoration: none;
    border-bottom: 1px dashed var(--accent-1);
}

.comment-form-privacy-consent a:hover {
    border-bottom-style: solid;
}

/* Custom checkbox styling */
.comment-form-cookies-consent input[type="checkbox"],
.comment-form-privacy-consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 2px;
    flex-shrink: 0;
}

.comment-form-cookies-consent input[type="checkbox"]:checked,
.comment-form-privacy-consent input[type="checkbox"]:checked {
    background: var(--accent-1);
    border-color: var(--accent-1);
}

.comment-form-cookies-consent input[type="checkbox"]:checked::after,
.comment-form-privacy-consent input[type="checkbox"]:checked::after {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 700;
}

.form-submit {
    margin-top: 8px;
}

.submit,
.comment-form .submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

.submit:hover,
.comment-form .submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

/* Captcha field */
.comment-form-captcha {
    display: flex;
    flex-direction: column;
}

.comment-form-captcha input {
    max-width: 200px;
}

/* No comments */
.no-comments {
    text-align: center;
    padding: 48px 24px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    color: var(--text-muted);
}

.no-comments i {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.no-comments p {
    margin: 0;
    font-size: 15px;
}

/* Mobile comments */
@media (max-width: 640px) {
    .comment-respond {
        padding: 20px;
    }
    
    .comment {
        padding: 18px;
    }
    
    .comment-body {
        grid-template-columns: auto 1fr;
        gap: 12px;
    }
    
    .comment .avatar {
        width: 40px;
        height: 40px;
    }
    
    .reply {
        grid-column: 1 / -1;
        margin-top: 8px;
    }
    
    .comment-content > p {
        padding: 12px 14px;
        font-size: 14px;
    }
    
    .children {
        padding-left: 16px;
    }
    
    .children .comment {
        padding: 14px;
    }
}

/* ==========================================
   ADAPTIVE REQUIREMENTS GRID
   ========================================== */
/* When only one platform - full width */
.requirements-grid {
    display: grid;
    gap: 24px;
}

.requirements-grid:has(.requirements-card:only-child) {
    grid-template-columns: 1fr;
}

.requirements-grid:has(.requirements-card + .requirements-card) {
    grid-template-columns: repeat(2, 1fr);
}

/* Fallback for browsers without :has() */
@supports not selector(:has(*)) {
    .requirements-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .requirements-grid,
    .requirements-grid:has(.requirements-card + .requirements-card) {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   RELATED CONTENT (NEWS & GUIDES) - COMPACT DESIGN
   ========================================== */
.related-content-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.related-content-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.related-content-card:hover {
    border-color: var(--accent-1);
    background: var(--bg-secondary);
    transform: translateX(4px);
}

.related-content-card:hover .related-content-title {
    color: var(--accent-1);
}

/* Hide image block by default - show only if has image */
.related-content-image {
    display: none;
}

.related-content-card.has-image .related-content-image {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.related-content-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-content-placeholder {
    display: none;
}

/* Type icon as main visual when no image */
.related-content-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.related-content-card.guide .related-content-icon {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-1);
}

.related-content-card.news .related-content-icon {
    background: rgba(99, 102, 241, 0.1);
    color: #6366F1;
}

.related-content-icon i {
    font-size: 20px;
}

.related-content-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
}

.related-content-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.related-content-card.guide .related-content-type {
    color: var(--accent-1);
}

.related-content-card.news .related-content-type {
    color: #6366F1;
}

.related-content-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.related-content-date {
    font-size: 12px;
    color: var(--text-muted);
}

.related-content-arrow {
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: all 0.2s;
}

.related-content-card:hover .related-content-arrow {
    color: var(--accent-1);
    transform: translateX(3px);
}

.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.view-all-link:hover {
    gap: 10px;
}

/* ==========================================
   PROMOCODES INLINE LIST
   ========================================== */
.promocodes-inline-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.promocode-inline-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.promocode-inline-card:hover {
    border-color: var(--primary);
    transform: translateX(4px);
}

.promocode-inline-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.promocode-inline-icon i {
    font-size: 24px;
    color: white;
}

.promocode-inline-info {
    flex: 1;
    min-width: 0;
}

.promocode-inline-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.promocode-inline-count {
    font-size: 13px;
    color: var(--text-muted);
}

.promocode-inline-arrow {
    font-size: 20px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.promocode-inline-card:hover .promocode-inline-arrow {
    transform: translateX(4px);
    color: var(--primary);
}

/* ==========================================
   DOWNLOAD BLOCK - MINIMALIST
   ========================================== */

/* Password - Compact inline */
.dl-password {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}

.dl-password i {
    font-size: 18px;
    color: var(--accent-1);
}

.dl-password-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.dl-password-value {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-secondary);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    user-select: all;
}

.dl-password-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.dl-password-copy:hover {
    background: var(--accent-1);
    border-color: var(--accent-1);
    color: white;
}

.dl-password-copy.copied {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
}

/* Download List */
.dl-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Download Item */
.dl-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Download Button - Main style */
.dl-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.dl-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-1);
    transform: translateX(4px);
}

/* Platform colors on icon */
.dl-btn-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.dl-btn.android .dl-btn-icon {
    color: #3DDC84;
}

.dl-btn.windows .dl-btn-icon {
    color: #0078D4;
}

/* Partner button - featured accent style */
.dl-btn.partner {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, var(--bg-tertiary) 100%);
    border-color: rgba(99, 102, 241, 0.3);
    border-left: 4px solid var(--accent-1);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.1);
    position: relative;
}

.dl-btn.partner:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, var(--bg-secondary) 100%);
    border-color: var(--accent-1);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.2);
    transform: translateX(4px);
}

.dl-btn.partner .dl-btn-icon {
    color: var(--accent-1);
    font-size: 24px;
}

/* Info block (title + details) */
.dl-btn-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Title */
.dl-btn-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

/* Details (version + features) */
.dl-btn-details {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.dl-btn-version {
    font-weight: 600;
    color: var(--accent-1);
}

.dl-btn-features {
    line-height: 1.4;
}

/* Badges inline */
.dl-btn-badges {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.dl-badge {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dl-badge.type {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.dl-badge.mod {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #F59E0B;
}

.dl-badge.partner {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--accent-1);
}

/* Size */
.dl-btn-size {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Action Button */
.dl-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: var(--radius-full);
    color: white;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
}

.dl-btn-action i {
    font-size: 16px;
}

.dl-btn:hover .dl-btn-action {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}

.dl-btn-action.partner {
    background: var(--gradient-primary);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
    padding: 8px 20px;
}

.dl-btn:hover .dl-btn-action.partner {
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
    transform: scale(1.07);
}

.dl-btn-action.store {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

/* Mirror link - subtle */
.dl-mirror {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px 6px 46px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.dl-mirror:hover {
    color: var(--accent-1);
}

.dl-mirror i {
    font-size: 14px;
}

/* Responsive - Download Block */
@media (max-width: 768px) {
    .dl-password {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .dl-password-copy {
        margin-left: auto;
    }
    
    /* Mobile download button - complete redesign */
    .dl-btn {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto;
        gap: 8px 12px;
        padding: 16px;
    }
    
    .dl-btn-icon {
        grid-row: 1;
        grid-column: 1;
        font-size: 24px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
    }
    
    .dl-btn.android .dl-btn-icon {
        background: rgba(61, 220, 132, 0.15);
        color: #3DDC84;
    }
    
    .dl-btn.windows .dl-btn-icon {
        background: rgba(0, 120, 212, 0.15);
        color: #0078D4;
    }
    
    .dl-btn.partner .dl-btn-icon {
        background: rgba(99, 102, 241, 0.15);
        color: var(--accent-1);
    }
    
    .dl-btn-info {
        grid-row: 1;
        grid-column: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
    }
    
    .dl-btn-title {
        font-size: 15px;
        line-height: 1.3;
    }
    
    .dl-btn-details {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    /* Second row: badges + size */
    .dl-btn-badges {
        grid-row: 2;
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border-light);
    }
    
    .dl-btn-size {
        margin-left: auto;
        font-size: 13px;
        font-weight: 600;
    }
    
    /* Third row: action button full width */
    .dl-btn-action {
        grid-row: 3;
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: 14px;
        margin-top: 4px;
    }
    
    .dl-btn:hover {
        transform: none;
    }
    
    .dl-btn:hover .dl-btn-action {
        transform: none;
    }
    
    .dl-mirror {
        padding-left: 16px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .dl-btn {
        padding: 14px;
    }
    
    .dl-btn-icon {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    
    .dl-btn-title {
        font-size: 14px;
    }
    
    .dl-badge {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .dl-btn-size {
        font-size: 12px;
    }
    
    .dl-btn-action {
        padding: 10px 14px;
        font-size: 13px;
    }
}