/* ==========================================================
   7. 游戏版本
   section-versions.css: Game Version Card Styles
   ========================================================== */

/* Version card base styles in components/cards.css */
.version-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-top: 40px; align-items: stretch; }
.version-card { padding: 35px; min-height: 700px; display: flex; flex-direction: column; }

/* 顶部边框高亮 */
.version-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--glass-border); transition: background-color 0.3s ease; }
.version-card.singleplayer::before { background: var(--primary-color); box-shadow: 0 0 10px rgba(74, 99, 181, 0.5); }
.version-card.dlc::before { background: var(--blood-red); box-shadow: 0 0 10px rgba(231, 76, 60, 0.5); } /* 血红色 DLC */
.version-card.online::before { background: var(--secondary-color); box-shadow: 0 0 10px rgba(230, 213, 138, 0.5); } /* 金色联机版 */

/* 版本徽章 */
.version-badge { position: absolute; top: 15px; right: 15px; background: rgba(13, 16, 25, 0.7); color: var(--secondary-color); font-size: 0.8rem; font-weight: 500; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--glass-border); backdrop-filter: blur(3px); }
.version-card.dlc .version-badge { color: var(--blood-red); border-color: rgba(231, 76, 60, 0.3); }
.version-card.online .version-badge { color: var(--secondary-color); border-color: rgba(230, 213, 138, 0.3); }

/* 头部和 Logo */
.version-header { text-align: center; margin-bottom: 25px; }
.version-logo { width: 55px; height: 55px; background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; color: white; font-size: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.version-card.singleplayer .version-logo i { color: var(--primary-color); text-shadow: 0 0 8px rgba(74, 99, 181, 0.5); }
.version-card.dlc .version-logo i { color: var(--blood-red); text-shadow: 0 0 8px rgba(231, 76, 60, 0.5); } /* 血红色图标 */
.version-card.online .version-logo i { color: var(--secondary-color); text-shadow: 0 0 8px rgba(230, 213, 138, 0.5); } /* 金色图标 */
.version-title { font-size: 1.8rem; margin-bottom: 5px; color: var(--text-light); text-shadow: var(--text-shadow); }
.version-release { font-size: 1rem; color: var(--text-muted); }

/* 定价 */
.version-pricing { text-align: center; margin-bottom: 25px; padding: 15px 0; border-top: 1px solid rgba(230, 213, 138, 0.1); border-bottom: 1px solid rgba(230, 213, 138, 0.1); }
.price-amount { font-size: 2rem; font-weight: bold; margin-bottom: 5px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
.version-card.singleplayer .price-amount { color: var(--primary-color); }
.version-card.dlc .price-amount { color: var(--blood-red); } /* 血红色价格 */
.version-card.online .price-amount { color: var(--secondary-color); } /* 金色价格 */
.price-type { font-size: 0.9rem; color: var(--text-muted); }

/* 特性列表 */
.version-features { margin-bottom: 25px; flex-grow: 1; }
.feature-list { display: flex; flex-direction: column; gap: 12px; }
.feature-list li { display: flex; align-items: flex-start; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; text-shadow: var(--text-shadow); }
.feature-list li i { margin-right: 10px; font-size: 1.1rem; margin-top: 3px; text-shadow: 0 0 5px currentColor; }
.version-card.singleplayer .feature-list li i { color: var(--primary-color); }
.version-card.dlc .feature-list li i { color: var(--blood-red); } /* 血红色勾选 */
.version-card.online .feature-list li i { color: var(--secondary-color); } /* 金色勾选 */

/* 备注和 CTA */
.version-note { margin-bottom: 25px; font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; text-shadow: var(--text-shadow); }
.version-cta { text-align: center; margin-top: auto; }
/* 按钮基础样式在 components/buttons.css 中 */
.preorder-button.singleplayer { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); border-color: rgba(74, 99, 181, 0.5); }
.preorder-button.singleplayer:hover { box-shadow: 0 6px 15px rgba(74, 99, 181, 0.3); }
.preorder-button.dlc { background: linear-gradient(135deg, var(--blood-red), #c13b2d); border-color: rgba(231, 76, 60, 0.5); } /* 血红色按钮 */
.preorder-button.dlc:hover { box-shadow: 0 6px 15px rgba(231, 76, 60, 0.3); }
.preorder-button.online { background: linear-gradient(135deg, var(--secondary-color), #b8a45e); border-color: rgba(230, 213, 138, 0.5); color: var(--dark-bg); }
.preorder-button.online:hover { box-shadow: 0 6px 15px rgba(230, 213, 138, 0.3); color: var(--dark-bg); }
.reservation-counter { font-size: 0.9rem; color: var(--text-muted); text-shadow: var(--text-shadow); }