/* ==========================================================================
 RULES.MYTHRAMC.RU — Главная
========================================================================== */

.rules-hub {
 max-width: 900px;
 margin: 0 auto;
 padding: 60px 20px 80px;
 font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
 color: var(--text-color);
 text-align: center;
}

.rules-hub-header {
 margin-bottom: 50px;
}

.rules-hub-header h1 {
 font-size: 2.4rem;
 font-weight: 900;
 margin: 0 0 12px 0;
 background: linear-gradient(45deg, #ffe066, var(--gold-color, #f5af19), #e65c00);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 letter-spacing: 1px;
}

.rules-hub-header p {
 color: var(--text-muted);
 font-size: 1.05rem;
 margin: 0;
}

.rules-cards {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 24px;
 margin-bottom: 50px;
}

.rules-card {
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: var(--border-radius, 12px);
 padding: 36px 28px;
 text-decoration: none !important;
 color: var(--text-color);
 transition: all 0.25s ease;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 16px;
}

.rules-card:hover {
 border-color: var(--accent-color, #ff3b38);
 transform: translateY(-6px);
 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.rules-card-icon {
 font-size: 3rem;
 line-height: 1;
}

.rules-card h2 {
 margin: 0;
 font-size: 1.35rem;
 font-weight: 800;
}

.rules-card p {
 margin: 0;
 color: var(--text-muted);
 font-size: 0.95rem;
 line-height: 1.5;
}

.rules-card-btn {
 margin-top: 10px;
 padding: 10px 22px;
 background: var(--btn-grad, linear-gradient(135deg, #ff3b38, #d32f2f));
 color: #fff !important;
 border-radius: 8px;
 font-weight: 700;
 font-size: 0.9rem;
 transition: filter 0.2s;
}

.rules-card:hover .rules-card-btn {
 filter: brightness(1.15);
}

.rules-hub-footer {
 color: var(--text-muted);
 font-size: 0.85rem;
}

.rules-hub-footer a {
 color: var(--accent-color, #ff3b38);
 text-decoration: none;
 font-weight: 600;
 margin: 0 8px;
}

.rules-hub-footer a:hover {
 opacity: 0.8;
}

.powered-by-hidden {
 position: absolute;
 left: -9999px;
 width: 1px;
 height: 1px;
 overflow: hidden;
 opacity: 0;
 pointer-events: none;
 font-size: 0;
}

@media (max-width: 600px) {
 .rules-hub-header h1 {
 font-size: 1.8rem;
 }
 .rules-card {
 padding: 28px 20px;
 }
}