:root {

    --bg-dark: #0a0a0a;

    --card-bg: rgba(20, 20, 20, 0.6);

    --text-primary: #ffffff;

    --text-secondary: #a0a0a0;

    --accent-gold: #D4AF37;

    --accent-red: #D32F2F;

    --accent-blue: #1976D2;

    --font-heading: 'Teko', sans-serif;

    --font-body: 'Outfit', sans-serif;

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    background-image: radial-gradient(circle at 50% 0%, #1a1a1a 0%, #0a0a0a 100%);
    /* Removed display: flex; center/center which was squashing content on mobile */
    display: block;
}



.background-glob {

    position: absolute;

    top: -20%;

    left: 20%;

    width: 60%;

    height: 60%;

    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, rgba(0, 0, 0, 0) 70%);

    z-index: 0;

    pointer-events: none;

}



.container {

    width: 100%;

    max-width: 1200px;

    padding: 2rem;

    z-index: 1;

    display: flex;

    flex-direction: column;

    gap: 3rem;

    margin-top: 80px;

    /* Space for fixed navbar */

}



/* MAIN NAVIGATION BAR */

.main-navbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background: rgba(10, 10, 10, 0.98);

    /* Increased opacity for solid look without blur cost */

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    /* backdrop-filter: blur(10px); REMOVED FOR PERFORMANCE */

    z-index: 1000;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0.8rem 2rem;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

    /* Simplified shadow */

}



/* ... existing code ... */



.nav-brand {

    font-family: 'Teko', sans-serif;

    font-size: 1.8rem;

    color: #fff;

    letter-spacing: 2px;

    display: flex;

    align-items: center;

    gap: 10px;

}



.nav-actions {

    display: flex;

    gap: 15px;

    align-items: center;

}



.nav-btn {

    padding: 0.5rem 1.2rem;

    font-family: 'Teko', sans-serif;

    font-size: 1.1rem;

    letter-spacing: 1px;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.3s ease;

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 6px;

    color: #fff;

    border: 1px solid transparent;

    background: rgba(255, 255, 255, 0.05);

}



.nav-btn:hover {

    background: rgba(255, 255, 255, 0.15);

    transform: translateY(-2px);

}



.nav-btn.mission {

    background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);

    color: #000;

    border: 1px solid #fff;

    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);

    font-weight: bold;

}



.nav-btn.tracker {

    border-color: #00ff00;

    color: #00ff00;

    background: rgba(0, 255, 0, 0.1);

}



.nav-btn.scanner {

    border-color: #aaa;

    color: #ccc;

}



.nav-btn.war-room {

    border-color: #ff4444;

    color: #ff4444;

    background: rgba(255, 0, 0, 0.1);

}



.nav-btn.recovery {

    border-color: #00c3ff;

    color: #00c3ff;

    background: rgba(0, 195, 255, 0.1);

    box-shadow: 0 0 10px rgba(0, 195, 255, 0.2);

}



.main-header {

    text-align: center;

}



.event-title {

    font-family: var(--font-heading);

    color: var(--accent-gold);

    font-size: 1.5rem;

    letter-spacing: 4px;

    margin-bottom: 0.5rem;

}



.main-title {

    font-family: var(--font-heading);

    font-size: 4rem;

    line-height: 1;

    text-transform: uppercase;

    background: linear-gradient(180deg, #fff 0%, #888 100%);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    margin-bottom: 1rem;

}



.date-location {

    color: var(--text-secondary);

    font-size: 0.9rem;

    letter-spacing: 2px;

    text-transform: uppercase;

}



.fight-card,

.fighters-comparison {

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    gap: 2rem;

    align-items: stretch;

}



.fighter-card {

    background: var(--card-bg);

    border: 1px solid rgba(255, 255, 255, 0.1);

    /* backdrop-filter: blur(10px); REMOVED FOR PERFORMANCE */

    border-radius: 16px;

    padding: 2rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

    overflow: hidden;

    transition: transform 0.3s ease;

}



.fighter-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);

    /* Optimized shadow size */

    border-color: rgba(255, 255, 255, 0.3);

}



.fighter-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

}



.red-corner::before {

    background: var(--accent-red);

    box-shadow: 0 0 20px var(--accent-red);

}



.blue-corner::before {

    background: var(--accent-blue);

    box-shadow: 0 0 20px var(--accent-blue);

}



.fighter-status {

    font-size: 0.8rem;

    font-weight: 800;

    letter-spacing: 2px;

    padding: 0.25rem 0.75rem;

    border-radius: 4px;

    margin-bottom: 1rem;

    text-transform: uppercase;

}



.champion {

    background: rgba(212, 175, 55, 0.2);

    color: var(--accent-gold);

    border: 1px solid rgba(212, 175, 55, 0.4);

}



.challenger {

    background: rgba(255, 255, 255, 0.1);

    color: #fff;

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.fighter-info {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.fighter-name {

    font-family: var(--font-heading);

    font-size: 3rem;

    line-height: 0.9;

    text-align: center;

    margin-bottom: 0.5rem;

}



.fighter-name .lastname {

    font-size: 4.5rem;

    font-weight: 700;

}



.fighter-nickname {

    color: var(--accent-gold);

    font-style: italic;

    font-family: var(--font-heading);

    font-size: 1.5rem;

    margin-bottom: 2rem;

    opacity: 0.9;

}



.fighter-stats-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

    width: 100%;

    margin-bottom: 2rem;

    padding-bottom: 2rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.stat-box {

    text-align: center;

}



.stat-box .label {

    display: block;

    font-size: 0.7rem;

    color: var(--text-secondary);

    margin-bottom: 0.25rem;

    letter-spacing: 1px;

}



.stat-box .value {

    font-size: 1.2rem;

    font-weight: 600;

}



.detailed-info {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.info-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 0.9rem;

}



.info-label {

    color: var(--text-secondary);

    text-transform: uppercase;

    font-size: 0.8rem;

}



.info-value {

    font-weight: 600;

    text-align: right;

}



.vs-divider {

    display: flex;

    align-items: center;

    justify-content: center;

}



.vs-circle {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: #222;

    border: 2px solid var(--accent-gold);

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: var(--font-heading);

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--accent-gold);

    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);

}



.prediction-section {

    background: linear-gradient(90deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.8) 50%, rgba(20, 20, 20, 0) 100%);

    border-top: 1px solid rgba(212, 175, 55, 0.3);

    border-bottom: 1px solid rgba(212, 175, 55, 0.3);

    padding: 2rem;

    text-align: center;

}



.prediction-title {

    font-family: var(--font-heading);

    font-size: 2rem;

    color: var(--text-secondary);

    margin-bottom: 1rem;

}



.winner-declare {

    font-size: 1.2rem;

    color: #fff;

    margin-bottom: 0.5rem;

}



.winner-name {

    color: var(--accent-gold);

    font-weight: 800;

    font-size: 1.5rem;

    text-transform: uppercase;

}



.method {

    margin-bottom: 1rem;

    color: #ddd;

}



.rationale {

    max-width: 600px;

    margin: 0 auto;

    color: var(--text-secondary);

    font-size: 0.9rem;

    line-height: 1.5;

}



@media (max-width: 900px) {



    .fight-card,

    .fighters-comparison {

        grid-template-columns: 1fr;

    }



    .vs-divider {

        margin: 2rem 0;

    }



    .main-title {

        font-size: 2.5rem;

    }

}



/* Gym Deep Dive Section */

.gym-comparison-section {

    width: 100%;

    margin-top: 1rem;

}



.section-title {

    font-family: var(--font-heading);

    font-size: 2rem;

    color: var(--text-primary);

    text-align: center;

    margin-bottom: 2rem;

    letter-spacing: 3px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    padding-bottom: 1rem;

}



.gym-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2rem;

}



.gym-deep-dive {

    background: rgba(15, 15, 15, 0.8);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 12px;

    padding: 2rem;

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.gym-header h3 {

    font-family: var(--font-heading);

    font-size: 2.5rem;

    line-height: 1;

    margin-bottom: 0.25rem;

}



.red-gym .gym-header h3 {

    color: var(--accent-red);

}



.blue-gym .gym-header h3 {

    color: var(--accent-blue);

}



.location {

    font-size: 0.8rem;

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 2px;

}



.gym-detail-box {

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    padding-top: 1rem;

}



.detail-label {

    font-size: 0.7rem;

    color: var(--accent-gold);

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 0.5rem;

}



.detail-value.highlight {

    font-family: var(--font-heading);

    font-size: 1.8rem;

    color: #fff;

}



.fighter-list {

    list-style: none;

    padding: 0;

}



.fighter-list li {

    font-size: 1rem;

    color: #ddd;

    margin-bottom: 0.4rem;

    display: flex;

    justify-content: space-between;

}



.fighter-list li .org {

    color: var(--text-secondary);

    font-size: 0.8rem;

}



.gym-desc {

    font-size: 0.95rem;

    color: var(--text-secondary);

    line-height: 1.6;

}



.gym-desc strong {

    color: #fff;

}





/* Technical War Room Section */

.technical-analysis-section {

    width: 100%;

    margin-top: 1rem;

}



.tech-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2rem;

}



.tech-card {

    background: rgba(10, 10, 10, 0.9);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 8px;

    padding: 2rem;

    position: relative;

    overflow: hidden;

}



.tech-card::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: repeating-linear-gradient(45deg,

            rgba(255, 255, 255, 0.01),

            rgba(255, 255, 255, 0.01) 10px,

            rgba(255, 255, 255, 0.02) 10px,

            rgba(255, 255, 255, 0.02) 20px);

    pointer-events: none;

    z-index: 0;

}



.red-tech {

    border-left: 4px solid var(--accent-red);

}



.blue-tech {

    border-left: 4px solid var(--accent-blue);

}



.tech-header {

    margin-bottom: 2rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    padding-bottom: 1rem;

    position: relative;

    z-index: 1;

}



.tech-header h4 {

    font-family: var(--font-heading);

    font-size: 2rem;

    line-height: 1;

    color: #fff;

    margin-bottom: 0.25rem;

}



.tech-subtitle {

    font-size: 0.7rem;

    color: var(--text-secondary);

    letter-spacing: 2px;

    text-transform: uppercase;

}



.tech-block {

    margin-bottom: 2rem;

    position: relative;

    z-index: 1;

}



.tech-block:last-child {

    margin-bottom: 0;

}



.tech-block h5 {

    font-size: 0.8rem;

    color: var(--accent-gold);

    margin-bottom: 1rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    border-left: 2px solid var(--accent-gold);

    padding-left: 0.5rem;

}



.tech-row {

    display: flex;

    justify-content: space-between;

    margin-bottom: 0.5rem;

    font-size: 0.9rem;

    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);

    padding-bottom: 0.25rem;

}



.tech-label {

    color: var(--text-secondary);

    font-weight: 600;

    font-size: 0.8rem;

}



.tech-val {

    color: #eee;

    text-align: right;

    font-family: 'Consolas', monospace;

}



.highlight-blue {

    color: #64b5f6;

    font-weight: bold;

}



.tech-desc {

    font-size: 0.9rem;

    color: #ccc;

    line-height: 1.6;

    background: rgba(255, 255, 255, 0.03);

    padding: 1rem;

    border-radius: 4px;

    border-left: 2px solid rgba(255, 255, 255, 0.2);

}





/* Social Links Section */

.social-bar {

    display: flex;

    justify-content: center;

    gap: 1rem;

    margin-bottom: 2rem;

    width: 100%;

}



