/* ============================================================
   RATINGS PAGE STYLES
   ============================================================ */

.ratings-page { min-height: 100vh; background: #060608; padding: 30px 20px 60px; }
.ratings-page .container { max-width: 1300px; margin: 0 auto; }
.ratings-page h1 { color: #c0c0c0; font-size: 24px; font-weight: 800; text-align: center; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 2px; }
.ratings-page .subtitle { color: #707070; text-align: center; font-size: 11px; margin-bottom: 24px; }
.ratings-back-link { display: inline-block; color: #808080; font-size: 11px; margin-bottom: 16px; }
.ratings-back-link:hover { color: #c9a96e; }

/* Табы */
.ratings-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.ratings-tab { 
    display: flex; align-items: center; gap: 6px;
    padding: 10px 18px; color: #808080; font-size: 11px; font-weight: 700; 
    text-decoration: none; text-transform: uppercase; letter-spacing: 1px; 
    border-radius: 6px; transition: all 0.2s; 
    background: rgba(14,11,8,0.5); border: 1px solid #1a1820;
}
.ratings-tab:hover { color: #c9a96e; background: rgba(20,16,10,0.8); border-color: #2a2520; }
.ratings-tab.active { color: #c9a96e; background: rgba(201,169,110,0.08); border-color: rgba(201,169,110,0.2); }
.ratings-tab .ratings-tab-icon { font-size: 14px; }

.tab-content { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ===== PVP ТАБЛИЦА ===== */
.ratings-table { width: 100%; border-collapse: collapse; }
.ratings-table th { text-align: left; color: #888; font-size: 9px; padding: 10px 12px; border-bottom: 2px solid #1a1820; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; background: rgba(10,8,6,0.6); }
.ratings-table td { padding: 10px 12px; border-bottom: 1px solid #0e0e12; font-size: 13px; color: #b0b0b0; }
.ratings-table tr:hover td { background: rgba(201,169,110,0.02); }
.ratings-table .r-rank { color: #c9a96e; font-weight: 800; width: 35px; }
.ratings-table .r-name { font-weight: 700; }
.ratings-table .r-class { font-size: 10px; color: #888; }
.ratings-table .r-clan { color: #8ca8c8; font-size: 11px; }
.ratings-table .r-online { color: #5a8a5a; font-weight: 700; }
.ratings-table .r-offline { color: #666; }
.ratings-table .r-score { color: #c9a96e; font-weight: 800; font-size: 14px; }
.ratings-table .r-time { color: #707070; font-size: 11px; }
.ratings-table .r-clan-crest { width: 14px; height: 14px; vertical-align: middle; margin-right: 4px; border-radius: 2px; }
.ratings-table .r-empty { text-align: center; color: #666; padding: 30px; }

/* ===== КЛАНЫ ===== */
.clan-card { 
    display: flex; align-items: center; gap: 16px; 
    background: rgba(14,11,8,0.6); border: 1px solid #1a1820;
    border-radius: 8px; padding: 18px 20px; margin-bottom: 10px; transition: all 0.2s;
}
.clan-card:hover { border-color: #2a2520; background: rgba(18,14,10,0.8); }
.clan-card .clan-rank { font-size: 20px; font-weight: 900; color: #c9a96e; width: 40px; text-align: center; flex-shrink: 0; }
.clan-card .clan-crest-lg { width: 48px; height: 48px; border-radius: 6px; border: 1px solid #2a2520; flex-shrink: 0; object-fit: contain; background: #0a0808; }
.clan-card .clan-info { flex: 1; min-width: 0; }
.clan-card .clan-name-lg { font-size: 16px; font-weight: 800; color: #c0c0c0; margin-bottom: 2px; }
.clan-card .clan-ally { font-size: 10px; color: #707070; margin-bottom: 2px; }
.clan-card .clan-leader { font-size: 10px; color: #888; }
.clan-card .clan-stats { text-align: right; flex-shrink: 0; }
.clan-card .clan-stats span { display: block; }
.clan-card .clan-level { color: #c9a96e; font-weight: 700; font-size: 14px; }
.clan-card .clan-count { color: #888; font-size: 10px; }
.clan-card .clan-rep { color: #5a8a5a; font-weight: 700; font-size: 13px; }

/* ===== КЛАССЫ ===== */
.classes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 24px; }
.class-select-card { 
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: rgba(14,11,8,0.5); border: 1px solid #1a1820;
    border-radius: 6px; text-decoration: none; transition: all 0.2s;
}
.class-select-card:hover { border-color: #c9a96e; background: rgba(20,16,10,0.8); }
.class-select-card.selected { border-color: #c9a96e; background: rgba(201,169,110,0.08); }
.class-select-card .class-name-sm { color: #b0b0b0; font-size: 12px; font-weight: 600; }

.class-detail h3 { color: #c9a96e; font-size: 18px; font-weight: 800; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; text-align: center; }
.class-detail .class-back-link { display: block; text-align: center; color: #808080; font-size: 11px; margin-bottom: 16px; }

/* ===== ЗАМКИ ===== */
.castles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.castle-card { background: rgba(14,11,8,0.6); border: 1px solid #1a1820; border-radius: 8px; padding: 18px; text-align: center; transition: all 0.2s; }
.castle-card:hover { border-color: #2a2520; }
.castle-card .castle-icon { font-size: 32px; margin-bottom: 8px; }
.castle-card h4 { color: #c0c0c0; font-size: 14px; margin-bottom: 4px; }
.castle-card .castle-owner { color: #c9a96e; font-weight: 700; font-size: 12px; }

/* ===== ЭПИК РБ ===== */
.epic-alive { color: #5a8a5a; font-weight: 700; }
.epic-dead { color: #a05050; font-weight: 700; }

/* ===== ФУТЕР ===== */
.ratings-footer { text-align: center; margin-top: 40px; }
.ratings-footer a { color: #c9a96e; font-size: 11px; }

/* ===== АДАПТИВ ===== */
@media (max-width: 768px) {
    .ratings-page h1 { font-size: 18px; }
    .ratings-tab { font-size: 9px; padding: 8px 12px; }
    .ratings-tab .ratings-tab-icon { font-size: 12px; }
    .ratings-table td, .ratings-table th { padding: 6px 8px; font-size: 11px; }
    .ratings-table .r-score { font-size: 12px; }
    .classes-grid { grid-template-columns: repeat(2, 1fr); }
    .castles-grid { grid-template-columns: 1fr; }
    .clan-card { flex-wrap: wrap; text-align: center; }
    .clan-card .clan-stats { text-align: center; width: 100%; }
    .clan-card .clan-stats span { display: inline; margin: 0 8px; }
}
.ratings-table .r-clan-crest { width: 16px; height: 16px; vertical-align: middle; margin-right: 6px; border-radius: 3px; }