/* ============================================================
   AI Football — /results/ live-score widget
   Page-shell CSS (header/nav/hero/footer) is inline in the page;
   everything below styles the widget rendered by results.js.
   ============================================================ */

/* Twemoji-rendered flag images (twemoji.parse swaps emoji for <img class="emoji">) */
img.emoji{width:1.25em;height:1.25em;vertical-align:-0.25em;display:inline-block}

/* ---- fallback notice bar (under the hero) ---- */
.results-note{max-width:1200px;margin:0 auto;padding:6px 28px 0}
.results-note .note-inner{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);border:1px dashed var(--border);border-radius:10px;padding:8px 14px;text-align:center;background:rgba(0,212,255,0.04)}

/* ---- loading skeleton ---- */
@keyframes skel-shimmer{0%,100%{opacity:.45}50%{opacity:.9}}
.skel-day{width:240px;max-width:60%;height:14px;border-radius:7px;background:var(--navy3);margin:26px 0 12px;animation:skel-shimmer 1.6s ease-in-out infinite}
.skel-row{height:64px;border-radius:12px;background:linear-gradient(145deg,var(--navy3),var(--navy4));border:1px solid var(--border);margin-bottom:10px;animation:skel-shimmer 1.6s ease-in-out infinite}

/* ---- filter bar (Nearest / day chips / All) ---- */
.filter-bar{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.filter-bar::-webkit-scrollbar{display:none}
.filter-chip{flex:0 0 auto;white-space:nowrap;cursor:pointer;font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:7px 16px;border-radius:99px;border:1px solid transparent;background:transparent;color:var(--gray-l);transition:color .2s,border-color .2s,background .2s}
.filter-chip:hover{color:var(--cyan)}
.filter-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.filter-chip.active{background:rgba(0,212,255,.16);border-color:var(--border2);color:var(--cyan)}

/* ---- day group label ---- */
.day-head{
  position:sticky;top:67px;z-index:5;
  font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:3px;
  color:var(--gray);text-transform:uppercase;
  padding:16px 4px 10px;
  background:linear-gradient(180deg,var(--navy) 72%,rgba(10,14,26,0));
}
.day-head.live-head{color:var(--red)}

/* ---- collapsed match row ---- */
.match{margin-bottom:10px}
.match-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:12px;
  background:linear-gradient(145deg,var(--navy3),var(--navy4));
  border:1px solid var(--border);border-radius:12px;
  padding:14px 18px;cursor:pointer;
  transition:border-color .2s,box-shadow .2s;
}
.match-row:hover{border-color:var(--border2)}
.match-row:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.match.open .match-row{border-radius:12px 12px 0 0;border-color:var(--border2)}

.team{display:flex;align-items:center;gap:10px;min-width:0;font-weight:600;font-size:15px}
.team .t-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team.away{justify-content:flex-end;text-align:right}
.t-flag{font-size:22px;line-height:1;flex:0 0 auto}
img.team-logo{width:24px;height:24px;object-fit:contain;flex:0 0 auto}

