/* ===== PUNKTIARVESTUSE LEHEKÜLGEDE CSS ===== */
/* rules-pages.css - Lisada assets/css/ kausta */

/* Base Styles */
.rules-main {
    padding: var(--spacing-8) 0;
    min-height: 100vh;
    background: var(--gray-50);
}

/* Page Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--spacing-8);
    gap: var(--spacing-6);
}

.page-header-content {
    flex: 1;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--primary-dark);
}

.breadcrumb i {
    font-size: var(--font-size-xs);
    color: var(--gray-400);
}

.page-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--gray-900);
}

.page-title i {
    color: var(--primary-color);
    font-size: var(--font-size-2xl);
}

.page-subtitle {
    color: var(--gray-600);
    font-size: var(--font-size-lg);
    margin: 0;
    line-height: 1.5;
}

/* Discipline Badges */
.discipline-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--radius-xl);
    color: white;
    font-weight: 600;
    font-size: var(--font-size-lg);
    box-shadow: var(--shadow);
    flex-shrink: 0;
}

.discipline-badge.koolisoit {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.discipline-badge.takistussoit {
    background: linear-gradient(135deg, var(--success-color), #047857);
}

.discipline-badge.kestvusratsutamine {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

/* Summary Card */
.summary-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
}

.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
}

.summary-header h2 {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--gray-900);
}

.summary-highlight {
    background: var(--primary-color);
    color: white;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-lg);
    font-weight: 600;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-6);
}

.summary-item {
    text-align: center;
    padding: var(--spacing-4);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-fast);
}

.summary-item:hover {
    transform: translateY(-2px);
}

.summary-number {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-2);
    line-height: 1;
}

.summary-label {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--spacing-1);
    font-size: var(--font-size-sm);
}

.summary-detail {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin: 0;
}

/* Rules Grid */
.rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

.rules-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: transform var(--transition-fast);
}

.rules-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.rules-card.main-card {
    grid-column: 1 / -1;
    max-width: none;
}

.rules-card.highlight {
    border: 2px solid var(--primary-color);
    background: linear-gradient(135deg, white, color-mix(in srgb, var(--primary-color) 5%, transparent));
}

.card-header {
    padding: var(--spacing-5) var(--spacing-6);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.card-header h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-2);
    color: var(--gray-900);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.card-header i {
    color: var(--primary-color);
    font-size: 20px;
}

.card-header p {
    color: var(--gray-600);
    margin: 0;
    font-size: var(--font-size-sm);
}

.card-content {
    padding: var(--spacing-6);
}

/* ===== KOOLISÕIDU SPETSIIFILISED STIILID ===== */

/* Points Table */
.points-table {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.points-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--gray-50);
    border-radius: var(--radius);
    align-items: center;
    transition: transform var(--transition-fast);
}

.points-row:hover {
    transform: translateX(2px);
}

.points-row.high-points {
    background: color-mix(in srgb, var(--success-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--success-color) 20%, transparent);
}

.points-row.low-points {
    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger-color) 20%, transparent);
}

.points-row.participation {
    background: color-mix(in srgb, var(--warning-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning-color) 20%, transparent);
}

.percentage {
    font-weight: 600;
    color: var(--gray-900);
}

.points {
    font-weight: 700;
    color: var(--primary-color);
    font-size: var(--font-size-lg);
}

.grade {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

/* Bonus Grid */
.bonus-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.bonus-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4);
    border-radius: var(--radius);
    border: 2px solid var(--gray-200);
    transition: transform var(--transition-fast);
}

.bonus-item:hover {
    transform: translateX(2px);
}

.bonus-item.highest {
    border-color: #ffd700;
    background: color-mix(in srgb, #ffd700 10%, transparent);
}

.bonus-item.high {
    border-color: #c0c0c0;
    background: color-mix(in srgb, #c0c0c0 10%, transparent);
}

.bonus-item.medium {
    border-color: #cd7f32;
    background: color-mix(in srgb, #cd7f32 10%, transparent);
}

.scheme-level {
    font-weight: 600;
    color: var(--gray-900);
}

.scheme-desc {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.bonus-points {
    font-weight: 700;
    color: var(--primary-color);
    font-size: var(--font-size-lg);
}

/* ===== TAKISTUSSÕIDU SPETSIIFILISED STIILID ===== */

/* Fault Table */
.fault-table {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.fault-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius);
    align-items: center;
    transition: transform var(--transition-fast);
}

.fault-row:hover {
    transform: translateX(2px);
}

.fault-row.perfect {
    background: linear-gradient(135deg, var(--success-color), #10b981);
    color: white;
}

.fault-row.excellent {
    background: color-mix(in srgb, var(--success-color) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--success-color) 30%, transparent);
}

.fault-row.good {
    background: color-mix(in srgb, var(--success-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--success-color) 20%, transparent);
}

.fault-row.average {
    background: color-mix(in srgb, var(--warning-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning-color) 20%, transparent);
}

.fault-row.below,
.fault-row.poor {
    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger-color) 20%, transparent);
}

.fault-row.lowest {
    background: color-mix(in srgb, var(--danger-color) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger-color) 30%, transparent);
}

