/* skin/css/index.css */

/* Banner */
.banner-float { padding: 15px; }
.main-swiper {
    border-radius: 20px; overflow: hidden;
    box-shadow: 10px 10px 20px rgba(166, 180, 200, 0.4), -10px -10px 20px rgba(255,255,255,0.8);
}
.swiper-pagination-bullet { background: #fff; opacity: 0.6; }
.swiper-pagination-bullet-active { background: var(--clay-primary); opacity: 1; }

/* 2. Hot Games (Row Card) */
.clay-list-group { padding: 0 20px; }
.row-card {
    display: flex; align-items: center; padding: 15px;
    margin-bottom: 20px; /* 增加间距以展示阴影 */
    transition: transform 0.2s;
}
.row-card:active { transform: scale(0.98); box-shadow: var(--shadow-inner); }
.row-card img {
    width: 56px; height: 56px; border-radius: 16px; margin-right: 15px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
.rc-info { flex: 1; }
.rc-info h3 { font-size: 16px; font-weight: 800; margin-bottom: 3px; }
.rc-info p { font-size: 12px; color: var(--clay-sub); }

/* 3 & 5. Grid Box */
.grid-box {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 15px; padding: 20px;
    margin: 0 20px 25px; /* Overwrite margin */
}
.grid-cell { text-align: center; width: 100%; display: block; overflow: hidden;}
.grid-cell img { width: 44px; height: 44px; border-radius: 14px; margin: 0 auto 5px; }
.grid-cell span { font-size: 11px; font-weight: bold; color: var(--clay-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 4. Mini List */
.mini-list {
    margin: 0 20px 25px; padding: 10px 20px;
}
.ml-row {
    display: flex; align-items: center; padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.ml-row:last-child { border-bottom: none; }
.ml-row img { width: 36px; height: 36px; border-radius: 10px; margin-right: 12px; }
.ml-info { flex: 1; }
.ml-info h4 { font-size: 14px; font-weight: bold; }
.ml-info p { font-size: 11px; color: var(--clay-sub); }
.btn-clay.small { padding: 4px 12px; font-size: 11px; border-radius: 15px; }

/* 6. Rank */
.rank-home { margin: 0 20px; padding: 5px 20px; }
.rank-line {
    display: flex; align-items: center; padding: 12px 0;
    border-bottom: 1px dashed #eee;
}
.rank-line:last-child { border-bottom: none; }
.rl-n { width: 24px; text-align: center; font-weight: 900; color: #d1d5db; margin-right: 10px; }
.rl-n.top { color: var(--clay-primary); font-size: 18px; text-shadow: 1px 1px 0 #fff; }
.rl-name { flex: 1; font-weight: bold; font-size: 14px; }
.rl-hot { font-size: 12px; color: var(--clay-sub); }