.social-link {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    text-decoration: none;

    background: rgba(255, 255, 255, 0.05);

    padding: 0.5rem 1rem;

    border-radius: 50px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    transition: all 0.3s ease;

}



.social-link:hover {

    background: rgba(255, 255, 255, 0.15);

    border-color: var(--accent-gold);

    transform: translateY(-2px);

}



.social-icon {

    font-weight: 800;

    font-size: 0.8rem;

    color: var(--accent-gold);

}





/* Fighter Photos */

.fighter-photo {

    width: 100%;

    border-radius: 8px;

    margin-bottom: 1.5rem;

    border: 1px solid rgba(255, 255, 255, 0.1);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

    filter: brightness(0.9);

    transition: filter 0.3s ease;

}



.fighter-photo:hover {

    filter: brightness(1.1);

}



/* NEW: Victory Breakdown */

.win-breakdown {

    width: 100%;

    margin-top: 1rem;

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.breakdown-title {

    font-size: 0.7rem;

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 1px;

    text-align: left;

}



.breakdown-bar {

    height: 8px;

    width: 100%;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 4px;

    display: flex;

    overflow: hidden;

}



.bar-segment {

    height: 100%;

    transition: width 1s ease-out;

}



.bar-segment.ko {

    background: #ff4444;

}



.bar-segment.sub {

    background: #00ff41;

}



.bar-segment.dec {

    background: #00c3ff;

}



.breakdown-legend {

    display: flex;

    justify-content: space-between;

    font-size: 0.65rem;

    color: #888;

}



.legend-item {

    display: flex;

    align-items: center;

    gap: 4px;

}



.dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

}



/* NEW: Recent Form */

.recent-form {

    display: flex;

    gap: 4px;

    margin-top: 1rem;

}



.form-pill {

    width: 20px;

    height: 20px;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.7rem;

    font-weight: bold;

}



.form-pill.w {

    background: rgba(0, 255, 65, 0.2);

    color: #00ff41;

    border: 1px solid rgba(0, 255, 65, 0.3);

}



.form-pill.l {

    background: rgba(255, 68, 68, 0.2);

    color: #ff4444;

    border: 1px solid rgba(255, 68, 68, 0.3);

}



/* NEW: Stance Tag */

.stance-tag {

    position: absolute;

    top: 10px;

    right: 10px;

    background: rgba(0, 0, 0, 0.6);

    padding: 2px 8px;

    border-radius: 4px;

    font-size: 0.65rem;

    color: var(--accent-gold);

    border: 1px solid var(--accent-gold);

    text-transform: uppercase;

    z-index: 2;

}



/* Fight History Section */

.fight-history-section {

    width: 100%;

    margin-top: 1rem;

}



.history-table-container {

    width: 100%;

    overflow-x: auto;

}



.history-table {

    width: 100%;

    border-collapse: collapse;

    font-family: 'Outfit', sans-serif;

    font-size: 0.85rem;

    color: #eee;

}



.history-table th {

    text-align: left;

    padding: 0.75rem 0.5rem;

    color: var(--text-secondary);

    font-size: 0.7rem;

    letter-spacing: 1px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.history-table td {

    padding: 0.75rem 0.5rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.03);

}



.history-table tr:last-child td {

    border-bottom: none;

}



.history-table .win {

    color: #4caf50;

    font-weight: 700;

}





/* Face Off Banner */

.faceoff-container {

    width: 100%;

    max-width: 800px;

    margin: 2rem auto 0;

    position: relative;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    border: 1px solid rgba(255, 255, 255, 0.1);

}



/* Dashbboard / Event Hub Styles */

.event-hub-header {

    text-align: center;

    padding: 2rem 0;

    margin-bottom: 2rem;

}



.hub-title {

    font-family: 'Teko', sans-serif;

    font-size: 4rem;

    background: linear-gradient(45deg, #fff, #a0a0a0);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    line-height: 0.9;

    margin-bottom: 0.5rem;

}



.hub-subtitle {

    font-family: 'Outfit', sans-serif;

    color: var(--text-secondary);

    letter-spacing: 2px;

}



.card-section-title {

    font-family: 'Teko', sans-serif;

    font-size: 2rem;

    color: var(--accent-gold);

    margin: 2rem 0 1rem;

    padding-left: 1rem;

    border-left: 4px solid var(--accent-gold);

}



.fight-list {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.fight-row {

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 12px;

    padding: 1.5rem;

    display: grid;

    grid-template-columns: 1fr 100px 1fr auto;

    align-items: center;

    transition: all 0.3s ease;

    text-decoration: none;

    color: var(--text-primary);

}



.fight-row:hover {

    background: rgba(255, 255, 255, 0.07);

    transform: translateX(5px);

    border-color: var(--accent-gold);

}



.fight-row.main-event {

    background: linear-gradient(90deg, rgba(255, 215, 0, 0.05), rgba(0, 0, 0, 0));

    border: 1px solid var(--accent-gold);

    padding: 2.5rem 1.5rem;

}



.fighter-name-hub {

    font-family: 'Teko', sans-serif;

    font-size: 1.8rem;

    font-weight: 600;

}



.fighter-name-hub.red {

    text-align: right;

    color: #ff4d4d;

}



.fighter-name-hub.blue {

    text-align: left;

    color: #4d94ff;

}



.vs-badge {

    text-align: center;

    font-family: 'Outfit', sans-serif;

    font-weight: 800;

    color: var(--text-secondary);

    font-size: 0.9rem;

}



.fight-meta {

    text-align: right;

    min-width: 120px;

}



.weight-class {

    display: block;

    font-size: 0.8rem;

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 1px;

}



.fight-status {

    display: inline-block;

    padding: 0.25rem 0.75rem;

    border-radius: 20px;

    font-size: 0.7rem;

    font-weight: 700;

    margin-top: 0.5rem;

}



.status-live {

    background: #4CAF50;

    color: #000;

}



.status-upcoming {

    background: #333;

    color: #fff;

    border: 1px solid #555;

}



.analyze-btn {

    background: var(--accent-gold);

    color: #000;

    padding: 0.5rem 1.5rem;

    border-radius: 6px;

    font-weight: 700;

    font-family: 'Outfit', sans-serif;

    margin-left: 2rem;

    opacity: 0;

    transform: translateX(-10px);

    transition: all 0.3s ease;

}



.fight-row:hover .analyze-btn {

    opacity: 1;

    transform: translateX(0);

}



@media (max-width: 768px) {

    .fight-row {

        grid-template-columns: 1fr;

        text-align: center;

        gap: 1rem;

    }



    .fighter-name-hub.red,

    .fighter-name-hub.blue {

        text-align: center;

    }



    .fight-meta {

        text-align: center;

        margin-top: 1rem;

    }



    .analyze-btn {

        opacity: 1;

        transform: none;

        margin: 1rem auto 0;

        display: inline-block;

    }

}



/* Fighter Image Placeholders - FIXED */

.fighter-image-placeholder {

    width: 150px;

    height: 150px;

    border-radius: 50%;

    margin-bottom: 1.5rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 3px solid rgba(255, 255, 255, 0.1);

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

    position: relative;

    overflow: hidden;

}



.red-bg {

    background: linear-gradient(135deg, var(--accent-red), #500);

}



.blue-bg {

    background: linear-gradient(135deg, var(--accent-blue), #003c8f);

}



.placeholder-text {

    font-family: var(--font-heading);

    font-size: 2rem;

    line-height: 0.9;

    text-align: center;

    color: rgba(255, 255, 255, 0.2);

    font-weight: 700;

    text-transform: uppercase;

}



/* Faceoff Image Container - Widescreen Fix */

.faceoff-container {

    width: 100%;

    max-width: 800px;

    margin: 1rem auto 2rem;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

    background: #000;

}



.faceoff-image {

    width: 100%;

    height: auto;

    display: block;

    object-fit: contain;

}



/* EVENT BANNER (FULL WIDTH) */

.event-banner {

    background: linear-gradient(90deg, #111 0%, #0a0a0a 100%);

    border-radius: 8px;

    border: 1px solid #333;

    border-left: 4px solid #ffd700;

    padding: 1rem 1.5rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 2rem;

    cursor: pointer;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.event-banner:hover {

    background: linear-gradient(90deg, #1a1a1a 0%, #111 100%);

    box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);

    transform: translateY(-2px);

}



.event-banner-title {

    font-family: 'Teko', sans-serif;

    font-size: 2.2rem;

    color: #ffd700;

    text-transform: uppercase;

    line-height: 1;

    margin: 0;

    letter-spacing: 1px;

}



.event-banner-meta {

    text-align: right;

    font-family: 'Outfit', sans-serif;

}



.event-timer {

    color: #ffd700;

    font-weight: 700;

    font-size: 1.1rem;

    display: block;

    margin-bottom: 4px;

}



.event-location {

    color: #666;

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.event-thumbs {

    display: flex;

    gap: 5px;

}



.event-thumb-img {

    width: 60px;

    height: 60px;

    border-radius: 4px;

    object-fit: cover;

    border: 1px solid #333;

}



/* AGENT 22 STYLES */

.agent-btn-container {

    text-align: center;

    margin: 2rem 0;

    position: relative;

    z-index: 10;

}



.agent22-btn {

    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);

    color: #000;

    font-family: 'Teko', sans-serif;

    font-size: 1.8rem;

    padding: 1rem 3rem;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    text-transform: uppercase;

    font-weight: 700;

    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);

    transition: all 0.3s ease;

    display: inline-flex;

    align-items: center;

    gap: 10px;

}



.agent22-btn:hover {

    transform: scale(1.05);

    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);

}



/* Agent 22 Modal */

.agent-modal {

    display: none;

    position: fixed;

    z-index: 1000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgba(0, 0, 0, 0.8);

    backdrop-filter: blur(5px);

    align-items: center;

    justify-content: center;

}



.agent-modal.active {

    display: flex;

}



.modal-content {

    background-color: #1a1a1a;

    margin: auto;

    padding: 2rem;

    border: 1px solid var(--accent-gold);

    width: 90%;

    max-width: 500px;

    border-radius: 12px;

    position: relative;

    box-shadow: 0 0 50px rgba(212, 175, 55, 0.2);

    /* SCROLL FIXES */

    max-height: 90vh;

    /* Prevent it from being taller than screen */

    overflow-y: auto;

    /* Enable internal scrolling */

    display: flex;

    flex-direction: column;

}



/* Custom Scrollbar for Modal */

.modal-content::-webkit-scrollbar {

    width: 8px;

}



.modal-content::-webkit-scrollbar-track {

    background: #111;

    border-radius: 4px;

}



.modal-content::-webkit-scrollbar-thumb {

    background: #444;

    border-radius: 4px;

}



.modal-content::-webkit-scrollbar-thumb:hover {

    background: var(--accent-gold);

}





.close-modal {

    color: #aaa;

    float: right;

    font-size: 28px;

    font-weight: bold;

    position: absolute;

    top: 10px;

    right: 20px;

    cursor: pointer;

}



.close-modal:hover,

.close-modal:focus {

    color: var(--accent-gold);

    text-decoration: none;

    cursor: pointer;

}



.agent-form-group {

    margin-bottom: 1.5rem;

    text-align: left;

}



.agent-form-group label {

    display: block;

    margin-bottom: 0.5rem;

    color: var(--text-secondary);

    font-size: 0.9rem;

}



.agent-input,

.agent-select {

    width: 100%;

    padding: 0.8rem;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #fff;

    border-radius: 4px;

    font-family: 'Outfit', sans-serif;

}



.agent-btn {

    width: 100%;

    padding: 1rem;

    background: var(--accent-gold);

    color: #000;

    border: none;

    font-family: 'Teko', sans-serif;

    font-size: 1.5rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s;

}



.agent-btn:hover {

    background: #fff;

}



/* RESULTS PANEL */

.result-panel {

    display: none;

    background: #000;

    padding: 1.5rem;

    border: 1px solid #333;

}



.result-row {

    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;

    border-bottom: 1px solid #222;

    padding-bottom: 5px;

}



.result-label {

    color: #888;

}



.result-val {

    color: #fff;

    font-weight: bold;

}



.result-val.highlight {

    color: var(--accent-gold);

}



.recommendation-box {

    margin-top: 1rem;

    text-align: center;

    padding: 1rem;

    background: rgba(255, 215, 0, 0.1);

    border: 1px solid var(--accent-gold);

}



.rec-title {

    color: var(--accent-gold);

    font-family: 'Teko';

    font-size: 1.5rem;

}



.rec-action {

    font-size: 2.5rem;

    font-weight: 900;

    color: #fff;

    text-transform: uppercase;

}



/* AGENT 22 PREMIUM MODULES (APP STYLE) */

.agent-special-section,

.parlay-section {

    margin: 2rem 0 4rem 0;

    padding: 1.5rem;

    border-radius: 12px;

    position: relative;

    overflow: hidden;

}



.agent-special-section {

    border: 1px solid var(--accent-gold);

    background: linear-gradient(180deg, rgba(212, 175, 55, 0.05) 0%, rgba(0, 0, 0, 0) 100%);

}



.agent-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1.5rem;

}



.agent-title-block h3 {

    font-family: var(--font-heading);

    font-size: 2rem;

    margin: 0;

    line-height: 1;

    color: var(--accent-gold);

}



.agent-title-block p {

    color: var(--text-secondary);

    font-size: 0.9rem;

    margin: 0;

    letter-spacing: 1px;

}



.verified-badge {

    background: var(--accent-gold);

    color: black;

    padding: 0.4rem 1rem;

    font-weight: 800;

    font-size: 0.8rem;

    border-radius: 4px;

    font-family: var(--font-body);

    text-transform: uppercase;

    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);

}



.bet-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 1.5rem;

}



.bet-card {

    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);

    padding: 1.5rem;

    border-radius: 16px;

    border: 1px solid rgba(255, 255, 255, 0.05);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

    transition: transform 0.2s, box-shadow 0.2s;

    display: flex;

    flex-direction: column;

}