.fault-row.participation {
    background: color-mix(in srgb, var(--gray-500) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--gray-500) 20%, transparent);
}

.fault-count {
    font-weight: 600;
    color: var(--gray-900);
}

.fault-row.perfect .fault-count {
    color: white;
}

.fault-points {
    font-weight: 700;
    color: var(--success-color);
    font-size: var(--font-size-lg);
}

.fault-row.perfect .fault-points {
    color: white;
}

.fault-desc {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.fault-row.perfect .fault-desc {
    color: rgba(255, 255, 255, 0.9);
}

/* Penalty Explanations */
.penalty-explanations {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.penalty-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3);
    background: var(--gray-50);
    border-radius: var(--radius);
    transition: background-color var(--transition-fast);
}

.penalty-item:hover {
    background: var(--gray-100);
}

.penalty-type {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.penalty-type i {
    color: var(--danger-color);
    width: 20px;
    text-align: center;
}

.penalty-value {
    font-weight: 600;
    color: var(--danger-color);
    font-size: var(--font-size-sm);
}

.penalty-note {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
    padding: var(--spacing-3);
    background: color-mix(in srgb, var(--info-color) 10%, transparent);
    border-radius: var(--radius);
    color: var(--info-color);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.penalty-note i {
    margin-top: 2px;
    flex-shrink: 0;
}

/* ===== KESTVUSRATSUTAMISE SPETSIIFILISED STIILID ===== */

/* Distance Table */
.distance-table {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.distance-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    border-radius: var(--radius);
    align-items: center;
    transition: transform var(--transition-fast);
}

.distance-row:hover {
    transform: translateX(2px);
}

.distance-row.ultra {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
}

.distance-row.long {
    background: color-mix(in srgb, #8b5cf6 20%, transparent);
    border: 1px solid color-mix(in srgb, #8b5cf6 30%, transparent);
}

.distance-row.medium {
    background: color-mix(in srgb, #8b5cf6 10%, transparent);
    border: 1px solid color-mix(in srgb, #8b5cf6 20%, transparent);
}

.distance-row.short {
    background: color-mix(in srgb, var(--info-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--info-color) 20%, transparent);
}

.distance-range {
    font-weight: 600;
    color: var(--gray-900);
}

.distance-row.ultra .distance-range {
    color: white;
}

.distance-points {
    font-weight: 700;
    color: #8b5cf6;
    font-size: var(--font-size-lg);
}

.distance-row.ultra .distance-points {
    color: white;
}

.distance-desc {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.distance-row.ultra .distance-desc {
    color: rgba(255, 255, 255, 0.9);
}

/* Bonus Items */
.bonus-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.bonus-item.success {
    background: color-mix(in srgb, var(--success-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--success-color) 20%, transparent);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    border-radius: var(--radius);
}

.bonus-item.participation {
    background: color-mix(in srgb, var(--gray-500) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--gray-500) 20%, transparent);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    border-radius: var(--radius);
}

.bonus-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
}

.bonus-item.success .bonus-icon {
    background: var(--success-color);
    color: white;
}

.bonus-item.participation .bonus-icon {
    background: var(--gray-500);
    color: white;
}

.bonus-content {
    flex: 1;
}

.bonus-title {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--spacing-1);
}

.bonus-desc {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.bonus-value {
    font-weight: 700;
    color: var(--success-color);
    font-size: var(--font-size-lg);
    margin-left: auto;
}

/* Distance Guide */
.distance-guide {
    margin-bottom: var(--spacing-8);
}

.distance-guide h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--gray-900);
}

.distance-guide h2 i {
    color: #8b5cf6;
    font-size: 24px;
}

.distance-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-6);
}

.distance-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    transition: transform var(--transition-fast);
}

