/* ===== Shared match-detail modal styles =====
   Ported from index.html so other pages (e.g. groups.html) can show the same
   popup. Relies on the host page's theme vars: --card --line --ink --muted
   --accent --accent2 --hl --hl-border. */

/* channel badges (also used in the modal's TV footer) */
.ch{
  font-size:.6rem; font-weight:800; letter-spacing:.4px; color:#fff;
  padding:2px 7px; border-radius:4px; white-space:nowrap;
}
.ch.ch-num{cursor:pointer; transition:filter .15s;}
.ch.ch-num:hover{filter:brightness(1.12);}

/* "Where to watch" channel-number popover */
#chpop{
  display:none; position:fixed; z-index:1400;  /* above the match-detail modal (1300) */
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 32px rgba(16,24,40,.22);
  padding:10px 12px; min-width:220px;
}
#chpop .cp-head{
  display:flex; align-items:center; gap:7px;
  font-size:.78rem; font-weight:800; margin-bottom:8px;
  padding-bottom:6px; border-bottom:1px solid var(--line);
}
#chpop .cp-head .ch{font-size:.58rem;}
#chpop .cp-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-size:.74rem; padding:3px 0; color:var(--ink);
}
#chpop .cp-prov{color:var(--muted); font-weight:600;}
#chpop .cp-numb{
  font-weight:800; font-variant-numeric:tabular-nums;
  background:var(--hl); color:var(--accent); border:1px solid var(--hl-border);
  border-radius:6px; padding:1px 9px; min-width:34px; text-align:center;
}
#chpop .cp-numb.none{
  background:transparent; color:var(--muted); border-color:var(--line); font-weight:600;
}