.bet-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    border-color: rgba(255, 255, 255, 0.1);

}



.bet-card.green-lock {

    border-left: 4px solid #4CAF50;

}



.bet-card.gold-lock {

    border-left: 4px solid var(--accent-gold);

}



.bet-card.red-lock {

    border-left: 4px solid #ff4444;

}



.bet-card.blue-lock {

    border-left: 4px solid #00c3ff;

}



.bet-card.purple-lock {

    border-left: 4px solid #b300ff;

}



.card-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 0.5rem;

}



.tag-label {

    font-weight: 800;

    font-size: 0.8rem;

    letter-spacing: 1px;

    text-transform: uppercase;

}



.odds-badge {

    color: #fff;

    font-weight: bold;

    background: rgba(255, 255, 255, 0.1);

    padding: 4px 10px;

    border-radius: 4px;

    font-family: 'Consolas', monospace;

}



.bet-name {

    color: #fff;

    margin: 0.5rem 0;

    font-family: var(--font-heading);

    font-size: 2rem;

    line-height: 0.9;

}



.bet-desc {

    color: #ccc;

    font-size: 0.9rem;

    line-height: 1.5;

    margin-bottom: 1.5rem;

    flex-grow: 1;

}



.view-btn {

    display: block;

    text-align: center;

    padding: 1rem;

    text-decoration: none;

    font-size: 1rem;

    border-radius: 8px;

    font-weight: 700;

    background: rgba(255, 255, 255, 0.05);

    color: #fff;

    border: 1px solid rgba(255, 255, 255, 0.1);

    transition: all 0.2s;

    font-family: var(--font-heading);

    letter-spacing: 1px;

    text-transform: uppercase;

}



.view-btn:hover {

    background: var(--accent-gold);

    color: #000;

    border-color: var(--accent-gold);

}



/* Specific Tag Colors */

.tag-green {

    color: #4CAF50;

}



.tag-gold {

    color: var(--accent-gold);

}



.tag-red {

    color: #ff4444;

}



.tag-blue {

    color: #00c3ff;

}



.tag-purple {

    color: #b300ff;

}



/* Parlay Specifics */

.parlay-header-title {

    color: #fff;

    font-family: var(--font-heading);

    font-size: 2rem;

    border-left: 4px solid #b300ff;

    padding-left: 1rem;

    margin-bottom: 1.5rem;

}



.parlay-legs {

    margin-bottom: 1.5rem;

}



.parlay-leg {

    display: flex;

    justify-content: space-between;

    margin-bottom: 0.8rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    padding-bottom: 0.5rem;

    font-size: 0.95rem;

}



.rationale-box {

    background: rgba(255, 255, 255, 0.03);

    margin-top: auto;

    border-left: 2px solid rgba(255, 255, 255, 0.1);

}



/* EVENT ACCORDION STYLES */

details.event-accordion {

    margin-bottom: 2rem;

    border-radius: 8px;

    background: transparent;

}



details.event-accordion summary {

    list-style: none;

    cursor: pointer;

    position: relative;

    padding: 0;

}



details.event-accordion summary::-webkit-details-marker {

    display: none;

}



details.event-accordion summary:focus {

    outline: none;

}



/* Add a subtle hover effect to the summary content */

details.event-accordion summary:hover .event-hub-header {

    background: rgba(255, 255, 255, 0.05);

    border-color: rgba(255, 255, 255, 0.2);

}



/* Rotate indicator if we decide to add one later, currently keeping it clean */

details.event-accordion[open] summary~* {

    animation: sweep .5s ease-in-out;

}



@keyframes sweep {

    0% {

        opacity: 0;

        transform: translateY(-10px)
    }



    100% {

        opacity: 1;

        transform: translateY(0)
    }

}



/* Style for the simple h3 headers inside accordions */

details.event-accordion summary .card-section-title {

    padding: 1rem;

    background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.95));

    border: 1px solid #333;

    border-radius: 8px;

    transition: all 0.3s ease;

    /* Ensure it fills the summary width if needed, or at least looks like a button */

    display: block;

}



details.event-accordion summary:hover .card-section-title {

    background: rgba(255, 255, 255, 0.1);

    transform: translateX(10px);

    border-color: rgba(255, 255, 255, 0.3);

}



/* NEW EVENT HEADER STYLES (FULL WIDTH BUTTON LOOK) */

.event-header-full {

    width: 100%;

    background: rgba(15, 15, 15, 1);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 8px;

    padding: 1rem 1.5rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    transition: all 0.3s ease;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

}



.event-header-full:hover {

    background: rgba(30, 30, 30, 1);

    transform: translateY(-2px);

    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);

}



/* Remove default styling from inner H3 when inside the full header */

.event-header-full .card-section-title {

    margin: 0;

    padding: 0;

    border: none;

    background: none;

    font-size: 1.8rem;

    /* Slightly smaller to fit */

}



.header-right-side {

    text-align: right;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 5px;

}



.header-meta-row {

    font-family: 'Outfit', sans-serif;

    font-size: 0.8rem;

    color: #888;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.countdown-timer {

    font-family: 'Teko', sans-serif;

    color: var(--accent-gold);

    font-size: 1.5rem;

    line-height: 1;

    font-weight: 400;

}



/* Hub Info Badges */

.hub-record {

    font-size: 0.85rem;

    color: var(--text-secondary);

    margin-left: 8px;

    font-family: var(--font-body);

    font-weight: 500;

}



.hub-age {

    font-size: 0.8rem;

    color: var(--accent-gold);

    margin-left: 5px;

    font-family: var(--font-body);

    font-weight: 600;

    opacity: 0.8;

}



.fighter-name-hub {

    display: flex;

    align-items: baseline;

    gap: 4px;



}



/* QUICK FIGHT SELECTOR */

.fight-selector {

    display: flex;

    overflow-x: auto;

    gap: 0.8rem;

    padding: 1rem 0;

    margin-bottom: 2rem;

    scrollbar-width: thin;

    scrollbar-color: var(--accent-gold) rgba(255, 255, 255, 0.05);

    white-space: nowrap;

    -webkit-overflow-scrolling: touch;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.fight-selector::-webkit-scrollbar {

    height: 6px;

}



.fight-selector::-webkit-scrollbar-track {

    background: rgba(255, 255, 255, 0.05);

}



.fight-selector::-webkit-scrollbar-thumb {

    background-color: var(--accent-gold);

    border-radius: 20px;

}



.fight-btn {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #ccc;

    padding: 0.6rem 1.2rem;

    border-radius: 50px;

    cursor: pointer;

    font-family: 'Outfit', sans-serif;

    font-size: 0.9rem;

    transition: all 0.3s ease;

    flex-shrink: 0;

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.fight-btn:hover {

    background: rgba(255, 255, 255, 0.15);

    color: #fff;

    border-color: var(--accent-gold);

}



.fight-btn.active {

    background: var(--accent-gold);

    color: #000;

    font-weight: bold;

    border-color: var(--accent-gold);

    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);

}



/* ODDS MONITORING TABLE */

.odds-table-container {

    width: 100%;

    margin-top: 2rem;

    margin-bottom: 2rem;

    background: rgba(10, 10, 10, 0.8);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 12px;

    padding: 1.5rem;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

}



.odds-table {

    width: 100%;

    border-collapse: collapse;

    font-family: 'Outfit', sans-serif;

}



.odds-table th {

    text-align: left;

    color: var(--text-secondary);

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    padding: 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.odds-table td {

    padding: 12px 10px;

    color: #fff;

    font-size: 1rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.03);

}



.odds-table tr:last-child td {

    border-bottom: none;

}



.odds-val {

    font-family: 'Teko', sans-serif;

    font-size: 1.2rem;

    color: #fff;

}



.odds-move-up {

    color: #ff4444;

    /* Odds getting worse/longer */

}



.odds-move-down {

    color: #00ff41;

    /* Odds shortening/improving probability */

}



.val-edge {

    font-weight: bold;

    padding: 4px 8px;

    border-radius: 4px;

    font-size: 0.9rem;

}



.val-edge.high {

    background: rgba(0, 255, 65, 0.1);

    color: #00ff41;

    border: 1px solid rgba(0, 255, 65, 0.3);

}



.val-edge.low {

    color: #666;

}



/* Interactive Poster Integration */

.poster-thumbnail {

    height: 60px;

    border-radius: 4px;

    cursor: pointer;

    transition: transform 0.2s ease, border-color 0.2s;

    border: 1px solid #666;

    margin: 0 1rem;

    object-position: top;

    object-fit: cover;

}



.poster-thumbnail:hover {

    transform: scale(1.5);

    border-color: var(--accent-gold);

    z-index: 10;

}



.fight-list-poster {

    width: 100%;

    max-width: 350px;

    display: block;

    margin: 0 auto 1.5rem;

    border-radius: 8px;

    border: 1px solid rgba(255, 255, 255, 0.2);

    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);

}



/* Lightbox Modal */

.poster-modal {

    display: none;

    position: fixed;

    z-index: 2000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgba(0, 0, 0, 0.9);

    justify-content: center;

    align-items: center;

}



.poster-modal-content {

    margin: auto;

    display: block;

    max-width: 90%;

    max-height: 90vh;

    border-radius: 8px;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

    animation: zoom 0.3s;

}