.distance-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.distance-header {
    padding: var(--spacing-4) var(--spacing-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.distance-card.short-distance .distance-header {
    background: color-mix(in srgb, var(--info-color) 15%, transparent);
}

.distance-card.medium-distance .distance-header {
    background: color-mix(in srgb, var(--success-color) 15%, transparent);
}

.distance-card.long-distance .distance-header {
    background: color-mix(in srgb, var(--warning-color) 15%, transparent);
}

.distance-card.ultra-distance .distance-header {
    background: color-mix(in srgb, #8b5cf6 15%, transparent);
}

.distance-header h4 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--gray-900);
}

.distance-badge {
    background: white;
    color: var(--gray-900);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: var(--font-size-sm);
}

.distance-content {
    padding: var(--spacing-5);
}

.distance-content p {
    margin-bottom: var(--spacing-4);
    color: var(--gray-700);
    line-height: 1.6;
}

.distance-content ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin: 0;
}

.distance-content li {
    position: relative;
    padding-left: var(--spacing-4);
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.distance-content li::before {
    content: '🏃‍♂️';
    position: absolute;
    left: 0;
}

/* ===== ÜHISED KOMPONENDID ===== */

/* Placement Grid */
.placement-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.placement-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--gray-50);
    border-radius: var(--radius);
    transition: transform var(--transition-fast);
}

.placement-item:hover {
    transform: translateX(2px);
}

.placement-item.gold {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: var(--gray-900);
}

.placement-item.silver {
    background: linear-gradient(135deg, #c0c0c0, #e5e5e5);
    color: var(--gray-900);
}

.placement-item.bronze {
    background: linear-gradient(135deg, #cd7f32, #d4a574);
    color: white;
}

.placement-rank {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 600;
}

.placement-points {
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.placement-note {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
    padding: var(--spacing-3);
    background: color-mix(in srgb, var(--info-color) 10%, transparent);
    border-radius: var(--radius);
    color: var(--info-color);
    font-size: var(--font-size-sm);
}

/* Example Section */
.example-section {
    margin-bottom: var(--spacing-8);
}

.example-section h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--gray-900);
}

.example-section h2 i {
    color: var(--primary-color);
    font-size: 24px;
}

.example-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-6);
}

.example-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    transition: transform var(--transition-fast);
}

.example-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Example Card Variants */
.example-card.perfect {
    border: 2px solid var(--success-color);
}

.example-card.good {
    border: 2px solid var(--warning-color);
}

.example-card.average {
    border: 2px solid var(--danger-color);
}

.example-card.ultra {
    border: 2px solid #8b5cf6;
}

.example-card.medium {
    border: 2px solid var(--success-color);
}

.example-card.participation {
    border: 2px solid var(--gray-500);
}

.example-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--gray-200);
}

.example-header h4 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--gray-900);
}

.example-total {
    font-weight: 700;
    color: var(--primary-color);
    font-size: var(--font-size-xl);
}

.example-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) 0;
}

.breakdown-label {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

.breakdown-value {
    font-weight: 600;
    color: var(--gray-900);
    font-size: var(--font-size-sm);
}

/* Example Details (Takistussõit) */
.example-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) 0;
}

.detail-label {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

.detail-value {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.detail-value.success {
    color: var(--success-color);
}

.detail-value.warning {
    color: var(--warning-color);
}

.detail-value.danger {
    color: var(--danger-color);
}

.detail-value.points {
    color: var(--primary-color);
    font-size: var(--font-size-lg);
}

/* Season Rules */
.season-rules {
    margin-bottom: var(--spacing-8);
}

.season-info {
    display: flex;
    gap: var(--spacing-6);
    align-items: flex-start;
}

.season-highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 120px;
    flex-shrink: 0;
}

.highlight-number {
    font-size: 4rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: var(--spacing-2);
}

.highlight-text {
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    line-height: 1.4;
}

.season-details {
    flex: 1;
}

.season-details ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin: 0;
}

.season-details li {
    position: relative;
    padding-left: var(--spacing-4);
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.season-details li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

/* Info Section */
.info-section {
    margin-bottom: var(--spacing-8);
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-6);
}

.info-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    transition: transform var(--transition-fast);
}

.info-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.info-icon {
    width: 48px;
    height: 48px;
    background: color-mix(in srgb, var(--success-color) 10%, transparent);
    color: var(--success-color);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: var(--spacing-4);
}

/* Endurance specific info icon */
.kestvusratsutamine .info-icon {
    background: color-mix(in srgb, #8b5cf6 10%, transparent);
    color: #8b5cf6;
}

.info-card h3 {
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--gray-900);
}

.info-card p {
    color: var(--gray-700);
    margin-bottom: var(--spacing-4);
    line-height: 1.6;
}

.info-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin: 0;
}