/* center column: score / status */
.mid{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:90px}
.score{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:2px;line-height:1;color:var(--white)}
.score .goal-win{color:var(--cyan)}
.kickoff{font-family:'Oswald',sans-serif;font-size:15px;letter-spacing:2px;color:var(--gray)}
.pens{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:1px;color:var(--gray-l)}
.rel-time{font-size:11px;color:var(--gray);font-family:'Oswald',sans-serif;letter-spacing:1px}
.pill{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:2px 10px;border-radius:99px;border:1px solid var(--border);color:var(--gray);background:rgba(255,255,255,0.03)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.pill.live{color:#fff;background:var(--red);border-color:var(--red);animation:pulse 1.4s ease-in-out infinite}

/* ---- expanded detail panel ---- */
.match-detail{
  display:none;
  border:1px solid var(--border2);border-top:1px dashed var(--border);
  border-radius:0 0 12px 12px;
  background:var(--navy2);
  padding:18px 20px 22px;
}
.match.open .match-detail{display:block}
.detail-meta{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:2px;color:var(--gray);text-transform:uppercase;text-align:center;margin-bottom:6px}
.detail-sec-title{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:3px;color:var(--cyan);text-transform:uppercase;margin:18px 0 10px}
.detail-empty{color:var(--gray);font-size:13px;text-align:center;padding:10px 0}

@keyframes spin{to{transform:rotate(360deg)}}
.detail-spinner{color:var(--gray);font-size:13px;text-align:center;padding:14px 0}
.detail-spinner::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border-radius:50%;border:2px solid var(--border2);border-top-color:var(--cyan);animation:spin .8s linear infinite}
.detail-error{color:var(--red);font-size:13px;text-align:center;padding:14px 0}

/* ---- goals/cards timeline: two columns, home left / away right ---- */
.timeline{display:grid;grid-template-columns:1fr 1fr;row-gap:7px;column-gap:14px}
.ev{display:flex;align-items:baseline;gap:8px;font-size:13.5px;color:var(--gray-l);min-width:0}
.ev.home{grid-column:1;justify-content:flex-start;text-align:left}
.ev.away{grid-column:2;flex-direction:row-reverse;justify-content:flex-start;text-align:right}
.ev .ev-min{font-family:'Oswald',sans-serif;font-size:12px;color:var(--gray);flex:0 0 auto;min-width:32px}
.ev.away .ev-min{text-align:right}
.ev .ev-ico{flex:0 0 auto}
.ev .ev-player{color:var(--white);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev .ev-extra{color:var(--gray);font-size:12px}
.ev.owngoal .ev-ico,.ev.penmiss .ev-ico{filter:grayscale(1);opacity:.55}
.ev.owngoal .ev-ico img.emoji,.ev.penmiss .ev-ico img.emoji{filter:grayscale(1)}
.ev .on{color:var(--green);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev .off{color:var(--red);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev.var{color:var(--purple)}
.ev.var .var-tag{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:2px;color:var(--purple);border:1px solid rgba(167,139,250,0.5);border-radius:99px;padding:1px 8px;flex:0 0 auto}
.ev.var .ev-player{color:var(--purple)}
.ev.var .ev-extra{color:var(--purple);opacity:.8}

/* ---- stats: horizontal split bars, home cyan vs away gold ---- */
.stats{display:flex;flex-direction:column;gap:13px}
.stat .stat-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
.stat .stat-label{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:2px;color:var(--gray);text-transform:uppercase;text-align:center;flex:1;min-width:0}
.stat .stat-val{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px;min-width:44px}
.stat .stat-val.home{color:var(--cyan)}
.stat .stat-val.away{color:var(--gold);text-align:right}
.stat-bar{display:flex;gap:2px;height:6px;border-radius:3px;overflow:hidden}
.stat-bar .bar-home{background:var(--cyan);border-radius:3px;min-width:2px}
.stat-bar .bar-away{background:var(--gold);border-radius:3px;min-width:2px}

/* ---- predictions: "WHAT THE AIs CALLED" chips ---- */
.calls{display:flex;flex-wrap:wrap;gap:8px}
.call{display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,monospace;font-size:13px;padding:4px 10px;border-radius:99px;border:1px solid var(--border)}
.call img{width:18px;height:18px;border-radius:4px;background:#fff;object-fit:contain}
.call{color:var(--gray-l);background:rgba(255,255,255,0.02)} /* .ptsnull = this default (unsettled) */
.call .pts{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:1px}
.call.pts3{border-color:rgba(245,166,35,0.65);color:var(--gold);background:rgba(245,166,35,0.08)}
.call.pts2{border-color:var(--border2);color:var(--cyan);background:rgba(0,212,255,0.08)}
.call.pts1{border-color:rgba(136,146,164,0.5);color:var(--gray-l);background:rgba(136,146,164,0.08)}
.call.pts0{border-color:rgba(233,69,96,0.55);color:var(--red);background:rgba(233,69,96,0.07)}

/* ---- branded empty / maintenance state ---- */
.maintenance{
  text-align:center;padding:80px 24px;
  border:1px dashed var(--border);border-radius:16px;
  background:linear-gradient(145deg,var(--navy2),var(--navy3));
}
.maintenance .m-ico{font-size:46px;line-height:1;margin-bottom:16px}
.maintenance .m-ico img.emoji{width:46px;height:46px;margin:0 auto}
.maintenance h2{font-family:'Bebas Neue',sans-serif;font-size:38px;letter-spacing:2px;color:var(--white);margin-bottom:8px}
.maintenance p{color:var(--gray);font-size:14px;max-width:440px;margin:0 auto}

/* ---- "Nearest" with nothing in the ±24h window ---- */
.list-empty{padding:40px;text-align:center;color:var(--gray)}

/* ---- mobile ---- */
@media (max-width:640px){
  .results-note{padding:6px 16px 0}
  .filter-chip{padding:6px 12px}
  .day-head{top:59px}
  .match-row{padding:10px 12px;gap:8px}
  .team{font-size:13px;gap:7px}
  .t-flag{font-size:18px}
  img.team-logo{width:20px;height:20px}
  .mid{min-width:76px;max-width:76px}
  .score{font-size:22px;letter-spacing:1px}
  .kickoff{font-size:13px}
  .match-detail{padding:14px 12px 16px}
  .timeline{column-gap:8px}
  .ev{font-size:12.5px}
  .stat .stat-val{font-size:16px;min-width:36px}
}