/* ===== Match-detail modal (click a match) ===== */
#mdOverlay{
  display:none; position:fixed; inset:0; z-index:1300;
  background:rgba(8,16,12,.55); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; padding:16px;
}
#mdOverlay.open{display:flex;}
#mdSheet{
  position:relative; width:min(480px, 100%);
  max-height:calc(100dvh - 32px); overflow-y:auto;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  animation:md-pop .18s ease;
}
@keyframes md-pop{from{opacity:0; transform:translateY(12px) scale(.98);} to{opacity:1; transform:none;}}
#mdContent{ background:var(--card); }
#mdClose{
  position:absolute; top:12px; right:12px; z-index:2;
  width:30px; height:30px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--muted);
  font-size:.9rem; line-height:1;
}
#mdClose:hover{color:var(--ink); border-color:var(--accent);}
.md-stage{
  text-align:center; font-size:.66rem; font-weight:800; letter-spacing:.5px;
  color:#fff; background:var(--accent); padding:8px 12px;
  border-radius:18px 18px 0 0;
}
.md-stage.ko{background:var(--accent2);}
.md-head{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:start;
  gap:8px; padding:20px 16px 12px;
}
.md-team{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;}
.md-team span{font-weight:700; font-size:.86rem;}
a.md-team-link{text-decoration:none; color:inherit; border-radius:10px; padding:4px 6px; transition:background .15s;}
a.md-team-link:hover{background:rgba(14,122,77,.10);}
a.md-team-link:hover span{color:var(--accent); text-decoration:underline;}
html.dark a.md-team-link:hover{background:#173a2a;}
html.dark a.md-team-link:hover span{color:#4ade80;}
.md-flag{
  width:62px; height:42px; object-fit:cover; border-radius:6px;
  border:1px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.md-flag.ph{display:flex; align-items:center; justify-content:center; font-size:1.6rem; background:var(--line);}
.md-score{display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:8px;}
.md-score .num{
  font-size:1.7rem; font-weight:900; letter-spacing:1px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.md-score .vsbig{font-size:1rem; font-weight:800; color:var(--muted); letter-spacing:2px;}
.md-status{
  font-size:.6rem; font-weight:800; letter-spacing:.5px;
  padding:2px 9px; border-radius:99px; white-space:nowrap;
  color:var(--muted); background:var(--hl); border:1px solid var(--line);
}
.md-status.live{color:#dc2626; background:#fee2e2; border-color:#fecaca;}
html.dark .md-status.live{color:#f87171; background:#3b1515; border-color:#5b1d1d;}
.md-pen{font-size:.82rem; font-weight:700; color:var(--accent); white-space:nowrap;}
.md-sub{
  text-align:center; color:var(--muted); font-size:.74rem;
  padding:0 16px 12px; border-bottom:1px solid var(--line);
}
.md-events{padding:12px 16px;}
.md-ev{
  display:grid; grid-template-columns:1fr 52px 1fr; align-items:center;
  gap:8px; padding:5px 0; font-size:.78rem;
}
.md-ev + .md-ev{border-top:1px dashed var(--line);}
.md-ev-l{text-align:right;}
.md-ev-r{text-align:left;}
.md-ev-m{
  text-align:center; font-weight:800; font-size:.66rem; color:var(--muted);
  font-variant-numeric:tabular-nums;
  background:var(--hl); border-radius:99px; padding:2px 0;
}
.md-goal{display:inline-flex; align-items:center; gap:5px; font-weight:600;}
.md-ev-r .md-goal{flex-direction:row-reverse;}
.md-tag{
  font-size:.55rem; font-weight:800; letter-spacing:.3px;
  color:#fff; background:var(--muted); border-radius:4px; padding:1px 4px;
}
.md-subin{color:#16a34a; font-weight:700;}
html.dark .md-subin{color:#4ade80;}
.md-subout{color:var(--muted); font-weight:600;}
.md-noev{text-align:center; color:var(--muted); font-size:.78rem; padding:14px 0;}
.md-cardnote{text-align:center; color:var(--muted); font-size:.64rem; padding:8px 0 2px; opacity:.8;}
/* tabs (Дэлгэрэнгүй / Бүрэлдэхүүн) */
.md-tabs{display:flex; border-bottom:1px solid var(--line);}
.md-tab{
  flex:1; border:none; background:none; cursor:pointer; font-family:inherit;
  font-size:.78rem; font-weight:800; color:var(--muted); padding:11px 8px; position:relative;
  transition:color .15s;
}
.md-tab:hover{color:var(--ink);}
.md-tab.active{color:var(--accent);}
html.dark .md-tab.active{color:#4ade80;}
.md-tab.active::after{
  content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
  width:60%; height:3px; border-radius:3px 3px 0 0; background:currentColor;
}
/* match stats (Статистик) */
.ms-body{padding:14px 16px;}
.ms-row{padding:7px 0;}
.ms-row + .ms-row{border-top:1px dashed var(--line);}
.ms-top{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:10px; margin-bottom:5px;
}
.ms-v{font-weight:800; font-size:.82rem; font-variant-numeric:tabular-nums; min-width:38px;}
.ms-l{text-align:left;}
.ms-r{text-align:right;}
.ms-label{text-align:center; font-size:.7rem; font-weight:700; color:var(--muted);}
.ms-bar{
  display:flex; height:7px; border-radius:99px; overflow:hidden;
  background:var(--hl); gap:2px;
}
.ms-bl{background:var(--accent); border-radius:99px 0 0 99px;}
.ms-br{background:var(--accent2); border-radius:0 99px 99px 0;}
.ms-bl.lead, .ms-br.lead{filter:none;}
.ms-bl:not(.lead), .ms-br:not(.lead){opacity:.4;}
/* pre-match published lineup (shown before kickoff once ESPN releases the XI) */
.md-prelu:empty{display:none;}
.md-prelu-title{
  text-align:center; font-size:.72rem; font-weight:800; color:var(--accent);
  padding:10px 0 0; border-top:1px solid var(--line);
}
html.dark .md-prelu-title{color:#4ade80;}
/* line-ups */
.lu-body{padding:12px;}
.lu-pitch{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 38px, transparent 38px 76px),
    linear-gradient(#0e4a2b, #0b3b22);
}
.lu-half{
  display:flex; flex-direction:column; justify-content:space-between;
  flex:1; min-height:188px; padding:12px 4px; position:relative;
}
.lu-half.top{border-bottom:2px solid rgba(255,255,255,.22);}
.lu-row{display:flex; justify-content:space-around; align-items:center;}
.lu-p{display:flex; flex-direction:column; align-items:center; gap:3px; width:19%;}
.lu-num{
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.76rem; background:#fff; color:#10231a;
  box-shadow:0 2px 5px rgba(0,0,0,.35);
}
.lu-num.g{background:#9fb0a8;}
.lu-name{
  font-size:.58rem; color:#fff; line-height:1.15; text-align:center;
  max-width:70px; text-shadow:0 1px 2px rgba(0,0,0,.8);
}
.lu-form{
  position:absolute; left:8px; font-size:.62rem; font-style:italic; font-weight:700;
  color:rgba(255,255,255,.7);
}
.lu-half.top .lu-form{top:6px;}
.lu-half.bottom .lu-form{bottom:6px;}
.lu-subs{font-size:.66rem; color:var(--muted); padding:8px 4px 0; line-height:1.4;}
.lu-subs b{color:var(--ink);}
.lu-list{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.lu-lt{font-size:.72rem; font-weight:800; margin-bottom:5px; padding-bottom:4px; border-bottom:1px solid var(--line);}
.lu-lt span{color:var(--muted); font-weight:600; font-size:.62rem;}
.lu-li{font-size:.72rem; padding:2px 0;}
.lu-li b{display:inline-block; min-width:20px; color:var(--muted); font-weight:800;}
.md-hl{padding:4px 16px 14px; border-top:1px solid var(--line);}
.md-hl-title{font-size:.72rem; font-weight:800; color:var(--muted); margin:8px 0; text-align:center;}
.md-hl-thumb{
  position:relative; display:block; width:100%; aspect-ratio:16/9; background:#000;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.md-hl-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.md-hl-thumb:hover img{opacity:.82;}
.md-hl-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58px; height:40px; border-radius:10px; background:#e23b2e;
  box-shadow:0 4px 14px rgba(0,0,0,.4); transition:transform .15s, background .15s;
}
.md-hl-play::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-40%,-50%);
  border-style:solid; border-width:8px 0 8px 14px; border-color:transparent transparent transparent #fff;
}
.md-hl-thumb:hover .md-hl-play{transform:translate(-50%,-50%) scale(1.08); background:#ff0033;}
.md-hl-cta{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 10px 7px; font-size:.72rem; font-weight:800; color:#fff;
  text-align:center; background:linear-gradient(transparent, rgba(0,0,0,.7));
}
.md-foot{
  display:flex; flex-wrap:wrap; gap:5px; align-items:center; justify-content:center;
  padding:12px 16px 16px; border-top:1px solid var(--line);
}
.md-foot-label{font-size:.66rem; color:var(--muted); font-weight:700; margin-right:2px;}
/* "Share to story" button (Web Share API on mobile, FB fallback on desktop) */
.md-share{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:calc(100% - 32px); margin:6px 16px 18px;
  padding:13px; border:none; border-radius:12px; cursor:pointer;
  font-family:inherit; font-size:.92rem; font-weight:800; color:#fff;
  background:var(--accent); box-shadow:0 6px 16px -8px rgba(11,107,65,.9);
  transition:transform .12s, opacity .12s;
}
.md-share:hover{transform:translateY(-1px);}
.md-share:active{transform:translateY(0);}
.md-share:disabled{opacity:.6; cursor:default; transform:none;}
.md-share svg{width:18px; height:18px; flex:none;}
.md-panel.hidden{display:none;}