/* skin/css/index.css */

/* Banner */
.banner-box { padding: 15px 15px 0; }
.main-swiper {
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(161, 140, 209, 0.4);
}
.swiper-pagination-bullet-active { background: #fff; opacity: 1; }

/* 1. App Grid (Icon Box) */
.app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 20px;
}
.app-cell { text-align: center; }
.app-cell img {
    width: 54px; height: 54px;
    border-radius: 18px;
    margin: 0 auto 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.app-cell span { font-size: 12px; color: #555; }

/* 2. Row Card (Hot Games) */
.card-list-box { display: flex; flex-direction: column; }
.row-card {
    display: flex; align-items: center;
    margin-bottom: 15px;
    transition: transform 0.2s;
}
.row-card:active { transform: scale(0.98); }
.row-card img { width: 56px; height: 56px; border-radius: 14px; margin-right: 15px; }
.rc-info { flex: 1; }
.rc-info h3 { font-size: 16px; font-weight: bold; margin-bottom: 3px; }
.rc-info p { font-size: 12px; color: #999; }

/* 3 & 5. Flex Icons (Android) */
.icon-flow {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 15px; padding: 20px;
}
.if-item { text-align: center; }
.if-item img {
    width: 40px; height: 40px; border-radius: 12px; margin: 0 auto 5px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}
.if-item span { font-size: 12px; color: #666; }

/* 4. Mini List (Hot Soft) */
.mini-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 15px; }
.ml-item {
    display: flex; align-items: center;
    background: rgba(255,255,255,0.5);
    padding: 10px; border-radius: 15px;
}
.ml-item img { width: 36px; height: 36px; border-radius: 10px; margin-right: 10px; }
.ml-info { flex: 1; }
.ml-info h4 { font-size: 13px; font-weight: bold; }
.ml-info p { font-size: 10px; color: #999; }
.ml-btn {
    width: 24px; height: 24px; border-radius: 50%;
    background: #fff; color: #fa709a;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 6. Rank Home */
.rank-home { padding: 10px 20px; }
.rh-row {
    display: flex; align-items: center;
    padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
}
.rh-row:last-child { border-bottom: none; }
.rh-idx { width: 24px; text-align: center; font-weight: bold; color: #ccc; margin-right: 10px; }
.rh-idx.top { color: #fa709a; font-size: 18px; }
.rh-name { flex: 1; font-size: 14px; color: #444; }
.rh-hot { font-size: 12px; color: #999; }