/* ================================================================
   M6M Match Day Experience — Frontend Styles v1.3
   Palette:
     Deep Obsidian   #0E1116
     Dark Charcoal   #1A1F26
     Electric Teal   #00F5D4
     Off-White       #F4F5F6
     Slate Gray      #8A95A5
     Border          #2A323D
     Sub-border      #141920
   ================================================================ */

/* ── Section wrapper ─────────────────────────────────────────── */
.m6m-live-section {
    background: #0E1116;
    border-top:    1px solid #2A323D;
    border-bottom: 1px solid #2A323D;
}

.m6m-live-inner {
    box-sizing:  border-box;
    width:       100%;
    padding:     clamp(2rem, 4vw, 3rem) clamp(1.25rem, 5vw, 5rem);
}

/* ── Live pulse ──────────────────────────────────────────────── */
.m6m-live-pulse {
    display:    inline-block;
    width:      8px;
    height:     8px;
    border-radius: 50%;
    background: #2ecc71;
    animation:  m6m-pulse 1.4s ease-in-out infinite;
}
@keyframes m6m-pulse {
    0%, 100% { opacity: 1; transform: scale(1);   }
    50%       { opacity: .4; transform: scale(.7); }
}

/* ── Slide-in ────────────────────────────────────────────────── */
@keyframes m6m-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0);    }
}


/* ══════════════════════════════════════════════════════════════
   COMPONENT A — PREMIUM HEADER SCOREBOARD
   ══════════════════════════════════════════════════════════════ */

.m6m-scoreboard {
    background:    #1A1F26;
    border:        1px solid #2A323D;
    border-radius: 6px;
    padding:       2rem 1.5rem 1.5rem;
    margin-bottom: 2rem;
    text-align:    center;
}

/* Competition kicker + status row */
.m6m-scoreboard__meta-top {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             0.75rem 1.25rem;
    flex-wrap:       wrap;
    margin-bottom:   1.25rem;
}

.m6m-scoreboard__kicker {
    font-size:       0.72rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.18em;
    color:           #00F5D4;
}

