/* 
==============================================
 ROM站点的外部CSS样式表 (style.css)
============================================== 
*/

/* 引入一个更现代的字体 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --- 基础和颜色变量定义 --- */
:root {
    --base-bg: #0A0F1A;
    --glass-bg: rgba(15, 23, 42, 0.45);
    --glass-border: rgba(255, 255, 255, 0.12);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --accent-primary: #38bdf8; /* Light Blue */
    --card-bg: rgba(30, 41, 59, 0.3);
    --card-border: rgba(255, 255, 255, 0.07);
    --card-hover-bg: rgba(30, 41, 59, 0.6);
    --shadow-color: rgba(0, 0, 0, 0.4);

    /* --- 用于卡片标题的“彩虹”色盘 --- */
    --rainbow-1: #f472b6; /* Pink */
    --rainbow-2: #4ade80; /* Green */
    --rainbow-3: #60a5fa; /* Blue */
    --rainbow-4: #facc15; /* Yellow */
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* --- 关键：在这里设置您的背景图片 --- */
body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    color: var(--text-primary);

    /* --- 背景设置 --- */
    background-color: var(--base-bg);
    
    /* 将 'your-image.jpg' 替换为您自己的图片链接或路径 */
    background-image: linear-gradient(rgba(10, 15, 26, 0.6), rgba(10, 15, 26, 0.85)), url('your-image.jpg');
    
    background-size: cover; /* 覆盖整个屏幕 */
    background-position: center center; /* 图像居中 */
    background-attachment: fixed; /* 背景图不随滚动条滚动 */
}

.glass-shell {
    width: min(1200px, 100%);
    padding: clamp(2rem, 4vw, 3rem);
    border-radius: 32px;
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 40px 100px var(--shadow-color);
    text-align: center;
}

/* --- 动态彩虹标题 --- */
@keyframes rainbow-text-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

h1 {
    margin: 0 auto 0.75rem;
    max-width: 800px;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    
    background: linear-gradient(120deg, #f472b6, #facc15, #4ade80, #60a5fa, #c084fc, #f472b6);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    animation: rainbow-text-animation 10s ease-in-out infinite;
}

p.subtitle {
    margin: 0 auto 2.5rem;
    max-width: 620px;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
}

.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; margin-bottom: 3rem; }
.meta-item { border-radius: 20px; padding: 1.5rem; background: var(--card-bg); border: 1px solid var(--card-border); transition: background-color 0.2s ease, transform 0.2s ease; }
.meta-item:hover { background-color: var(--card-hover-bg); transform: translateY(-4px); }
.meta-item h3 { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--text-tertiary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.meta-item p { margin: 0; font-size: 1.75rem; font-weight: 600; }

.search-box { margin-bottom: 2rem; position: relative; }
.search-box svg { position: absolute; top: 50%; left: 1.5rem; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: var(--text-tertiary); z-index: 1; }
.search-box input { width: 100%; padding: 1.25rem 1.5rem 1.25rem 3.5rem; border-radius: 18px; background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-primary); font-size: 1.1rem; outline: none; transition: all 0.2s ease; }
.search-box input:focus { border-color: var(--accent-primary); background: var(--glass-bg); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3); }
.search-box input::placeholder { color: var(--text-tertiary); }

.device-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; text-align: left; }
.device-card { border-radius: 24px; background: var(--card-bg); border: 1px solid var(--card-border); overflow: hidden; transition: all 0.3s ease; }
.device-card[hidden] { display: none; }
.device-card:nth-child(4n+1) .summary-head h4 { color: var(--rainbow-1); }
.device-card:nth-child(4n+2) .summary-head h4 { color: var(--rainbow-2); }
.device-card:nth-child(4n+3) .summary-head h4 { color: var(--rainbow-3); }
.device-card:nth-child(4n+4) .summary-head h4 { color: var(--rainbow-4); }
.device-card[open] { background: var(--glass-bg); box-shadow: 0 25px 50px -12px var(--shadow-color); transform: translateY(-4px); }
.device-card summary { cursor: pointer; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; list-style: none; transition: background-color 0.2s ease; }
.device-card summary:hover { background: var(--card-hover-bg); }
.device-card summary::-webkit-details-marker { display: none; }

.summary-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.summary-head h4 { margin: 0; font-size: 1.3rem; font-weight: 600; transition: color 0.3s ease; }
.summary-head .pill { display: inline-flex; align-items: center; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--text-tertiary); background: transparent; color: var(--text-tertiary); }

.device-meta { margin: 0; color: var(--text-secondary); font-size: 0.95rem; }
.summary-foot { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-tertiary); align-items: center; }

.expander-icon { position: relative; width: 24px; height: 24px; transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
.expander-icon::before, .expander-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background-color: var(--text-tertiary); border-radius: 2px; transition: transform 0.3s ease; transform-origin: center; }
.expander-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.expander-icon::before { transform: translate(-50%, -50%) rotate(0deg); }
details[open] .expander-icon { transform: rotate(135deg); }

.version-list { border-top: 1px solid var(--card-border); display: flex; flex-direction: column; }
.version-item { padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: background-color 0.2s ease; }
.version-item:last-child { border-bottom: none; }
.version-item:hover { background-color: var(--card-hover-bg); }
.version-info { display: flex; flex-direction: column; gap: 0.3rem; }
.version-info strong { font-size: 1rem; font-weight: 600; }
.version-meta { font-size: 0.85rem; color: var(--text-tertiary); }

.notes { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; padding-left: 1rem; border-left: 2px solid var(--accent-primary); }
.download-link { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent-primary); font-weight: 600; text-decoration: none; transition: all 0.2s ease; }
.download-link:hover { color: #fff; text-decoration: none; gap: 0.75rem; }

#no-results-message { display: none; padding: 2rem; text-align: center; color: var(--text-secondary); }