@keyframes zoom {

    from {

        transform: scale(0)
    }



    to {

        transform: scale(1)
    }

}



.close-poster {

    position: absolute;

    top: 20px;

    right: 35px;

    color: #f1f1f1;

    font-size: 40px;

    font-weight: bold;

    transition: 0.3s;

    cursor: pointer;

}



.close-poster:hover,

.close-poster:focus {

    color: var(--accent-gold);

    text-decoration: none;

    cursor: pointer;

}



/* SUMO SECTION STYLES */

.sumo-accordion {

    border: 2px solid #d4af37;

    /* Gold border */

    background: #000;

}



.sumo-accordion[open] summary {

    background: linear-gradient(90deg, #800000, #000);

    /* Maroon to Black */

    border-bottom: 2px solid #d4af37;

}



.sumo-list {

    background: #1a0000;

    /* Dark Maroon bg */

    padding: 1rem;

    display: grid;

    gap: 1rem;

}



.sumo-card {

    background: #fff;

    border-radius: 8px;

    padding: 10px;

    border: 1px solid #d4af37;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    overflow: hidden;

}



.sumo-card::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 200px;

    height: 200px;

    background: rgba(212, 175, 55, 0.1);

    /* Faint gold dohyo circle */

    border-radius: 50%;

    pointer-events: none;

}



.sumo-fighter {

    flex: 1;

    text-align: center;

    font-family: 'Teko', sans-serif;

    z-index: 1;

}



.sumo-name {

    font-size: 1.4rem;

    color: #000;

    line-height: 1;

    text-transform: uppercase;

    font-weight: 700;

}



.sumo-rank {

    font-size: 0.8rem;

    color: #888;

    text-transform: uppercase;

    font-family: 'Outfit', sans-serif;

}



.sumo-vs {

    width: 30px;

    text-align: center;

    font-weight: bold;

    color: #d4af37;

    font-family: 'Teko';

    font-size: 1.2rem;

    z-index: 1;

}



.sumo-odds-btn {

    background: #333;

    color: #fff;

    border: 1px solid #ddd;

    padding: 5px 10px;

    border-radius: 4px;

    font-family: 'Outfit';

    font-weight: bold;

    cursor: pointer;

    transition: all 0.2s;

    min-width: 60px;

    text-align: center;

}



.sumo-odds-btn:hover {

    background: #d4af37;

    color: #000;

    border-color: #d4af37;

}



.sumo-odds-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    z-index: 1;

}



.sumo-badge {

    font-size: 0.7rem;

    padding: 2px 6px;

    border-radius: 4px;

    font-weight: bold;

    text-transform: uppercase;

    font-weight: 700;

}



.badge-banker {

    background: #00ff41;

    color: #000;

    box-shadow: 0 0 5px #00ff41;

}



.badge-value {

    object-fit: cover;

}



.poster-thumbnail:hover {

    transform: scale(1.5);

    border-color: var(--accent-gold);

    z-index: 10;

}



.fight-list-poster {

    width: 100%;

    max-width: 350px;

    display: block;

    margin: 0 auto 1.5rem;

    border-radius: 8px;

    border: 1px solid rgba(255, 255, 255, 0.2);

    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);

}



/* Lightbox Modal */

.poster-modal {

    display: none;

    position: fixed;

    z-index: 2000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgba(0, 0, 0, 0.9);

    justify-content: center;

    align-items: center;

}



.poster-modal-content {

    margin: auto;

    display: block;

    max-width: 90%;

    max-height: 90vh;

    border-radius: 8px;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

    animation: zoom 0.3s;

}



@keyframes zoom {

    from {

        transform: scale(0)
    }



    to {

        transform: scale(1)
    }

}



.close-poster {

    position: absolute;

    top: 20px;

    right: 35px;

    color: #f1f1f1;

    font-size: 40px;

    font-weight: bold;

    transition: 0.3s;

    cursor: pointer;

}



.close-poster:hover,

.close-poster:focus {

    color: var(--accent-gold);

    text-decoration: none;

    cursor: pointer;

}



/* SUMO SECTION STYLES */

.sumo-accordion {

    border: 2px solid #d4af37;

    /* Gold border */

    background: #000;

}



.sumo-accordion[open] summary {

    background: linear-gradient(90deg, #800000, #000);

    /* Maroon to Black */

    border-bottom: 2px solid #d4af37;

}



.sumo-list {

    background: #1a0000;

    /* Dark Maroon bg */

    padding: 1rem;

    display: grid;

    gap: 1rem;

}



.sumo-card {

    background: #fff;

    border-radius: 8px;

    padding: 10px;

    border: 1px solid #d4af37;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    overflow: hidden;

}



.sumo-card::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 200px;

    height: 200px;

    background: rgba(212, 175, 55, 0.1);

    /* Faint gold dohyo circle */

    border-radius: 50%;

    pointer-events: none;

}



.sumo-fighter {

    flex: 1;

    text-align: center;

    font-family: 'Teko', sans-serif;

    z-index: 1;

}



.sumo-name {

    font-size: 1.4rem;

    color: #000;

    line-height: 1;

    text-transform: uppercase;

    font-weight: 700;

}



.sumo-rank {

    font-size: 0.8rem;

    color: #888;

    text-transform: uppercase;

    font-family: 'Outfit', sans-serif;

}



.sumo-vs {

    width: 30px;

    text-align: center;

    font-weight: bold;

    color: #d4af37;

    font-family: 'Teko';

    font-size: 1.2rem;

    z-index: 1;

}



.sumo-odds-btn {

    background: #333;

    color: #fff;

    border: 1px solid #ddd;

    padding: 5px 10px;

    border-radius: 4px;

    font-family: 'Outfit';

    font-weight: bold;

    cursor: pointer;

    transition: all 0.2s;

    min-width: 60px;

    text-align: center;

}



.sumo-odds-btn:hover {

    background: #d4af37;

    color: #000;

    border-color: #d4af37;

}



.sumo-odds-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    z-index: 1;

}



.sumo-badge {

    font-size: 0.7rem;

    padding: 2px 6px;

    border-radius: 4px;

    font-weight: bold;

    text-transform: uppercase;

    font-weight: 700;

}



.badge-banker {

    background: #00ff41;

    color: #000;

    box-shadow: 0 0 5px #00ff41;

}



.badge-value {

    background: #00c3ff;

    color: #000;

    box-shadow: 0 0 5px #00c3ff;

}



.badge-pass {

    background: #ccc;

    color: #333;

}



/* SUMO DEEP DIVE INTEL */

.sumo-intel {

    background: #0d0d0d;

    border-top: 1px solid #333;

    padding: 10px;

    margin-top: 10px;

    border-radius: 4px;

    width: 100%;

    grid-column: 1 / -1;

    /* Make it span full width if in grid, though flex is used */

    order: 10;

    /* Ensure it drops to bottom */

    flex-basis: 100%;

}



.sumo-card {

    flex-wrap: wrap;

    /* Allow intel to drop to new line */

    cursor: pointer;

    transition: background 0.2s;

}



.sumo-card:hover {

    background: #fff8e0;

}



.hidden {

    display: none;

}



.intel-grid {

    display: flex;

    gap: 15px;

    margin-bottom: 10px;

}



.intel-box {

    background: #222;

    padding: 8px;

    border-radius: 4px;

    border: 1px solid #444;

    flex: 1;

    text-align: center;

}



.intel-label {

    font-size: 0.7rem;

    color: var(--accent-gold);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 3px;

}



.intel-val {

    font-size: 0.95rem;

    color: #fff;

    font-weight: bold;

    font-family: 'Teko';

}



.agent-rationale {

    font-size: 0.9rem;

    color: #ddd;

    line-height: 1.4;

    font-style: italic;

    background: rgba(0, 255, 65, 0.05);

    padding: 8px;

    border-left: 3px solid #00ff41;

}



.agent-label {

    color: #00ff41;

    font-weight: bold;

    font-style: normal;

    text-transform: uppercase;

    font-size: 0.8rem;

    margin-right: 5px;

}



.text-green {

    color: #4CAF50 !important;

}



.high {

    color: #ff4444 !important;

}



.sumo-avatar {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid #d4af37;

    margin-bottom: 5px;

    background: #fff;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);

}



/* ALASH VISUAL UPGRADE */

.alash-avatar {

    width: 60px;

    height: 60px;

    object-fit: cover;

    border-radius: 50%;

    border: 2px solid #d4af37;

    margin-bottom: 5px;

    background: #222;

}



.alash-flag {

    width: 20px;

    height: 15px;

    border-radius: 2px;

    display: inline-block;

    margin-right: 5px;

    vertical-align: middle;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

}



/* --- NEW ADVANCED FEATURE STYLES --- */



/* 1. Interactive Bar Charts */

.stat-bar-container {

    width: 100%;

    height: 8px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 4px;

    margin-top: 5px;

    overflow: hidden;

    position: relative;

}



.stat-bar {

    height: 100%;

    border-radius: 4px;

    transition: width 1s ease-out;

}



.bar-red {

    background: var(--accent-red);

}



.bar-blue {

    background: var(--accent-blue);

}



.bar-neutral {

    background: #666;

}



/* 2. Donut Charts (Win Method) */

.win-method-section {

    display: flex;

    justify-content: space-around;

    padding: 1.5rem 0;

    width: 100%;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    margin-bottom: 1.5rem;

}



.donut-chart-container {

    position: relative;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: conic-gradient(#d32f2f 0% 60%,

            /* KO */

            #1976d2 60% 80%,

            /* SUB */

            #888 80% 100%
            /* DEC */

        );

    display: flex;

    align-items: center;

    justify-content: center;

}



.donut-inner {

    width: 70px;

    height: 70px;

    background: var(--card-bg);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.8rem;

    color: #fff;

    flex-direction: column;

}



.donut-label {

    font-size: 0.6rem;

    color: #aaa;

}



/* 3. Highlight Glow */

.stat-box.highlight-significant:hover {

    text-shadow: 0 0 10px #00ff41;

    color: #00ff41;

    cursor: help;

}



.stat-box.highlight-danger:hover {

    text-shadow: 0 0 10px #ff0000;

    color: #ff0000;

    cursor: help;

}



/* 4. Scenario Simulator Toggle */

.scenario-toggle-container {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin: 1.5rem 0;

    padding: 1rem;

    background: rgba(0, 0, 0, 0.3);

    border-radius: 8px;

    border: 1px solid rgba(212, 175, 55, 0.2);

}



.toggle-switch {

    position: relative;

    display: inline-block;

    width: 60px;

    height: 34px;

}



.toggle-switch input {

    opacity: 0;

    width: 0;

    height: 0;

}



.slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #333;

    transition: .4s;

    border-radius: 34px;

}



.slider:before {

    position: absolute;

    content: '';

    height: 26px;

    width: 26px;

    left: 4px;

    bottom: 4px;

    background-color: white;

    transition: .4s;

    border-radius: 50%;

}



input:checked+.slider {

    background-color: var(--accent-gold);

}



input:checked+.slider:before {

    transform: translateX(26px);

}



.toggle-label {

    font-size: 0.9rem;

    color: #ccc;

    font-family: var(--font-heading);

    letter-spacing: 1px;

}



/* 5. Opposition Quality Heatmap Checkboxes */

.tier-tag {

    display: inline-block;

    padding: 2px 6px;

    border-radius: 4px;

    font-size: 0.6rem;

    font-weight: bold;

    text-transform: uppercase;

    margin-left: 5px;

}



