/* ═══════════════════════════════════════════════════════════
   LIVIX MATCHCENTER — Athletiko-style · Super FM colours
   Noto Sans · Navy #00172D · Sky #3B9EE8
═══════════════════════════════════════════════════════════ */

.lmc-wrap {
  --c-navy:   #00172D;
  --c-navy2:  #001525;
  --c-panel:  #001e3c;
  --c-border: #0d2a4a;
  --c-sky:    #3B9EE8;
  --c-green:  #00c896;
  --c-red:    #e74c3c;
  --c-yellow: #f1c40f;
  --c-orange: #e67e22;
  --c-text:   #e8edf2;
  --c-muted:  #7a96b2;
  --c-muted2: #3d5a78;

  font-family: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
  background: var(--c-navy2);
  color: var(--c-text);
  max-width: 760px;
  margin: 0 auto 32px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}

/* ═══════════════════════════════════════════
   SCOREBOARD
═══════════════════════════════════════════ */
.lmc-scoreboard {
  background: var(--c-navy);
  border-bottom: 3px solid var(--c-sky);
  padding: 16px 20px 0;
}

/* Competition */
.lmc-competition {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-sky);
  margin-bottom: 16px;
  opacity: .9;
}
.lmc-icon    { width: 11px; height: 11px; }
.lmc-stadium { opacity: .5; font-weight: 400; letter-spacing: .05em; }

/* Teams row */
.lmc-teams-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.lmc-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.lmc-team-logo-wrap {
  width: 62px; height: 62px;
  display: flex; align-items: center; justify-content: center;
}
.lmc-team-logo {
  width: 58px; height: 58px;
  object-fit: contain;
}
.lmc-team-logo-placeholder {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; color: var(--c-sky);
}
.lmc-team-name {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
  line-height: 1.2;
  max-width: 120px;
  color: #fff;
}

/* Center */
.lmc-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}

/* Status */
.lmc-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
  white-space: nowrap;
}
.lmc-status--live      { background: #c0392b; color: #fff; }
.lmc-status--scheduled { background: rgba(59,158,232,.14); color: var(--c-sky); border: 1px solid rgba(59,158,232,.3); }
.lmc-status--ht        { background: rgba(255,255,255,.06); color: var(--c-muted); border: 1px solid rgba(255,255,255,.1); }
.lmc-status--finished  { background: rgba(255,255,255,.06); color: var(--c-muted); border: 1px solid rgba(255,255,255,.1); }

.lmc-live-dot {
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: lmcBlink 1s step-start infinite;
}
@keyframes lmcBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Score */
.lmc-score-wrap {
  display: flex; align-items: center; gap: 6px; line-height: 1;
}
.lmc-score-num {
  font-size: 54px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.lmc-score-sep {
  font-size: 30px;
  font-weight: 300;
  color: var(--c-muted2);
}
.lmc-minute {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-sky);
  letter-spacing: .08em;
}
.lmc-kickoff {
  font-size: 11px;
  color: var(--c-muted);
}

/* ── SCORERS row ── */
.lmc-scorers {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 10px 4px 12px;
}
.lmc-scorers-sep {
  background: rgba(255,255,255,.07);
  margin: 0 8px;
}
.lmc-scorers-home {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding-right: 12px;
}
.lmc-scorers-away {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-left: 12px;
}
.lmc-scorer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  line-height: 1.3;
}
.lmc-scorer svg {
  width: 8px; height: 8px;
  flex-shrink: 0;
  opacity: .85;
}

/* ═══════════════════════════════════════════
   EVENTS FEED
═══════════════════════════════════════════ */
.lmc-feed { background: var(--c-navy2); }

.lmc-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--c-muted);
  font-size: 13px;
  font-style: italic;
}

/* ── Event row: 2-col grid [left | body] ── */
.lmc-event {
  display: grid;
  grid-template-columns: 68px 1fr;
  border-bottom: 1px solid rgba(255,255,255,.045);
  transition: background .15s;
}
.lmc-event:last-child { border-bottom: none; }
.lmc-event:hover { background: rgba(255,255,255,.018); }

/* Left column: minute + icon */
.lmc-ev-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 14px 0 14px;
  background: rgba(0,0,0,.1);
  border-right: 1px solid rgba(255,255,255,.04);
}
.lmc-ev-minute {
  font-size: 11px;
  font-weight: 800;
  color: var(--c-sky);
  letter-spacing: .04em;
  min-height: 14px;
  line-height: 1;
}
.lmc-ev-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.lmc-ev-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