.info-card li {
    position: relative;
    padding-left: var(--spacing-4);
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.info-card li::before {
    content: '⚡';
    position: absolute;
    left: 0;
    color: var(--success-color);
}

/* Endurance specific list items */
.kestvusratsutamine .info-card li::before {
    content: '🏃‍♂️';
}

/* Comparison Elements */
.comparison {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.comparison-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
}

.comparison-item.better {
    background: color-mix(in srgb, var(--success-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--success-color) 20%, transparent);
}

.comparison-item.worse {
    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger-color) 20%, transparent);
}

.comparison-label {
    font-weight: 600;
}

.comparison-value {
    font-size: var(--font-size-sm);
    font-family: monospace;
}

/* Strategy Elements (Endurance) */
.strategy-comparison {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.strategy-better,
.strategy-worse {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
}

.strategy-better {
    background: color-mix(in srgb, var(--success-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--success-color) 20%, transparent);
}

.strategy-worse {
    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger-color) 20%, transparent);
}

.strategy-label {
    font-weight: 600;
}

/* Wellness Points (Endurance) */
.wellness-points {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.wellness-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--gray-700);
    font-size: var(--font-size-sm);
}

.wellness-item i {
    color: var(--success-color);
    width: 16px;
}

/* Page Navigation */
.page-navigation {
    margin-top: var(--spacing-12);
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-4);
}

.nav-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
    background: white;
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow);
}

.nav-card:hover {
    border-color: var(--primary-color);
    background: var(--gray-50);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    color: var(--gray-700);
}

.nav-card.back {
    border-color: var(--gray-300);
}

.nav-card.back:hover {
    border-color: var(--gray-500);
}

.nav-card.next {
    border-color: var(--success-color);
}

.nav-card.next:hover {
    border-color: var(--success-color);
}

.nav-card.rankings {
    border-color: var(--primary-color);
}

.nav-card.home {
    border-color: var(--info-color);
}

.nav-card.home:hover {
    border-color: var(--info-color);
}

.nav-content {
    flex: 1;
}

.nav-content h4 {
    margin-bottom: var(--spacing-1);
    color: var(--gray-900);
    font-size: var(--font-size-base);
    font-weight: 600;
}

.nav-content p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.nav-card i {
    color: var(--gray-400);
    font-size: 20px;
    flex-shrink: 0;
}

.nav-card:hover i {
    color: var(--primary-color);
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 1024px) {
    .rules-grid {
        grid-template-columns: 1fr;
    }
    
    .page-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: var(--spacing-4);
    }
    
    .season-info {
        flex-direction: column;
        text-align: center;
    }
    
    .season-highlight {
        min-width: auto;
    }
    
    .distance-cards {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .rules-main {
        padding: var(--spacing-6) 0;
    }
    
    .summary-grid {
        grid-template-columns: 1fr;
    }
    
    .example-cards {
        grid-template-columns: 1fr;
    }
    
    .nav-grid {
        grid-template-columns: 1fr;
    }
    
    .info-cards {
        grid-template-columns: 1fr;
    }
    
    .distance-cards {
        grid-template-columns: 1fr;
    }
    
    /* Table Responsiveness */
    .points-row,
    .fault-row,
    .distance-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
        text-align: center;
    }
    
    .breakdown-item,
    .detail-row {
        flex-direction: column;
        gap: var(--spacing-1);
        text-align: center;
    }
    
    .placement-item {
        flex-direction: column;
        gap: var(--spacing-2);
        text-align: center;
    }
    
    .penalty-item {
        flex-direction: column;
        gap: var(--spacing-2);
        text-align: center;
    }
    
    .distance-header {
        flex-direction: column;
        gap: var(--spacing-2);
        text-align: center;
    }
    
    .page-title {
        font-size: var(--font-size-3xl);
    }
    
    .page-title i {
        font-size: var(--font-size-xl);
    }
    
    .nav-card {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-2);
    }
    
    .nav-card i {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .summary-item {
        padding: var(--spacing-3);
    }
    
    .summary-number {
        font-size: var(--font-size-2xl);
    }
    
    .example-card {
        padding: var(--spacing-4);
    }
    
    .card-content {
        padding: var(--spacing-4);
    }
    
    .nav-card {
        padding: var(--spacing-4);
    }
    
    .page-header {
        margin-bottom: var(--spacing-6);
    }
    
    .summary-card {
        padding: var(--spacing-4);
        margin-bottom: var(--spacing-6);
    }
    
    .highlight-number {
        font-size: 3rem;
    }
    
    .breadcrumb {
        justify-content: center;
    }
}