/* ============================================================
   Live Sports Matches v2.3 — Full Responsive + Engagement
   ============================================================ */
.lsm-wrapper *, .lsm-wrapper *::before, .lsm-wrapper *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── TOKENS ─────────────────────────────────────────────── */
.lsm-wrapper {
  --c-bg:        #0d0d0d;
  --c-surface:   #141414;
  --c-surface-2: #1a1a1a;
  --c-surface-h: #1f1f1f;
  --c-live-bg:   #180b0b;
  --c-border:    #202020;
  --c-border-2:  #2a2a2a;
  --c-live:      #e53935;
  --c-live-dim:  #b91c1c;
  --c-ht:        #d97706;
  --c-text:      #f0f0f0;
  --c-text-2:    #888;
  --c-text-3:    #444;
  --c-count:     #60a5fa;
  --c-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-family:   var(--c-font);
  background:    var(--c-bg);
  color:         var(--c-text);
  border:        1px solid var(--c-border);
  border-radius: 12px;
  overflow:      hidden;
  width:         100%;
  max-width:     100%;
  margin:        0 auto 28px;
  -webkit-text-size-adjust: 100%;
}

/* ── HERO ────────────────────────────────────────────────── */
.lsm-hero { background: var(--c-surface); border-bottom: 1px solid var(--c-border); position: relative; }
.lsm-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--lsm-sport-color,var(--c-live)); }
.lsm-hero__body { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px 16px; flex-wrap:wrap; }
.lsm-hero__left { display:flex; align-items:center; gap:14px; flex:1; min-width:0; }
.lsm-hero__icon-wrap { width:50px; height:50px; border-radius:12px; background:var(--c-bg); border:1px solid var(--c-border-2); display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.lsm-hero__info { display:flex; flex-direction:column; gap:6px; min-width:0; }
.lsm-hero__title,
.lsm-wrapper h2.lsm-hero__title {
  font-size:26px !important; font-weight:800 !important; color:#f0f0f0 !important;
  letter-spacing:-.02em !important; line-height:1 !important; border:none !important;
  margin:0 !important; padding:0 !important; text-transform:uppercase !important;
  background:none !important; box-shadow:none !important;
}
.lsm-hero__meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lsm-hero__live-badge { display:inline-flex; align-items:center; gap:6px; background:var(--c-live); color:#fff; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px 4px 8px; border-radius:4px; }
.lsm-hero__sub { font-size:13px; color:var(--c-text-2); font-weight:500; }
.lsm-hero__refresh { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-text-2); background:var(--c-bg); border:1px solid var(--c-border-2); border-radius:6px; padding:8px 16px; cursor:pointer; transition:all .15s; min-height:38px; white-space:nowrap; flex-shrink:0; }
.lsm-hero__refresh:hover { color:var(--c-text); border-color:#444; background:var(--c-surface-h); }
.lsm-hero__refresh.lsm-spinning svg { animation:lsm-spin .65s linear infinite; }
.lsm-hero__stats { display:flex; align-items:center; border-top:1px solid var(--c-border); padding:0 22px; }
.lsm-hero__stat { display:flex; flex-direction:column; align-items:center; padding:10px 18px 10px 0; margin-right:18px; border-right:1px solid var(--c-border); }
.lsm-hero__stat:last-child { border-right:none; }
.lsm-hero__stat-num { font-size:20px; font-weight:800; color:var(--c-text); line-height:1; }
.lsm-hero__stat-num--live { color:var(--c-live) !important; }
.lsm-hero__stat-label { font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-text-3); margin-top:3px; }

/* ── TAB BAR ─────────────────────────────────────────────── */
.lsm-tabs { display:flex; align-items:stretch; background:var(--c-surface); border-bottom:1px solid var(--c-border); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.lsm-tabs::-webkit-scrollbar { display:none; }
.lsm-tab { display:inline-flex; align-items:center; gap:6px; padding:14px 18px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-text-2); background:transparent; border:none; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:color .15s,border-color .15s,background .15s; min-height:44px; -webkit-tap-highlight-color:transparent; }
.lsm-tab:hover { color:#d0d0d0; background:rgba(255,255,255,.03); }
.lsm-tab--active { color:#fff !important; border-bottom-color:var(--c-live) !important; }
.lsm-tab__dot { width:6px; height:6px; border-radius:50%; background:var(--c-live); flex-shrink:0; animation:lsm-pulse 1.5s ease-in-out infinite; }

/* ── PANELS ─────────────────────────────────────────────── */
.lsm-panels   { min-height:180px; }
.lsm-panel    { display:none; }
.lsm-panel--active { display:block; }

/* ── GRID ───────────────────────────────────────────────── */
.lsm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--c-border); width:100%; }

/* ── CARD ───────────────────────────────────────────────── */
.lsm-card {
  position:relative; background:var(--c-surface); padding:18px 18px 14px;
  display:flex; flex-direction:column; gap:10px; min-height:118px;
  transition:background .14s, transform .14s; overflow:hidden; border:none;
  cursor:default;
}
.lsm-card:hover { background:var(--c-surface-h); }
.lsm-card--live { background:var(--c-live-bg) !important; }
.lsm-card--live::before { content:''; position:absolute; top:0; left:0; bottom:0; width:3px; background:var(--c-live-dim); }
.lsm-card--live:hover { background:#1e0d0d !important; }

/* ── CARD TOP ───────────────────────────────────────────── */
.lsm-card__top { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.lsm-card__sport { font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-text-3); flex-shrink:0; }
.lsm-card__top-right { display:flex; align-items:center; flex-shrink:0; }
.lsm-card__time { font-size:11px; font-weight:500; color:var(--c-text-2); white-space:nowrap; text-align:right; }

/* ── BADGES ─────────────────────────────────────────────── */
.lsm-badge { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px 3px 7px; border-radius:4px; white-space:nowrap; flex-shrink:0; }
.lsm-badge--live { background:var(--c-live); color:#fff; }
.lsm-badge--ht   { background:var(--c-ht);   color:#fff; }
.lsm-badge__dot, .lsm-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; animation:lsm-blink 1s step-start infinite; flex-shrink:0; }
.lsm-badge--live .lsm-badge__dot, .lsm-hero__live-badge .lsm-dot { background:#fff; }
@keyframes lsm-blink  { 0%,100%{opacity:1}50%{opacity:0} }
@keyframes lsm-pulse  { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)} }
@keyframes lsm-spin   { to{transform:rotate(360deg)} }

/* ── MATCHUP ─────────────────────────────────────────────── */
.lsm-card__matchup { display:flex; align-items:center; gap:8px; flex:1; }
.lsm-card__team { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.lsm-card__team--away { align-items:flex-start; }
.lsm-card__team--home { align-items:flex-end; text-align:right; }
.lsm-card__team-name { font-size:14px; font-weight:700; color:var(--c-text); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.lsm-card__score { font-size:22px; font-weight:800; color:var(--c-text); letter-spacing:-.02em; line-height:1; }
.lsm-card--live .lsm-card__score { color:#ff5e5e; }
.lsm-card__sep { font-size:10px; font-weight:700; color:var(--c-text-3); flex-shrink:0; letter-spacing:.08em; padding:4px 2px; }
.lsm-card__sep--score { font-size:16px; font-weight:300; color:var(--c-text-2); letter-spacing:0; }
.lsm-card__matchup--event { flex:1; }
.lsm-card__event-name { font-size:14px; font-weight:700; color:var(--c-text); line-height:1.35; }

/* ── CARD META ───────────────────────────────────────────── */
.lsm-card__meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:auto; }
.lsm-card__period { font-size:10px; font-weight:700; color:var(--c-live); letter-spacing:.06em; text-transform:uppercase; }
.lsm-card__venue  { font-size:10px; color:var(--c-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }

/* ── COUNTDOWN CHIP ─────────────────────────────────────── */
.lsm-card__countdown {
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:600; color:var(--c-count);
  background:rgba(96,165,250,.08); border:1px solid rgba(96,165,250,.2);
  padding:2px 7px; border-radius:20px;
  white-space:nowrap; flex-shrink:0;
}
.lsm-card__countdown:empty { display:none; }

/* ── EMPTY / ERROR ───────────────────────────────────────── */
.lsm-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:64px 24px; text-align:center; background:var(--c-surface); min-height:200px; }
.lsm-empty svg { opacity:.2; color:var(--c-text-2); }
.lsm-empty p   { font-size:15px; font-weight:600; color:var(--c-text-2); margin:0; }
.lsm-empty span { font-size:13px; color:var(--c-text-3); }
.lsm-error svg { opacity:.45; color:var(--c-live); }
.lsm-error p   { color:#e06060; }

/* ── SPINNER ─────────────────────────────────────────────── */
.lsm-placeholder { display:flex; align-items:center; justify-content:center; min-height:200px; background:var(--c-surface); }
.lsm-spinner { width:28px; height:28px; border:2px solid #232323; border-top-color:var(--c-text-2); border-radius:50%; animation:lsm-spin .65s linear infinite; display:block; }
.lsm-grid--loading { opacity:.4; pointer-events:none; transition:opacity .15s; }

/* ── FOOTER ─────────────────────────────────────────────── */
.lsm-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 20px; background:var(--c-surface); border-top:1px solid var(--c-border); flex-wrap:wrap; }
.lsm-footer__updated { font-size:11px; color:var(--c-text-3); }
.lsm-updated-time    { color:var(--c-text-2); font-weight:500; }
.lsm-footer__source  { font-size:10px; color:var(--c-text-3); margin-left:auto; }

.lsm-refresh-btn { display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-text-2); background:transparent; border:1px solid var(--c-border-2); border-radius:5px; padding:6px 13px; cursor:pointer; transition:color .13s,border-color .13s,background .13s; min-height:32px; white-space:nowrap; }
.lsm-refresh-btn:hover { color:var(--c-text); border-color:#444; background:var(--c-surface-h); }
.lsm-refresh-btn.lsm-spinning svg { animation:lsm-spin .6s linear infinite; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:920px) { .lsm-grid { grid-template-columns:repeat(2,1fr); } }

@media (max-width:640px) {
  .lsm-tab { padding:12px 13px; font-size:10px; letter-spacing:.07em; }
  .lsm-hero__title { font-size:22px !important; }
  .lsm-hero__body  { padding:16px 16px 12px; }
  .lsm-hero__stats { padding:0 16px; }
}

@media (max-width:520px) {
  .lsm-wrapper  { border-radius:10px; }
  .lsm-grid     { grid-template-columns:1fr; gap:0; background:transparent; }
  .lsm-card     { border-bottom:1px solid var(--c-border); border-radius:0; min-height:auto; padding:14px 16px 12px; }
  .lsm-card:last-child { border-bottom:none; }
  .lsm-card__team-name { font-size:13px; }
  .lsm-card__score     { font-size:19px; }
  .lsm-card__time      { font-size:10px; }
  .lsm-hero__title     { font-size:20px !important; }
  .lsm-hero__icon-wrap { width:42px; height:42px; font-size:21px; }
  .lsm-footer { padding:9px 14px; }
  .lsm-footer__source { display:none; }
}

@media (max-width:380px) {
  .lsm-tab { padding:11px 10px; font-size:9px; }
  .lsm-hero__title { font-size:17px !important; }
  .lsm-refresh-btn span, .lsm-hero__refresh span { display:none; }
  .lsm-refresh-btn { padding:6px 10px; }
  .lsm-hero__refresh { padding:8px 11px; }
}