.tier-elite {

    background: linear-gradient(135deg, #d32f2f, #b71c1c);

    color: #fff;

    border: 1px solid #ff5252;

}



.tier-gatekeeper {

    background: #333;

    color: #aaa;

    border: 1px solid #555;

}



.tier-prospect {

    background: #0288d1;

    color: #fff;

    border: 1px solid #29b6f6;

}



.tier-veteran {

    background: #f57f17;

    color: #000;

    border: 1px solid #ffb300;

}



/* 6. Pace Graph (Simplified visual) */

.pace-graph-container {

    padding: 1rem;

    background: rgba(0, 0, 0, 0.5);

    border-radius: 8px;

    border: 1px solid rgba(255, 255, 255, 0.05);

    margin-top: 2rem;

}



.pace-bars {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    height: 100px;

    gap: 5px;

}



.pace-bar {

    width: 100%;

    background: #333;

    position: relative;

    border-radius: 4px 4px 0 0;

    opacity: 0.7;

}



.pace-bar.red {

    background: var(--accent-red);

}



.pace-bar.blue {

    background: var(--accent-blue);

}



/* 7. Common Opponent Box */

.common-opponent-box {

    background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(10, 10, 10, 0.95));

    border: 1px solid #555;

    border-radius: 8px;

    padding: 1.5rem;

    margin: 2rem 0;

    text-align: center;

}



.common-header {

    font-family: var(--font-heading);

    color: #fff;

    font-size: 1.5rem;

    margin-bottom: 1rem;

    border-bottom: 1px solid #333;

    padding-bottom: 0.5rem;

}



/* 8. Camp Insider Terminal */

.terminal-box {

    background: #000;

    border: 1px solid #33ff00;

    color: #33ff00;

    font-family: 'Courier New', monospace;

    padding: 1.5rem;

    margin: 2rem 0;

    border-radius: 4px;

    box-shadow: 0 0 20px rgba(51, 255, 0, 0.1);

    font-size: 0.9rem;

    line-height: 1.5;

}



.terminal-header {

    border-bottom: 1px dashed #33ff00;

    margin-bottom: 1rem;

    padding-bottom: 0.5rem;

    opacity: 0.8;

}



/* =========================================

   GYM WARFARE UPGRADE

   Roster Tables & Gym DNA

   ========================================= */



.gym-dna-container {

    margin: 1.5rem 0;

    padding: 1rem;

    background: rgba(0, 0, 0, 0.3);

    border-radius: 4px;

    border: 1px solid #333;

}



.dna-label {

    font-family: 'Teko', sans-serif;

    color: #fff;

    font-size: 1.2rem;

    margin-bottom: 0.8rem;

    letter-spacing: 1px;

    text-transform: uppercase;

    border-bottom: 1px solid #444;

    padding-bottom: 4px;

}



.dna-row {

    display: flex;

    align-items: center;

    margin-bottom: 8px;

    font-size: 0.85rem;

}



.dna-row span {

    width: 90px;

    color: #ccc;

    font-size: 0.8rem;

    text-transform: uppercase;

    font-weight: bold;

}



.dna-bar-track {

    flex-grow: 1;

    height: 8px;

    background: #222;

    border-radius: 4px;

    overflow: hidden;

    position: relative;

    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);

}



.dna-bar-fill {

    height: 100%;

    border-radius: 4px;

    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);

    position: relative;

}



.dna-bar-fill::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);

    animation: shimmer 2s infinite;

}



.dna-bar-fill.red {

    background: var(--accent-red);

}



.dna-bar-fill.blue {

    background: var(--accent-blue);

}



/* Roster Box */

.roster-box {

    margin-top: 1.5rem;

}



.roster-title {

    font-family: 'Teko', sans-serif;

    color: var(--accent-gold);

    font-size: 1.2rem;

    margin-bottom: 0.5rem;

    text-transform: uppercase;

}



.partner-list {

    list-style: none;

    padding: 0;

    margin: 0 0 1rem 0;

}



.partner-list li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 6px 0;

    border-bottom: 1px solid #333;

}



.partner-list li:last-child {

    border-bottom: none;

}



.p-name {

    color: #eee;

    font-weight: 500;

    font-size: 0.95rem;

}



.p-tag {

    font-size: 0.65rem;

    padding: 2px 6px;

    border-radius: 3px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: #000;

}



/* Tag Colors */

.p-tag.elite {

    background: var(--accent-gold);

    box-shadow: 0 0 5px var(--accent-gold);

}



.p-tag.veteran {

    background: #888;

    color: #fff;

}



.p-tag.killer {

    background: #ff4444;

    color: #fff;

}



.p-tag.prospect {

    background: #00ff88;

    box-shadow: 0 0 5px #00ff88;

}



.p-tag.chaos {

    background: #9d00ff;

    color: #fff;

}



.p-tag.grappler {

    background: #ff8800;

}



.p-tag.wild {

    background: #ff0055;

    color: #fff;

}



.p-tag.coach {

    background: #00ccff;

}



.partner-insight {

    font-size: 0.85rem;

    color: #aaa;

    line-height: 1.4;

    background: rgba(255, 255, 255, 0.05);

    padding: 10px;

    border-radius: 4px;

    border-left: 3px solid var(--accent-gold);

}



.partner-insight em {

    color: #fff;

    font-style: normal;

    font-weight: bold;

}



@keyframes shimmer {

    0% {

        transform: translateX(-100%);

    }



    100% {

        transform: translateX(100%);

    }

}





/* Agent 22 Button Upgrade - V2 */

.agent22-btn {

    background: linear-gradient(135deg, #ffd700 0%, #d4af37 100%);

    color: #000;

    font-family: 'Teko', sans-serif;

    font-size: 1.4rem;

    font-weight: 600;

    letter-spacing: 1px;

    padding: 0.6rem 2rem;

    border: none;

    border-radius: 50px;

    cursor: pointer;

    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);

    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    display: inline-flex;

    align-items: center;

    gap: 10px;

    text-transform: uppercase;

    position: relative;

    overflow: hidden;

    z-index: 1;

}



.agent22-btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, #fff7bd 0%, #ffd700 100%);

    opacity: 0;

    z-index: -1;

    transition: opacity 0.3s ease;

    border-radius: 50px;

}



.agent22-btn:hover {

    transform: translateY(-2px) scale(1.05);

    box-shadow: 0 0 25px rgba(255, 215, 0, 0.7);

}



.agent22-btn:hover::before {

    opacity: 1;

}



.agent22-btn span {

    font-size: 1.5rem;

    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));

}



/* VS Divider Update for Button Stacking */

.vs-divider {

    display: flex;

    flex-direction: column !important;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    margin: 0 1rem;

}







/* =========================================

   TECHNICAL WAR ROOM: PHASE 3

   Coach Corner & Range Finder

   ========================================= */



/* Coach Corner Cards */

.coach-corner-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.5rem;

    margin: 2rem 0;

}



.coach-card {

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid #333;

    border-radius: 6px;

    padding: 1.5rem;

    position: relative;

    overflow: hidden;

}



.coach-card.elevation-coach {

    border-left: 4px solid var(--accent-red);

}



.coach-card.nextgen-coach {

    border-left: 4px solid var(--accent-blue);

}



.coach-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1rem;

    border-bottom: 1px dashed #444;

    padding-bottom: 0.5rem;

}



.coach-name {

    font-family: 'Teko', sans-serif;

    font-size: 1.4rem;

    color: #fff;

    text-transform: uppercase;

}



.coach-archetype {

    font-size: 0.8rem;

    font-weight: bold;

    padding: 2px 8px;

    border-radius: 4px;

    text-transform: uppercase;

}



.elevation-coach .coach-archetype {

    background: var(--accent-red);

    color: #fff;

}



.nextgen-coach .coach-archetype {

    background: var(--accent-blue);

    color: #fff;

}



.coach-quote {

    font-style: italic;

    color: var(--accent-gold);

    font-size: 0.9rem;

    margin-bottom: 1rem;

    line-height: 1.4;

}



.coach-philosophy {

    color: #ccc;

    font-size: 0.85rem;

    line-height: 1.5;

}



/* Range Finder Visual */

.range-finder-container {

    background: #111;

    border: 1px solid #333;

    border-radius: 8px;

    padding: 1.5rem;

    margin-bottom: 2rem;

    position: relative;

}



.range-title {

    font-family: 'Teko', sans-serif;

    font-size: 1.3rem;

    color: #fff;

    text-align: center;

    margin-bottom: 1.5rem;

    text-transform: uppercase;

}



.range-track {

    height: 40px;

    background: #222;

    border-radius: 20px;

    position: relative;

    display: flex;

    overflow: hidden;

    margin: 0 1rem;

}



.range-zone {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.75rem;

    font-weight: bold;

    text-transform: uppercase;

    color: #fff;

    position: relative;

}



.zone-grapple {

    width: 25%;

    background: rgba(25, 118, 210, 0.3);

    color: #88cfff;

    border-right: 1px solid #333;

}



.zone-pocket {

    width: 35%;

    background: rgba(211, 47, 47, 0.4);

    color: #ff8888;

    border-right: 1px solid #333;

    box-shadow: inset 0 0 20px rgba(211, 47, 47, 0.3);

}



.zone-kicking {

    width: 40%;

    background: rgba(255, 255, 255, 0.05);

    color: #aaa;

}



.zone-label {

    opacity: 0.7;

}



/* Dynamic Markers */

.fighter-marker {

    position: absolute;

    top: -35px;

    transform: translateX(-50%);

    font-family: 'Teko';

    font-size: 1.1rem;

    font-weight: bold;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.marker-arrow {

    width: 0;

    height: 0;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-top: 8px solid;

    margin-top: 2px;

}



.marker-gaethje {

    left: 42.5%;

    color: var(--accent-red);

}



/* Center of Pocket (25% + 17.5%) */

.marker-gaethje .marker-arrow {

    border-top-color: var(--accent-red);

}



.marker-paddy {

    left: 80%;

    color: var(--accent-blue);

}



/* Mid Kicking Range */

.marker-paddy .marker-arrow {

    border-top-color: var(--accent-blue);

}



.sweet-spot-highlight {

    position: absolute;

    bottom: 0;

    left: 25%;

    /* Start of Pocket */

    width: 35%;

    /* Width of Pocket */

    height: 4px;

    background: var(--accent-gold);

    box-shadow: 0 0 10px var(--accent-gold);

    animation: pulse-gold 2s infinite;

}



@keyframes pulse-gold {

    0% {

        opacity: 0.5;

    }



    50% {

        opacity: 1;

        box-shadow: 0 0 15px var(--accent-gold);

    }



    100% {

        opacity: 0.5;

    }

}



/* =========================================

   MASTERPIECE FEATURES: PHASE 4

   Money War & Chaos Matrix

   ========================================= */



/* Money War Container */

.money-war-section {

    max-width: 1200px;

    margin: 3rem auto;

    padding: 0 10%;

}



.money-war-container {

    background: linear-gradient(180deg, #111 0%, #000 100%);

    border: 1px solid var(--accent-gold);

    border-radius: 8px;

    padding: 2rem;

    position: relative;

    box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);

}



.money-title {

    font-family: 'Teko', sans-serif;

    font-size: 2rem;

    color: var(--accent-gold);

    text-align: center;

    margin-bottom: 0.5rem;

    text-transform: uppercase;

    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);

}



.money-subtitle {

    text-align: center;

    color: #888;

    font-size: 0.9rem;

    margin-bottom: 2rem;

}



.money-split-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1.5rem;

}



