/* ═══════════════════════════════════════════
   Cricket Score Ticker v4  — Realtime
   100 px tall × max 1920 px wide
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

.cst-root, .cst-root * { box-sizing: border-box; margin:0; padding:0; }

.cst-root {
  --h:      100px;
  --card-w: 265px;
  --nav-w:  38px;

  --bg:       #f1f3f4;
  --card:     #ffffff;
  --border:   #dadce0;
  --text:     #202124;
  --sub:      #5f6368;
  --live-c:   #137333;
  --live-bg:  #e6f4ea;
  --res-c:    #3c4043;
  --res-bg:   #f1f3f4;
  --upc-c:    #1a73e8;
  --upc-bg:   #e8f0fe;
  --abd-c:    #b06000;
  --abd-bg:   #fef7e0;
  --wc-top:   #f9ab00;

  --font: 'DM Sans',        sans-serif;
  --mono: 'JetBrains Mono', monospace;

  position: relative;
  width: 100%;
  max-width: 1920px;
  height: var(--h);
  background: var(--bg);
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  font-family: var(--font);
  overflow: hidden;
}

/* edge fades */
.cst-root::before, .cst-root::after {
  content: '';
  position: absolute;
  top: 0; height: 100%;
  width: 50px;
  z-index: 5;
  pointer-events: none;
}
.cst-root::before { left:  var(--nav-w); background: linear-gradient(to right, var(--bg), transparent); }
.cst-root::after  { right: var(--nav-w); background: linear-gradient(to left,  var(--bg), transparent); }

/* nav buttons */
.cst-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: var(--nav-w); height: 60px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--sub);
  transition: background .15s, color .15s, opacity .15s;
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.cst-nav svg { width:16px; height:16px; }
.cst-nav:hover:not(:disabled) { background: #f1f3f4; color: var(--text); }
.cst-nav:active { transform: translateY(-50%) scale(.95); }
.cst-nav:disabled { opacity: .28; cursor: default; }
.cst-nav-left  { left:  4px; }
.cst-nav-right { right: 4px; }

/* track */
.cst-track {
  display: flex;
  align-items: stretch;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0 calc(var(--nav-w) + 4px);
  width: 100%;
}
.cst-track::-webkit-scrollbar { display: none; }

/* skeleton row */
.cst-skeleton-row {
  display: flex;
  align-items: stretch;
  height: calc(var(--h) - 2px);
}

/* card */
.cst-card {
  width: var(--card-w); min-width: var(--card-w);
  height: 100%;
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 12px 7px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition: background .15s;
}
.cst-card:first-child { border-left: 1px solid var(--border); }
.cst-card:hover { background: #f8f9fa; }

/* wc card */
.cst-card-wc { background: linear-gradient(180deg,#fffbec 0%,#fff 60%); }
.cst-card-wc::before {
  content: '';
  position: absolute; top:0; left:0; right:0; height:3px;
  background: var(--wc-top);
}
.cst-card-wc:hover { background: #fffbec; }

/* skeleton */
.cst-card-skel { cursor:default; gap:6px; justify-content:center; }
.sk {
  background: linear-gradient(90deg,#e8eaed 25%,#f1f3f4 50%,#e8eaed 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.sk-badge  { height:12px; width:52px; }
.sk-row    { height:14px; width:88%; }
.sk-small  { height:10px; width:65%; }

/* card top */
.cst-top { display:flex; align-items:center; gap:5px; flex-shrink:0; }

.cst-badge {
  font-size:9px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; padding:2px 6px; border-radius:3px;
  line-height:1; flex-shrink:0;
}
.cst-badge-live      { background:var(--live-bg); color:var(--live-c); }
.cst-badge-result    { background:var(--res-bg);  color:var(--res-c);  }
.cst-badge-upcoming  { background:var(--upc-bg);  color:var(--upc-c);  }
.cst-badge-abandoned { background:var(--abd-bg);  color:var(--abd-c);  }
.cst-badge-wc        { background:#fef3c7;        color:#78350f;       }

.cst-live-dot {
  display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background:var(--live-c);
  margin-right:3px; vertical-align:middle;
  animation: ldot 1.1s ease-in-out infinite;
}
@keyframes ldot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }

.cst-series {
  font-size:9.5px; font-weight:500; color:var(--sub);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}

/* team rows */
.cst-middle { display:flex; flex-direction:column; gap:1px; flex:1; justify-content:center; }

.cst-trow {
  display:flex; align-items:center; justify-content:space-between; min-height:20px;
}
.cst-tleft { display:flex; align-items:center; gap:5px; flex:1; min-width:0; }

.cst-flag {
  width:22px; height:15px; object-fit:cover;
  border-radius:2px; border:1px solid rgba(0,0,0,.08); flex-shrink:0;
}
.cst-flag-ph {
  width:22px; height:15px; background:#e8eaed; border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  font-size:7px; font-weight:700; color:var(--sub); flex-shrink:0;
  border:1px solid rgba(0,0,0,.08);
}

.cst-tname {
  font-size:13px; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1;
}
.cst-tname-bat { color:var(--upc-c); }

.cst-tright { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; line-height:1; }
.cst-score  { font-family:var(--mono); font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; }
.cst-score-dim { color:var(--sub); font-weight:500; }
.cst-ov     { font-family:var(--mono); font-size:9px; color:var(--sub); white-space:nowrap; }

/* status */
.cst-status {
  font-size:10px; font-weight:500; color:var(--live-c);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex-shrink:0; line-height:1.1; min-height:12px;
}
.cst-status-result   { color:var(--upc-c); }
.cst-status-upcoming { color:var(--sub); }
.cst-status-draw     { color:var(--sub); }
.cst-status-abandoned{ color:var(--abd-c); }

/* clock */
.cst-clock {
  position:absolute; bottom:3px; right:calc(var(--nav-w) + 8px);
  font-family:var(--mono); font-size:9px; color:var(--sub);
  pointer-events:none; z-index:6; white-space:nowrap;
}

/* error */
.cst-error {
  display:flex; align-items:center; padding:0 20px;
  height:100%; font-size:12px; color:#c0392b; white-space:nowrap;
}

@media(max-width:640px){
  .cst-root { --card-w:230px; }
  .cst-tname { font-size:12px; }
  .cst-score { font-size:12px; }
}