/* Body */
.lmc-ev-body {
  padding: 13px 16px 12px 14px;
}

/* Event type label */
.lmc-ev-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Title */
.lmc-ev-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 4px;
}

/* Player */
.lmc-ev-player {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-sky);
  margin-bottom: 4px;
}
.lmc-sub-arrow { color: var(--c-red); margin: 0 3px; font-size: 11px; }

/* Content text */
.lmc-ev-content {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(232,237,242,.8);
  margin: 5px 0 0;
}
.lmc-ev-content p { margin: 0 0 5px; }
.lmc-ev-content p:last-child { margin-bottom: 0; }

/* Image */
.lmc-ev-img {
  max-width: 100%;
  border-radius: 4px;
  margin: 8px 0 0;
  display: block;
}

/* Embed */
.lmc-ev-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 4px;
  margin: 8px 0 0;
}
.lmc-ev-embed iframe {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  border: none;
}

/* Timestamp */
.lmc-ev-time {
  font-size: 10px;
  color: var(--c-muted2);
  margin-top: 7px;
}

/* Team badge dot */
.lmc-ev-team-badge {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
}
.lmc-badge-home { background: var(--c-sky); }
.lmc-badge-away { background: var(--c-yellow); }

/* ── EVENT TYPE ACCENTS ── */
/* Goal */
.lmc-event--goal,
.lmc-event--penalty_goal {
  border-left: 3px solid var(--c-green);
}
.lmc-event--goal .lmc-ev-left,
.lmc-event--penalty_goal .lmc-ev-left {
  background: rgba(0,200,150,.07);
}
.lmc-event--goal .lmc-ev-minute,
.lmc-event--penalty_goal .lmc-ev-minute { color: var(--c-green); }
.lmc-event--goal .lmc-ev-title,
.lmc-event--penalty_goal .lmc-ev-title  { color: var(--c-green); }

/* Own goal */
.lmc-event--own_goal { border-left: 3px solid var(--c-red); }
.lmc-event--own_goal .lmc-ev-left   { background: rgba(231,76,60,.07); }
.lmc-event--own_goal .lmc-ev-minute { color: var(--c-red); }
.lmc-event--own_goal .lmc-ev-title  { color: var(--c-red); }

/* Cards */
.lmc-event--red_card,
.lmc-event--yellow_red { border-left: 3px solid var(--c-red); }
.lmc-event--red_card .lmc-ev-minute,
.lmc-event--yellow_red .lmc-ev-minute { color: var(--c-red); }

.lmc-event--yellow_card { border-left: 3px solid var(--c-yellow); }
.lmc-event--yellow_card .lmc-ev-minute { color: var(--c-yellow); }

/* Match state events */
.lmc-event--match_start,
.lmc-event--match_end,
.lmc-event--half_time,
.lmc-event--second_half { border-left: 3px solid var(--c-sky); }
.lmc-event--match_start .lmc-ev-left,
.lmc-event--match_end   .lmc-ev-left,
.lmc-event--half_time   .lmc-ev-left,
.lmc-event--second_half .lmc-ev-left { background: rgba(59,158,232,.06); }
.lmc-event--match_start .lmc-ev-title,
.lmc-event--match_end   .lmc-ev-title,
.lmc-event--half_time   .lmc-ev-title,
.lmc-event--second_half .lmc-ev-title {
  color: var(--c-sky);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* New event flash */
.lmc-event--new { animation: lmcFlash 1.2s ease-out forwards; }
@keyframes lmcFlash {
  0%   { background-color: rgba(59,158,232,.2); }
  100% { background-color: transparent; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 520px) {
  .lmc-score-num      { font-size: 42px; }
  .lmc-score-sep      { font-size: 24px; }
  .lmc-team-logo      { width: 46px; height: 46px; }
  .lmc-team-logo-wrap { width: 48px; height: 48px; }
  .lmc-team-logo-placeholder { width: 46px; height: 46px; font-size: 18px; }
  .lmc-team-name      { font-size: 11px; max-width: 90px; }
  .lmc-center         { padding: 0 6px; }
  .lmc-event          { grid-template-columns: 52px 1fr; }
  .lmc-ev-left        { padding: 12px 0; }
  .lmc-ev-icon        { width: 26px; height: 26px; font-size: 13px; }
  .lmc-ev-body        { padding: 11px 12px 11px 10px; }
  .lmc-ev-title       { font-size: 14px; }
  .lmc-ev-content     { font-size: 13px; }
  .lmc-scorers        { padding: 8px 4px 10px; }
  .lmc-scorer         { font-size: 10px; }
}