/* ============ game-detail.css ============ */
.gd-hero { position: relative; min-height: 360px; display: flex; align-items: flex-end; overflow: hidden; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.gd-hero .gd-hero-bg { position: absolute; inset: 0; z-index: 0; }
.gd-hero .gd-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1); }
.gd-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10,10,15,0.96) 8%, rgba(10,10,15,0.55) 55%, rgba(10,10,15,0.35) 100%); }
.gd-hero .container { position: relative; z-index: 2; padding-block: var(--space-8); }
.gd-hero .gd-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-block: var(--space-3); }
.gd-hero h1 { font-size: clamp(2rem, 6vw, 2.75rem); }
.gd-hero .gd-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.gd-layout { display: grid; gap: var(--space-12); padding-block: var(--space-16); }
@media (min-width: 1000px) { .gd-layout { grid-template-columns: 1.9fr 1fr; align-items: start; } }

.gd-content h2 { font-size: var(--text-2xl); margin-top: var(--space-12); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.gd-content h2:first-child { margin-top: 0; }
.gd-content p { margin-bottom: var(--space-4); }
.gd-content ol.steps { counter-reset: step; display: flex; flex-direction: column; gap: var(--space-4); }
.gd-content ol.steps li { position: relative; padding-left: 56px; min-height: 40px; display: flex; align-items: center; }
.gd-content ol.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--color-gradient-gold); color: #0a0a0f; font-family: var(--font-display); font-weight: 700; border-radius: var(--radius-md); }
.gd-content ul.feature-list { display: grid; gap: var(--space-3); }
.gd-content ul.feature-list li { position: relative; padding-left: 32px; color: var(--color-text-secondary); }
.gd-content ul.feature-list li::before { content: "▸"; position: absolute; left: 8px; color: var(--color-accent-gold); }
.tip-cards { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .tip-cards { grid-template-columns: repeat(2,1fr); } }
.tip-card { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent-gold); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); }
.tip-card h4 { font-size: var(--text-lg); color: var(--color-accent-gold); margin-bottom: var(--space-2); }
.tip-card p { font-size: var(--text-sm); margin: 0; }

/* Sidebar */
.gd-sidebar { display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: calc(var(--header-height) + var(--space-4)); }
.side-card { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.side-card.gold { border-color: var(--color-warning-border); box-shadow: var(--shadow-glow); }
.side-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.side-card .btn { margin-bottom: var(--space-3); }
.side-card .store-badge { width: 100%; margin-bottom: var(--space-3); }
.facts-table { width: 100%; border-collapse: collapse; }
.facts-table td { padding: var(--space-2) 0; font-size: var(--text-sm); border-bottom: 1px solid var(--color-border); }
.facts-table tr:last-child td { border-bottom: 0; }
.facts-table td:first-child { color: var(--color-text-secondary); }
.facts-table td:last-child { text-align: right; font-family: var(--font-display); font-weight: 600; color: var(--color-accent-gold); }

.related-mini { display: flex; flex-direction: column; gap: var(--space-3); }
.related-mini a { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2); border-radius: var(--radius-md); transition: background var(--transition-base); }
.related-mini a:hover { background: var(--color-bg-tertiary); }
.related-mini img { width: 60px; height: 46px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.related-mini .rm-name { font-family: var(--font-display); font-weight: 600; color: var(--color-text-primary); font-size: var(--text-sm); }
.related-mini .rm-cat { font-size: var(--text-xs); color: var(--color-text-muted); }

.related-strip-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(2,1fr); }
@media (min-width: 900px) { .related-strip-grid { grid-template-columns: repeat(4,1fr); } }