.split-label-group {

    text-align: center;

    width: 20%;

}



.split-label {

    display: block;

    font-family: 'Teko';

    font-size: 1.2rem;

    color: #fff;

    margin-bottom: 4px;

}



.split-desc {

    display: block;

    font-size: 0.7rem;

    color: #666;

}



.money-bar-track {

    width: 60%;

    height: 30px;

    background: #222;

    border-radius: 4px;

    display: flex;

    overflow: hidden;

    position: relative;

    box-shadow: inset 0 0 10px #000;

}



.money-segment {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    color: #000;

    font-family: 'Teko';

    font-size: 1.1rem;

    transition: width 1s ease-out;

}



.segment-gaethje {

    background: var(--accent-red);

    box-shadow: 0 0 15px var(--accent-red);

    z-index: 2;

}



.segment-paddy {

    background: var(--accent-blue);

    opacity: 0.8;

}



.sharp-indicator {

    position: absolute;

    top: -30px;

    left: 20%;

    /* Pointing to Gaethje's side */

    color: var(--accent-gold);

    font-size: 0.8rem;

    font-weight: bold;

    animation: bounce 2s infinite;

}



@keyframes bounce {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-5px);

    }

}



/* Chaos Matrix */

.chaos-matrix-container {

    margin-top: 2rem;

    background: rgba(0, 0, 0, 0.4);

    border: 1px solid #333;

    padding: 1.5rem;

    border-radius: 8px;

}



.chaos-title {

    font-family: 'Teko', sans-serif;

    color: #d32f2f;

    /* Red for chaos */

    font-size: 1.5rem;

    margin-bottom: 1rem;

    border-bottom: 1px solid #333;

    padding-bottom: 0.5rem;

}



.chaos-graph {

    height: 150px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    padding: 0 1rem;

    position: relative;

    border-left: 1px solid #444;

    border-bottom: 1px solid #444;

}



.chaos-point {

    width: 25%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-end;

    height: 100%;

}



.chaos-bar {

    width: 40px;

    background: #333;

    position: relative;

    border-top: 2px solid #fff;

    transition: height 1s ease;

}



.chaos-bar.red-zone {

    background: linear-gradient(0deg, transparent, rgba(211, 47, 47, 0.5));

    border-top-color: var(--accent-red);

}



.chaos-bar.blue-zone {

    background: linear-gradient(0deg, transparent, rgba(25, 118, 210, 0.5));

    border-top-color: var(--accent-blue);

}



.chaos-label {

    margin-top: 10px;

    font-size: 0.8rem;

    color: #888;

}



.chaos-val {

    position: absolute;

    top: -20px;

    width: 100%;

    text-align: center;

    font-size: 0.75rem;

    color: #fff;

    font-weight: bold;

}



/* Fighter Card Detailed Stats */

.fighter-stats-detailed {

    /* margin: 1rem 0; Removed margin to fit better in grid */

    padding: 1rem;

    background: rgba(0, 0, 0, 0.3);

    border-radius: 6px;

    border: 1px solid #333;

    height: 100%;

    /* Fill height */

}



/* New Layout Grid for Card Internals */

.fighter-card-layout-grid {

    display: grid;

    grid-template-columns: 1fr 220px;

    /* Main info (flexible) vs Stats Col (fixed/narrower) */

    gap: 1rem;

    align-items: start;

    margin-top: 1rem;

}



/* Adjustments for columns */

.col-profile-info {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



/* Responsive adjustment if needed, though fight cards usually fixed width desktop */

@media (max-width: 1200px) {

    .fighter-card-layout-grid {

        grid-template-columns: 1fr;

        /* Stack on smaller screens */

    }

}



.stat-group-title {

    font-size: 0.75rem;

    color: #888;

    text-transform: uppercase;

    text-align: center;

    margin-bottom: 0.8rem;

    letter-spacing: 1px;

    border-bottom: 1px solid #333;

    padding-bottom: 4px;

}



.stat-row-mini {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 4px;

    font-size: 0.85rem;

}



.stat-label-mini {

    color: #aaa;

}



.stat-val-mini {

    font-family: 'Teko';

    font-size: 1rem;

    color: #fff;

}



.stat-bar-micro-track {

    width: 100%;

    height: 4px;

    background: #222;

    border-radius: 2px;

    margin-bottom: 8px;

    overflow: hidden;

}



.stat-bar-micro-fill {

    height: 100%;

    border-radius: 2px;

}



/* Fighter Profile Images */

.fighter-image-wrapper {

    text-align: center;

    margin-bottom: 0.5rem;

    height: 300px;

    /* Fixed height for consistency */

    display: flex;

    align-items: flex-end;

    justify-content: center;

    overflow: hidden;

}



.fighter-profile-img {

    max-height: 100%;

    max-width: 100%;

    object-fit: contain;

    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.6));

    transition: transform 0.3s ease;

}



.fighter-profile-img:hover {

    transform: scale(1.05);

}



/* Fighter Social Stats */

.fighter-social {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin-bottom: 0.5rem;

    font-family: var(--font-primary);

}



.social-link {

    color: var(--accent-gold);

    text-decoration: none;

    font-weight: bold;

    font-size: 1rem;

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 2px;

    transition: color 0.3s ease;

}



.social-link:hover {

    color: #fff;

    text-shadow: 0 0 10px var(--accent-gold);

}



.follower-count {

    font-size: 0.8rem;

    color: #888;

    text-transform: uppercase;

    letter-spacing: 1px;

}



/* Fighter Identity (Flag + Name) */

.fighter-identity {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-bottom: 5px;

}



.country-flag {

    font-size: 1.5rem;

    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));

}



/* Style Analysis Grid (Chart + Text) */

.style-analysis-grid {

    display: grid;

    grid-template-columns: 100px 1fr;

    /* Fixed chart width, flexible text */

    gap: 15px;

    align-items: center;

    padding: 10px;

    background: rgba(255, 255, 255, 0.03);

    border-radius: 8px;

    margin-top: 10px;

    margin-bottom: 10px;

}



.style-description {

    text-align: left;

    font-size: 0.85rem;

    line-height: 1.4;

    color: #ddd;

}



.style-description h4 {

    margin: 0 0 4px 0;

    font-size: 0.95rem;

    color: var(--accent-gold);

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 800;

}



.style-description p {

    margin: 0;

    opacity: 0.9;

}



/* Specific styling adjustments for the chart in this layout */

.style-analysis-grid .donut-chart-container {

    margin: 0;

    /* Removing auto margins if they exist */

    flex-shrink: 0;

}



/* Business Reality Section */

.business-reality-section {

    margin-top: 2rem;

    background: rgba(0, 0, 0, 0.4);

    border: 1px solid #444;

    border-radius: 12px;

    padding: 1.5rem;

    backdrop-filter: blur(5px);

}



.business-header {

    text-align: center;

    margin-bottom: 1.5rem;

}



.business-header h3 {

    font-family: 'Teko', sans-serif;

    font-size: 2rem;

    color: #fff;

    margin: 0;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.business-header .sub-header {

    color: var(--accent-gold);

    font-size: 0.9rem;

    letter-spacing: 1px;

}



.business-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.5rem;

}



@media (max-width: 768px) {

    .business-grid {

        grid-template-columns: 1fr;

    }

}



.business-card {

    background: rgba(255, 255, 255, 0.05);

    padding: 1rem;

    border-radius: 8px;

    border-left: 3px solid #666;

}



.business-card.gaethje-outcome {

    border-color: var(--accent-red);

}



.business-card.paddy-outcome {

    border-color: var(--accent-blue);

}



.business-card h4 {

    margin: 0 0 10px 0;

    font-size: 1.1rem;

    color: #fff;

}



.outcome-tag {

    display: inline-block;

    padding: 2px 8px;

    border-radius: 4px;

    font-size: 0.7rem;

    font-weight: bold;

    margin-bottom: 10px;

}



.outcome-tag.status-quo {

    background: #444;

    color: #ccc;

}