.m6m-scoreboard__status {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4rem;
    font-size:       0.7rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.12em;
    border-radius:   4px;
    padding:         0.3rem 0.75rem;
}
.m6m-scoreboard__status--live { background: rgba(46,204,113,.15);  color: #2ecc71; border: 1px solid rgba(46,204,113,.35); }
.m6m-scoreboard__status--ht   { background: rgba(0,245,212,.12);   color: #00F5D4; border: 1px solid rgba(0,245,212,.30);  }
.m6m-scoreboard__status--ft   { background: rgba(255,255,255,.06); color: #8A95A5; border: 1px solid rgba(255,255,255,.12); }
.m6m-scoreboard__status--pre  { background: rgba(255,255,255,.04); color: rgba(244,245,246,.4); border: 1px solid rgba(255,255,255,.08); }

/* Teams + score row */
.m6m-scoreboard__teams {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             1.5rem;
    margin-bottom:   1.25rem;
}

.m6m-scoreboard__team {
    flex:            1;
    font-family:     'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size:       clamp(1rem, 2.5vw, 1.5rem);
    font-weight:     700;
    text-transform:  uppercase;
    color:           #F4F5F6;
    letter-spacing:  0.04em;
    line-height:     1.2;
}
.m6m-scoreboard__team--home { text-align: right;  }
.m6m-scoreboard__team--away { text-align: left;   }

.m6m-scoreboard__score-wrap {
    flex:            0 0 auto;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.4rem;
}

.m6m-scoreboard__score-badge {
    display:             inline-block;
    font-size:           clamp(2.5rem, 5vw, 3.5rem);
    font-weight:         700;
    color:               #00F5D4;
    line-height:         1;
    letter-spacing:      0.06em;
    font-variant-numeric: tabular-nums;
    background:          rgba(0,245,212,.08);
    border:              1px solid rgba(0,245,212,.2);
    border-radius:       6px;
    padding:             0.15em 0.5em;
}

.m6m-scoreboard__score-pre {
    font-size:       1.5rem;
    font-weight:     700;
    color:           #8A95A5;
    letter-spacing:  0.08em;
}

.m6m-scoreboard__score-status {
    font-size:       0.68rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.12em;
    color:           #8A95A5;
}

/* Date · venue · attendance row */
.m6m-scoreboard__meta-bottom {
    display:         flex;
    justify-content: center;
    gap:             0.5rem 2rem;
    flex-wrap:       wrap;
    font-size:       0.75rem;
    font-variant:    small-caps;
    letter-spacing:  0.07em;
    color:           #8A95A5;
}

/* Mobile: stack teams vertically */
@media (max-width: 599px) {
    .m6m-scoreboard__teams {
        flex-direction: column;
        gap: 0.75rem;
    }
    .m6m-scoreboard__team {
        text-align: center;
        flex: unset;
    }
}


/* ══════════════════════════════════════════════════════════════
   MAIN CONTENT GRID
   ══════════════════════════════════════════════════════════════ */

.m6m-live-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
    align-items:           start;
}
@media (max-width: 899px) {
    .m6m-live-grid {
        grid-template-columns: 1fr;
    }
}


/* ══════════════════════════════════════════════════════════════
   COMPONENT B — STRATEGIC LINEUP MATRIX
   ══════════════════════════════════════════════════════════════ */

.m6m-lineup {
    background:    #1A1F26;
    border:        1px solid #2A323D;
    border-radius: 6px;
    overflow:      hidden;
}

.m6m-lineup__hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0.875rem 1rem;
    background:      rgba(0,245,212,.04);
    border-bottom:   1px solid #2A323D;
}

.m6m-lineup__title {
    font-size:       0.72rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.14em;
    color:           #00F5D4;
    margin:          0;
}

/* Tab switcher — visible on mobile only */
.m6m-lineup__tabs { display: none; border-bottom: 1px solid #2A323D; }
@media (max-width: 899px) { .m6m-lineup__tabs { display: flex; } }

.m6m-lineup__tab-btn {
    flex:            1;
    min-height:      48px;
    padding:         0.75rem 1rem;
    font-size:       0.75rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.1em;
    color:           #8A95A5;
    background:      transparent;
    border:          none;
    border-bottom:   2px solid transparent;
    cursor:          pointer;
    transition:      color 0.2s, border-color 0.2s;
}
.m6m-lineup__tab-btn.is-active          { color: #00F5D4; border-bottom-color: #00F5D4; }
.m6m-lineup__tab-btn:hover:not(.is-active) { color: #F4F5F6; }
.m6m-lineup__tab-btn:focus-visible      { outline: 2px solid #00F5D4; outline-offset: -2px; }
.m6m-lineup__tab-btn:focus:not(:focus-visible) { outline: none; }

/* Two-column body on desktop */
.m6m-lineup__body {
    display:               grid;
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 899px) {
    .m6m-lineup__body               { grid-template-columns: 1fr; }
    .m6m-lineup__squad              { display: none; }
    .m6m-lineup__squad.is-active    { display: block; }
}

.m6m-lineup__squad + .m6m-lineup__squad { border-left: 1px solid #2A323D; }
@media (max-width: 899px) {
    .m6m-lineup__squad + .m6m-lineup__squad { border-left: none; }
}

.m6m-lineup__squad-hdr {
    font-size:       0.68rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.14em;
    color:           #8A95A5;
    padding:         0.6rem 1rem;
    background:      #0E1116;
    border-bottom:   1px solid #141920;
}

.m6m-lineup__player {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    padding:       0.55rem 1rem;
    border-bottom: 1px solid #141920;
    font-size:     0.875rem;
    min-height:    48px;
}
.m6m-lineup__player:last-child { border-bottom: none; }

.m6m-lineup__num {
    flex-shrink:  0;
    width:        2.2em;
    font-family:  'Courier New', Courier, monospace;
    font-weight:  700;
    font-size:    0.85rem;
    color:        #00F5D4;
    text-align:   center;
}

.m6m-lineup__name {
    flex:          1;
    color:         #F4F5F6;
    line-height:   1.3;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.m6m-lineup__name--out {
    color:                  #8A95A5;
    text-decoration:        line-through;
    text-decoration-color:  rgba(138,149,165,.4);
}

/* Teal bar = sub involvement */
.m6m-lineup__sub-bar {
    flex-shrink:   0;
    width:         3px;
    height:        16px;
    border-radius: 2px;
    background:    #00F5D4;
}

.m6m-lineup__empty {
    padding:    2rem 1rem;
    text-align: center;
    font-size:  0.875rem;
    color:      rgba(244,245,246,.3);
    grid-column: 1 / -1;
}


/* ══════════════════════════════════════════════════════════════
   LIVE PHOTOGRAPHY PANEL
   ══════════════════════════════════════════════════════════════ */

.m6m-live-photo {
    background:    #1A1F26;
    border:        1px solid #2A323D;
    border-radius: 6px;
    overflow:      hidden;
    position:      relative;
}

.m6m-live-photo__img-wrap {
    aspect-ratio: 4 / 3;
    overflow:     hidden;
    background:   #0E1116;
    display:      flex;
    align-items:  center;
    justify-content: center;
}

.m6m-live-photo__img {
    width:        100%;
    height:       auto;
    object-fit:   cover;
    display:      block;
    transition:   opacity 0.4s ease;
}
.m6m-live-photo__img.is-loading { opacity: 0.4; }

.m6m-live-photo__placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    font-size:       3rem;
    opacity:         0.15;
    color:           #8A95A5;
}

.m6m-live-photo__badge {
    position:         absolute;
    top:              10px;
    left:             10px;
    background:       rgba(14,17,22,.85);
    color:            #00F5D4;
    font-size:        0.65rem;
    font-weight:      700;
    text-transform:   uppercase;
    letter-spacing:   0.1em;
    padding:          3px 9px;
    border-radius:    4px;
    border:           1px solid rgba(0,245,212,.3);
}

.m6m-live-photo__caption {
    padding:      0.75rem 1rem;
    font-size:    0.8rem;
    color:        #8A95A5;
    font-style:   italic;
    line-height:  1.4;
    border-top:   1px solid #2A323D;
}


/* ══════════════════════════════════════════════════════════════
   COMPONENT C — LIVE MATCH TIMELINE / EVENTS STREAM
   ══════════════════════════════════════════════════════════════ */

.m6m-timeline {
    background:    #1A1F26;
    border:        1px solid #2A323D;
    border-top:    3px solid #00F5D4;
    border-radius: 6px;
    overflow:      hidden;
}

.m6m-timeline__hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0.875rem 1rem;
    background:      rgba(0,245,212,.04);
    border-bottom:   1px solid #2A323D;
}

.m6m-timeline__title {
    font-size:       0.72rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.14em;
    color:           #00F5D4;
    margin:          0;
}

.m6m-timeline__count {
    font-size: 0.7rem;
    color:     #8A95A5;
}

/* Scrollable event list */
.m6m-timeline__feed {
    list-style:      none;
    margin:          0;
    padding:         0.75rem 0;
    max-height:      480px;
    overflow-y:      auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #2A323D #1A1F26;
    position:        relative;
}
.m6m-timeline__feed::-webkit-scrollbar         { width: 4px; }
.m6m-timeline__feed::-webkit-scrollbar-track   { background: #1A1F26; }
.m6m-timeline__feed::-webkit-scrollbar-thumb   { background: #2A323D; border-radius: 2px; }
.m6m-timeline__feed::-webkit-scrollbar-thumb:hover { background: #00F5D4; }

/* Vertical axis line */
.m6m-timeline__feed::before {
    content:        '';
    position:       absolute;
    left:           3rem;
    top:            0;
    bottom:         0;
    width:          2px;
    background:     #2A323D;
    pointer-events: none;
}

/* Individual event row */
.m6m-timeline__item {
    display:    flex;
    align-items: flex-start;
    padding:    0.4rem 1rem 0.4rem 0;
    position:   relative;
    animation:  m6m-slide-in 0.3s ease-out;
}

/* Axis node dot */
.m6m-timeline__item::after {
    content:        '';
    position:       absolute;
    left:           calc(3rem - 5px);
    top:            1rem;
    width:          10px;
    height:         10px;
    border-radius:  50%;
    background:     #2A323D;
    border:         2px solid #1A1F26;
    z-index:        2;
    pointer-events: none;
}

/* Coloured dots by event type */
.m6m-timeline__item--goal::after,
.m6m-timeline__item--penalty_scored::after { background: #00F5D4; }
.m6m-timeline__item--own_goal::after,
.m6m-timeline__item--red::after            { background: #E74C3C; }
.m6m-timeline__item--yellow::after         { background: #F1C40F; }
.m6m-timeline__item--sub::after            { background: #00F5D4; }
.m6m-timeline__item--ht::after,
.m6m-timeline__item--ft::after             { background: #8A95A5; }

/* Minute stamp */
.m6m-timeline__min {
    flex-shrink:  0;
    width:        3rem;
    text-align:   center;
    font-family:  'Courier New', Courier, monospace;
    font-size:    0.7rem;
    font-weight:  700;
    color:        #00F5D4;
    padding-top:  0.9rem;
    line-height:  1;
    position:     relative;
    z-index:      1;
}

/* Event card */
.m6m-timeline__card {
    flex:              1;
    margin-left:       1.25rem;
    padding:           0.5rem 0.75rem;
    background:        #0E1116;
    border:            1px solid #2A323D;
    border-left-width: 3px;
    border-left-color: #2A323D;
    border-radius:     4px;
    font-size:         0.8rem;
    color:             rgba(244,245,246,.75);
    line-height:       1.5;
    display:           flex;
    align-items:       flex-start;
    justify-content:   space-between;
    gap:               0.5rem;
}
.m6m-timeline__card-text { flex: 1; }

/* Left border accent by type */
.m6m-timeline__item--goal .m6m-timeline__card,
.m6m-timeline__item--penalty_scored .m6m-timeline__card {
    border-left-color: #00F5D4;
    color:             #F4F5F6;
    font-weight:       500;
}
.m6m-timeline__item--own_goal .m6m-timeline__card,
.m6m-timeline__item--red .m6m-timeline__card      { border-left-color: #E74C3C; }
.m6m-timeline__item--yellow .m6m-timeline__card   { border-left-color: #F1C40F; }
.m6m-timeline__item--sub .m6m-timeline__card      { border-left-color: #00F5D4; }
.m6m-timeline__item--ht .m6m-timeline__card,
.m6m-timeline__item--ft .m6m-timeline__card {
    border-left-color: #8A95A5;
    justify-content:   center;
    color:             #8A95A5;
    font-style:        italic;
}

/* Right-edge discipline bar (yellow/red only) */
.m6m-timeline__bar {
    flex-shrink:   0;
    width:         4px;
    align-self:    stretch;
    border-radius: 2px;
    min-height:    1.25rem;
}
.m6m-timeline__item--yellow .m6m-timeline__bar { background: #F1C40F; }
.m6m-timeline__item--red    .m6m-timeline__bar { background: #E74C3C; }

.m6m-timeline__empty {
    padding:    2rem 1rem;
    text-align: center;
    font-size:  0.875rem;
    color:      rgba(244,245,246,.3);
}

/* Compact axis on small screens */
@media (max-width: 599px) {
    .m6m-timeline__feed::before { left: 2.5rem; }
    .m6m-timeline__item::after  { left: calc(2.5rem - 5px); }
    .m6m-timeline__min          { width: 2.5rem; font-size: 0.65rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .m6m-live-pulse       { animation: none; opacity: 1; }
    .m6m-timeline__item   { animation: none; }
    .m6m-live-photo__img  { transition: none; }
}