.outcome-tag.gold-rush {

    background: linear-gradient(45deg, #FFD700, #FFA500);

    color: #000;

}



.business-card p {

    font-size: 0.9rem;

    color: #ddd;

    line-height: 1.4;

    margin-bottom: 10px;

}



.profit-impact {

    font-family: 'Teko';

    font-size: 1.1rem;

    color: #888;

}



.profit-impact .neutral {

    color: #bbb;

}



.profit-impact .positive {

    color: #00e676;

    text-shadow: 0 0 5px rgba(0, 230, 118, 0.3);

}



.verdict-banner {

    margin-top: 1.5rem;

    background: #222;

    padding: 10px;

    text-align: center;

    border-radius: 6px;

    border: 1px dashed var(--accent-gold);

}



.verdict-label {

    color: #888;

    font-size: 0.9rem;

}



.verdict-result {

    color: var(--accent-gold);

    font-weight: bold;

    margin-left: 10px;

}





/* Fun Zone */

.fun-zone-section {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.5rem;

    margin-top: 2rem;

    margin-bottom: 2rem;

}



@media (max-width: 768px) {

    .fun-zone-section {

        grid-template-columns: 1fr;

    }

}



.fun-module {

    background: rgba(20, 20, 30, 0.6);

    padding: 1.5rem;

    border-radius: 12px;

    border: 1px solid #333;

}



.fun-module h4 {

    margin: 0 0 1rem 0;

    font-family: 'Teko';

    font-size: 1.5rem;

    color: #fff;

    text-align: center;

}



/* Scouse Translator */

.translator-box {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.term-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: rgba(255, 255, 255, 0.05);

    padding: 8px;

    border-radius: 4px;

}



.scouse-term {

    color: var(--accent-blue);

    font-weight: bold;

}



.arrow {

    color: #666;

    font-size: 0.8rem;

}



.eng-term {

    color: #ddd;

    font-style: italic;

}



/* Bonus Meter */

.meter-display {

    text-align: center;

}



.meter-label {

    font-size: 0.8rem;

    color: #888;

    margin-bottom: 5px;

}



.meter-track {

    height: 25px;

    background: #333;

    border-radius: 12px;

    position: relative;

    overflow: hidden;

    margin-bottom: 10px;

}



.meter-fill {

    height: 100%;

    background: linear-gradient(90deg, #d32f2f, #ff0000);

    box-shadow: 0 0 15px #ff0000;

    animation: pulse 1.5s infinite;

}



.meter-value {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-size: 0.8rem;

    font-weight: bold;

    color: #fff;

    text-shadow: 0 0 2px #000;

    white-space: nowrap;

}



.meter-caption {

    font-size: 0.8rem;

    color: #aaa;

    margin: 0;

    font-style: italic;

}



@keyframes pulse {

    0% {

        opacity: 0.8;

    }



    50% {

        opacity: 1;

    }



    100% {

        opacity: 0.8;

    }

}



/* ELITE GOLD STANDARD COMPONENTS */



/* Range Finder */

.range-finder-container {

    background: rgba(0, 0, 0, 0.3);

    padding: 2rem;

    border-radius: 12px;

    border: 1px solid #333;

    margin-bottom: 2rem;

}



.range-track {

    height: 40px;

    background: #222;

    border-radius: 20px;

    position: relative;

    margin: 2rem 0;

    display: flex;

    overflow: visible;

}



.range-zone {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    border-right: 1px solid #333;

    font-size: 0.7rem;

    font-family: 'Teko';

    color: #555;

    z-index: 1;

}



.zone-grapple {

    background: rgba(0, 0, 0, 0.2);

}



.zone-pocket {

    background: rgba(255, 255, 255, 0.02);

}



.zone-kicking {

    background: rgba(0, 0, 0, 0.2);

}



.sweet-spot-highlight {

    position: absolute;

    height: 100%;

    background: rgba(212, 175, 55, 0.15);

    border: 1px dashed var(--accent-gold);

    z-index: 0;

}



.fighter-marker {

    position: absolute;

    top: -30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    transform: translateX(-50%);

    transition: all 0.5s ease;

}



.fighter-marker span {

    font-family: 'Teko';

    font-size: 0.9rem;

    background: #000;

    padding: 2px 8px;

    border-radius: 4px;

    border: 1px solid #444;

}



.marker-red span {

    color: var(--accent-red);

    border-color: var(--accent-red);

}



.marker-blue span {

    color: var(--accent-blue);

    border-color: var(--accent-blue);

}



.marker-arrow {

    width: 0;

    height: 0;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    border-top: 5px solid #fff;

    margin-top: 2px;

}



/* Chaos Matrix */

.chaos-matrix-container {

    background: rgba(0, 0, 0, 0.4);

    padding: 2rem;

    border-radius: 12px;

    border: 1px solid #333;

    margin-bottom: 2rem;

}



.chaos-graph {

    height: 150px;

    display: flex;

    justify-content: space-around;

    align-items: flex-end;

    padding-top: 2rem;

}



.chaos-point {

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 60px;

}



.chaos-val {

    font-family: 'Teko';

    font-size: 1.2rem;

    color: #fff;

    margin-bottom: 5px;

}



.chaos-bar {

    width: 15px;

    border-radius: 4px 4px 0 0;

    transition: height 1s ease;

}



.chaos-bar.red-zone {

    background: var(--accent-red);

    box-shadow: 0 0 10px var(--accent-red);

}



.chaos-bar.blue-zone {

    background: var(--accent-blue);

    box-shadow: 0 0 10px var(--accent-blue);

}



.chaos-label {

    font-size: 0.7rem;

    color: #666;

    margin-top: 10px;

    font-weight: bold;

}



/* Pace Bars */

.pace-graph-container {

    margin: 1rem 0;

}



.pace-bars {

    display: flex;

    gap: 8px;

    align-items: flex-end;

}



.pace-bar {

    flex: 1;

    border-radius: 2px;

    position: relative;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    padding-top: 5px;

}



.pace-bar span {

    font-size: 0.6rem;

    color: #fff;

    opacity: 0;

    transition: opacity 0.3s;

}



.pace-bar:hover span {

    opacity: 1;

}



.pace-bar.red {

    background: linear-gradient(180deg, var(--accent-red), transparent);

}



.pace-bar.blue {

    background: linear-gradient(180deg, var(--accent-blue), transparent);

}



/* Money War */

.money-war-section {

    margin-top: 2rem;

}



.money-war-container {

    background: rgba(10, 10, 10, 0.7);

    padding: 2rem;

    border-radius: 12px;

    border: 1px solid #333;

}



.money-track-wrap {

    display: flex;

    align-items: center;

    gap: 20px;

}



.money-bar-segment {

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: 'Teko';

    font-size: 1.2rem;

    color: #fff;

    font-weight: bold;

    transition: width 1s ease-in-out;

}


/* ONE CHAMPIONSHIP / FIGHT PAGE FIXES */
.fighters-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin: 2rem 0;
    align-items: stretch;
}

.fighter-card {
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fighter-image-container {
    width: 100%;
    height: 480px;
    /* Taller for vertical photos */
    margin-bottom: 1.5rem;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(to bottom, transparent, #000);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8);
}

.fighter-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
}

.fighter-card:hover .fighter-img {
    transform: scale(1.05);
}

.corner-label {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 6px 15px;
    font-family: 'Teko', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    z-index: 10;
    border-radius: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
}

.fighter-record-badge {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #D4AF37;
    padding: 5px 20px;
    border-radius: 20px;
    font-family: 'Teko', sans-serif;
    font-size: 1.1rem;
    border: 1px solid rgba(212, 175, 55, 0.3);
    z-index: 10;
    white-space: nowrap;
}

.fighter-info {
    text-align: center;
    width: 100%;
    z-index: 5;
}

.fighter-info h2 {
    font-family: 'Teko', sans-serif;
    font-size: 2.5rem;
    margin: 0;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
}

.fighter-info .nickname {
    color: #888;
    font-style: italic;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
}

.stat-box {
    text-align: center;
}

.stat-label {
    font-size: 0.7rem;
    color: #666;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.stat-val {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ddd;
}

.red-corner .corner-label {
    background: #ff4444;
}

.blue-corner .corner-label {
    background: #00c3ff;
}

.text-green {
    color: #00ff41;
}

.text-red {
    color: #ff4444;
}

.badgex {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 0.8rem;
    margin-right: 5px;
    font-weight: bold;
}

.badge-one {
    background: #000;
    border: 1px solid #D4AF37;
    color: #D4AF37;
}

/* Responsive */
@media (max-width: 768px) {
    .fighters-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .fighter-image-container {
        height: 400px;
    }
}

/* ONE CHAMPIONSHIP MAIN EVENT SPECIAL STYLES */



/* 1. 4oz Glove Volatility Index */

.chaos-meter-container {

    background: rgba(0, 0, 0, 0.6);

    border: 1px solid #D32F2F;

    border-radius: 8px;

    padding: 15px;

    margin: 20px 0;

    text-align: center;

}



.chaos-title {

    font-family: 'Teko', sans-serif;

    color: #D32F2F;

    font-size: 1.4rem;

    margin-bottom: 10px;

    letter-spacing: 1px;

}



.volatility-bar-bg {

    width: 100%;

    height: 12px;

    background: #333;

    border-radius: 6px;

    overflow: hidden;

    position: relative;

    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);

}



.volatility-fill {

    height: 100%;

    background: linear-gradient(90deg, #ff9800 0%, #ff4444 50%, #b71c1c 100%);

    width: 0%;

    /* JS will animate this */

    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);

    box-shadow: 0 0 10px #ff4444;

}



.chaos-label {

    margin-top: 8px;

    font-size: 0.8rem;

    color: #ffd700;

    font-weight: bold;

}



/* 3. Muay Thai Radar (Container) */

.muay-thai-radar {

    background: rgba(10, 10, 10, 0.8);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 12px;

    padding: 20px;

    margin: 20px 0;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.radar-title {

    font-family: 'Teko', sans-serif;

    font-size: 1.5rem;

    color: #D4AF37;

    margin-bottom: 20px;

    border-bottom: 1px solid rgba(212, 175, 55, 0.3);

    padding-bottom: 5px;

    width: 100%;

    text-align: center;

}



/* Radar Stats List */

.radar-stats-list {

    width: 100%;

    margin-top: 20px;

}



.radar-row {

    display: flex;

    align-items: center;

    margin-bottom: 15px;

    gap: 10px;

}



.radar-metric-label {

    flex: 0 0 120px;

    font-size: 0.8rem;

    color: #aaa;

    text-align: center;

    text-transform: uppercase;

    font-weight: bold;

}



.radar-side {

    flex: 1;

    display: flex;

    align-items: center;

}



.radar-side.red {

    justify-content: flex-end;

}



.radar-side.blue {

    justify-content: flex-start;

}



.radar-bar {

    height: 8px;

    transition: width 1s ease-out;

}



.radar-bar.red {

    background: #ff4444;

    border-radius: 4px 0 0 4px;

    box-shadow: -2px 0 10px rgba(255, 68, 68, 0.3);

}



.radar-bar.blue {

    background: #00c3ff;

    border-radius: 0 4px 4px 0;

    box-shadow: 2px 0 10px rgba(0, 195, 255, 0.3);

}



.radar-val {

    font-family: 'Teko', sans-serif;

    font-size: 1.1rem;

    color: #fff;

    margin: 0 10px;

    min-width: 25px;

    text-align: center;

}

/* ONE CHAMPIONSHIP MAIN EVENT SPECIAL STYLES */

/* 1. 4oz Glove Volatility Index */
.chaos-meter-container {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #D32F2F;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
    text-align: center;
}

.chaos-title {
    font-family: 'Teko', sans-serif;
    color: #D32F2F;
    font-size: 1.4rem;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.volatility-bar-bg {
    width: 100%;
    height: 12px;
    background: #333;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

.volatility-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff9800 0%, #ff4444 50%, #b71c1c 100%);
    width: 0%;
    /* JS will animate this - overridden inline */
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 10px #ff4444;
}

.chaos-label {
    margin-top: 8px;
    font-size: 0.8rem;
    color: #ffd700;
    font-weight: bold;
}

/* 3. Muay Thai Radar (Container) */
.muay-thai-radar {
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.radar-title {
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    color: #D4AF37;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 5px;
    width: 100%;
    text-align: center;
}

/* Radar Stats List */
.radar-stats-list {
    width: 100%;
    margin-top: 20px;
}

.radar-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
}

.radar-metric-label {
    flex: 0 0 120px;
    font-size: 0.8rem;
    color: #aaa;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

.radar-side {
    flex: 1;
    display: flex;
    align-items: center;
}

.radar-side.red {
    justify-content: flex-end;
}

.radar-side.blue {
    justify-content: flex-start;
}

.radar-bar {
    height: 8px;
    transition: width 1s ease-out;
}

.radar-bar.red {
    background: #ff4444;
    border-radius: 4px 0 0 4px;
    box-shadow: -2px 0 10px rgba(255, 68, 68, 0.3);
}

.radar-bar.blue {
    background: #00c3ff;
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 0 10px rgba(0, 195, 255, 0.3);
}

.radar-val {
    font-family: 'Teko', sans-serif;
    font-size: 1.1rem;
    color: #fff;
    margin: 0 10px;
    min-width: 25px;
    text-align: center;
}

/* AGENT 22 ANALYSIS STYLES */
.analysis-section {
    margin-top: 3rem;
    padding: 2rem;
    background: rgba(10, 10, 10, 0.5);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.agent-card {
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.agent-card h3 {
    font-family: 'Teko', sans-serif;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 1rem;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}

.agent-card p {
    color: #ccc;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.keys-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.key-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.key-box h4 {
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    color: #D4AF37;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.key-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.key-box li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
    color: #ddd;
    font-size: 1rem;
}

.key-box li::before {
    content: 'â º';
    position: absolute;
    left: 0;
    color: #D4AF37;
    font-size: 0.8rem;
    top: 2px;
}

/* PREDICTION CARD */
.prediction-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #000 100%);
    border: 1px solid #D4AF37;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.prediction-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #D4AF37;
    box-shadow: 0 0 15px #D4AF37;
}

.pred-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1rem;
}

.pred-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.confidence-badge {
    background: #D4AF37;
    color: #000;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.9rem;
}

.pred-main {
    margin-bottom: 2rem;
}

.winner-name {
    font-family: 'Teko', sans-serif;
    font-size: 4rem;
    line-height: 1;
    color: #D4AF37;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}

.winner-red .winner-name {
    color: #ff4444;
    text-shadow: 0 2px 10px rgba(255, 68, 68, 0.3);
}

.winner-blue .winner-name {
    color: #00c3ff;
    text-shadow: 0 2px 10px rgba(0, 195, 255, 0.3);
}

.method {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.8;
}

.reasoning {
    text-align: left;
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 3px solid #D4AF37;
    color: #ccc;
    font-size: 1rem;
    line-height: 1.6;
}

.reasoning strong {
    color: #fff;
    display: block;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .keys-grid {
        grid-template-columns: 1fr;
    }
}

/* ONE CHAMPIONSHIP SPORT BADGES (FIXED) */
.badge-mt {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    border: 1px solid #ffd700;
}

.badge-kb {
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
    border: 1px solid #ff4444;
}

.badge-mma {
    background: rgba(0, 195, 255, 0.2);
    color: #00c3ff;
    border: 1px solid #00c3ff;
}

.badge-grappling {
    background: rgba(0, 255, 65, 0.2);
    color: #00ff41;
    border: 1px solid #00ff41;
}

.fighter-dossier {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1rem;
    text-align: left;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dossier-item {
    display: flex;
    gap: 8px;
}

.dossier-label {
    color: #D4AF37;
    font-family: 'Teko', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 1px;
    min-width: 100px;
    text-transform: uppercase;
}

.dossier-val {
    color: #eee;
    font-family: 'Outfit', sans-serif;
}


/* PREMIUM FIGHTER HISTORY STYLES */
.fighter-history {
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    margin-top: 1.5rem;
    padding: 1.2rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.history-title {
    font-family: 'Teko', sans-serif;
    color: #ffd700;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.history-table {
    width: 100%;
    font-size: 0.85rem;
    border-collapse: separate;
    border-spacing: 0 6px;
}

.history-table th {
    text-align: left;
    color: rgba(255, 255, 255, 0.4);
    padding: 0 10px 8px;
    font-family: 'Teko', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.history-table tr {
    transition: all 0.2s ease;
}

.history-table tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.history-table td {
    padding: 10px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.history-table td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.03);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.history-table td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.03);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.hist-res {
    font-weight: 900;
    width: 45px;
    text-align: center !important;
    font-family: 'Teko', sans-serif !important;
    font-size: 1.1rem;
}

.res-win {
    color: #000 !important;
    background: #00ff41;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.2);
    padding: 2px 6px !important;
    border-radius: 3px;
}

.res-loss {
    color: #fff !important;
    background: #ff4444;
    padding: 2px 6px !important;
    border-radius: 3px;
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.2);
}

.res-nc {
    color: #fff !important;
    background: #555;
    padding: 2px 6px !important;
    border-radius: 3px;
}

.history-table td:nth-child(2) {
    font-weight: 400;
    color: #ffd700;
    font-family: 'Teko', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.history-table td:not(:nth-child(2)) {
    white-space: nowrap;
}

.fighter-history {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.history-table {
    min-width: 400px;
}

.history-table th:first-child,
.history-table td:first-child {
    width: 50px;
    text-align: center;
}

.history-table th:nth-child(2),
.history-table td:nth-child(2) {
    width: 35%;
}

.history-table th:nth-child(3),
.history-table td:nth-child(3) {
    width: 25%;
}

/* --- AGENT 22 MOBILE OPTIMIZATIONS (ADDED FOR READABILITY) --- */
@media screen and (max-width: 768px) {

    /* Base Container */
    .container {
        padding: 1rem;
        margin-top: 140px;
        /* Increased top margin for stacked navbar */
        gap: 2rem;
    }

    /* Typography Scaling */
    .main-title {
        font-size: 2.5rem;
        line-height: 1.1;
    }

    .event-title {
        font-size: 1.2rem;
    }

    .fighter-name {
        font-size: 2.2rem;
    }

    .fighter-name .lastname {
        font-size: 3rem;
    }

    /* Grid Adjustments - FORCE STACKING */
    .fight-card,
    .fighters-comparison,
    .gym-grid,
    .tech-grid,
    .fighter-stats-grid,
    .keys-grid,
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* Specific Grid Fixes */
    .fighter-stats-grid {
        border-bottom: 2px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 1.5rem;
        margin-bottom: 1.5rem;
    }

    /* Card Padding & Spacing */
    .fighter-card,
    .gym-deep-dive,
    .tech-card,
    .agent-card,
    .prediction-card,
    .chaos-meter-container,
    .muay-thai-radar {
        padding: 1.5rem;
    }

    /* Navbar Modifications for Touch */
    .main-navbar {
        padding: 1rem;
        flex-direction: column;
        gap: 15px;
        height: auto;
        background: rgba(10, 10, 10, 0.98);
    }

    .nav-brand {
        font-size: 2rem;
    }

    .nav-actions {
        width: 100%;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .nav-btn {
        padding: 8px 12px;
        font-size: 1rem;
        white-space: nowrap;
    }

    /* Hero Button/Card Fixes (Oktagon etc) */
    /* Checks for inline styles roughly matching the hero buttons */
    button[style*="padding: 40px"],
    button[style*="padding: 30px"] {
        padding: 20px !important;
        flex-direction: column;
        text-align: center;
        height: auto !important;
    }

    /* VS Text in Hero */
    div[style*="font-size: 5rem"],
    div[style*="font-size: 3.5rem"] {
        font-size: 3rem !important;
        margin: 15px 0 !important;
    }

    /* Fighter Images in Hero */
    button img {
        width: 120px !important;
        height: 120px !important;
        margin: 10px auto !important;
    }

    /* Text Alignment in Hero */
    button div[style*="text-align: left"],
    button div[style*="text-align: right"] {
        text-align: center !important;
        margin: 0 !important;
        justify-content: center !important;
    }

    /* Radar Chart Fixes */
    .radar-row {
        flex-direction: column;
        gap: 5px;
        margin-bottom: 20px;
    }

    .radar-metric-label {
        font-size: 1rem;
        color: #fff;
        margin-bottom: 5px;
    }

    .radar-side {
        width: 100%;
        justify-content: center !important;
    }

    .radar-bar {
        height: 12px;
        width: 100% !important;
    }

    /* MOBILE OPTIMIZATION - APP STYLE */
    @media (max-width: 768px) {

        /* Hide desktop top nav actions, but keep brand */
        .nav-actions {
            display: none !important;
        }

        /* Scale down giant text */
        .main-title {
            font-size: 2.5rem !important;
        }

        .fighter-name {
            font-size: 2rem !important;
        }

        .fighter-name .lastname {
            font-size: 3rem !important;
        }

        .prediction-title {
            font-size: 1.5rem !important;
        }

        /* Content spacing */
        body {
            padding-bottom: 80px;
        }

        .container {
            padding: 1rem !important;
            margin-top: 60px !important;
        }

        /* Show sticky bottom bar ONLY on mobile */
        .mobile-bottom-bar {
            display: flex !important;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(10, 10, 10, 0.98);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 9999;
            justify-content: space-around;
            padding: 8px 0;
            padding-bottom: env(safe-area-inset-bottom, 8px);
            /* iOS Native feel */
            box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.8);
        }

        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: #888;
            font-family: 'Outfit', sans-serif;
            font-size: 0.75rem;
            gap: 2px;
        }

        .tab-icon {
            font-size: 1.5rem;
            line-height: 1;
        }
    }

    /* Hide sticky bottom bar on desktop screens by default */
    .mobile-bottom-bar {
        display: none;
    }

    .splittable  {
             display:  flex;
             gap:  20px;
             width:  100%;
             margin:  0 auto;
             max-width:  1400px;
         
    }

     @media (max-width: 900px)  {
             .splittable  {
                     flex-direction:  column;
                 
        }

         
    }

       

    /* --- AGENT 22 PREMIUM EXTENSIONS --- */
    .fighter-card {
        background: rgba(20, 20, 20, 0.4) !important;
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        padding: 2rem;
        border-radius: 16px;
        position: relative;
        overflow: hidden;
    }

    .fighter-card:hover {
        transform: translateY(-10px) scale(1.02);
        border-color: rgba(0, 255, 65, 0.4) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 255, 65, 0.1);
    }

    .fighter-profile-img {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
        margin-bottom: 1rem;
        display: block;
        transition: transform 0.5s ease;
    }

    .fighter-card:hover .fighter-profile-img {
        transform: scale(1.05);
    }

    .fighter-image-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
        perspective: 1000px;
    }

    /* THERMAL CONFIDENCE GAUGE */
    .thermal-gauge-container {
        width: 100%;
        max-width: 500px;
        margin: 2rem auto;
        position: relative;
        padding: 0 20px;
    }

    .thermal-label {
        display: flex;
        justify-content: space-between;
        font-family: 'Teko';
        font-size: 0.9rem;
        color: #888;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .thermal-bar {
        height: 14px;
        background: linear-gradient(90deg, #ff4444 0%, #ffd700 50%, #00ff41 100%);
        border-radius: 20px;
        position: relative;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .thermal-pointer {
        position: absolute;
        top: -8px;
        width: 6px;
        height: 30px;
        background: #fff;
        box-shadow: 0 0 15px #fff, 0 0 5px rgba(0, 0, 0, 0.5);
        border-radius: 3px;
        transition: left 1.5s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 5;
    }

    .sim-data-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-top: 2rem;
    }

    .sim-box {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        padding: 15px;
        border-radius: 10px;
        text-align: center;
    }

    .sim-val {
        display: block;
        font-family: 'Teko';
        font-size: 1.8rem;
        color: #00ff41;
        line-height: 1;
    }

    .sim-label {
        display: block;
        font-family: 'Outfit';
        font-size: 0.7rem;
        color: #888;
        text-transform: uppercase;
        margin-top: 5px;
    }

    /* AGENT 22: STRATEGIC DIAGNOSTICS & HEATMAPS */
    .strategic-diagnostics-hub {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 25px;
        margin-top: 3rem;
        padding: 25px;
        background: rgba(0, 195, 255, 0.03);
        border: 1px solid rgba(0, 195, 255, 0.1);
        border-radius: 20px;
    }

    .diag-header {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(255, 215, 0, 0.2);
        padding-bottom: 15px;
        margin-bottom: 10px;
    }

    .diag-title {
        font-family: Teko;
        font-size: 2.2rem;
        color: #ffd700;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .sim-log-window {
        background: #000;
        border: 1px solid #333;
        border-radius: 10px;
        padding: 20px;
        height: 380px;
        overflow-y: hidden;
        font-family: "Courier New", monospace;
        font-size: 0.8rem;
        color: #00ff41;
        position: relative;
        box-shadow: inset 0 0 20px rgba(0, 255, 65, 0.1);
    }

    .sim-log-window::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
        background-size: 100% 4px, 3px 100%;
        pointer-events: none;
        z-index: 5;
    }

    .heatmap-viewport {
        position: relative;
        background: #000;
        border-radius: 12px;
        background-image: url('../assets/fighter_heatmap_ui.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .finish-zone {
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 68, 68, 0.6) 0%, transparent 70%);
        width: 60px;
        height: 60px;
        filter: blur(8px);
        opacity: 0;
        transition: opacity 1s ease-in-out;
        animation: pulse-heatmap 2s infinite ease-in-out;
    }

    @keyframes pulse-heatmap {
        0% {
            transform: scale(1);
            opacity: 0.4;
        }

        50% {
            transform: scale(1.2);
            opacity: 0.8;
        }

        100% {
            transform: scale(1);
            opacity: 0.4;
        }
    }

    .log-line {
        margin-bottom: 5px;
        opacity: 0;
        animation: fade-in-log 0.3s forwards;
    }

    @keyframes fade-in-log {
        to {
            opacity: 1;
        }
    }

    .zone-label {
        position: absolute;
        background: rgba(0, 0, 0, 0.8);
        border: 1px solid #ffd700;
        color: #ffd700;
        padding: 2px 6px;
        font-family: Teko;
        font-size: 0.7rem;
        text-transform: uppercase;
        border-radius: 3px;
        pointer-events: none;
    }

    @media (max-width: 900px) {
        .strategic-diagnostics-hub {
            grid-template-columns: 1fr;
        }
    }