:root{
  --eventpage-bg:#f4f6fb;
  --eventpage-card:#ffffff;
  --eventpage-border:#e5e7eb;
  --eventpage-shadow:0 6px 16px rgba(15,23,42,.08);

  --eventpage-text:#0f172a;
  --eventpage-muted:#64748b;

  --eventpage-accent:#4f46e5;
  --eventpage-green:#22c55e;
  --eventpage-yellow:#f59e0b;
  --eventpage-red:#ef4444;

  --eventpage-radius:12px;
}

/* ===== ROW ===== */
.eps-row{
  display:grid;
  grid-template-columns:1fr 56px 1fr;
  align-items:stretch; 
  margin:8px;
  border-bottom: 1px dashed var(--eventpage-border);
}

/* ===== CENTER ===== */
.eps-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}

/* ===== TIME ===== */
.eps-time{
  background:#f8fafc;           
  color:#0f172a;
  font-weight:900;
  font-size:15px;
  letter-spacing:.3px;
  padding:6px 12px;
  border-radius:10px;
  border:1px solid #e2e8f0;
  box-shadow:
    0 2px 6px rgba(15,23,42,.08);
  z-index:2;
}

/* ===== LINE ===== */
.eps-line{
  width:3px;
  flex:1;
  background:linear-gradient(
    to bottom,
    #e5e7eb,
    #cbd5e1,
    #e5e7eb
  );
  margin:6px 0 0;
  border-radius:3px;
}

/* ===== SIDES ===== */
.eps-side{
  display:flex;
  align-items:center;
  white-space:nowrap;
  font-size:16px;
  line-height:1.25;
}

.eps-side.left{
  justify-content:flex-end;
  padding-right:8px;
}

.eps-side.right{
  justify-content:flex-start;
  padding-left:8px;
}

/* ===== EVENT LINE ===== */
.eps-event-line{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ===== ICON + SCORE (NEAR TIME) ===== */
.eps-time-pack{
  display:flex;
  align-items:center;
  gap:6px;
}

.eps-icon{
  width:26px;
  height:26px;
}

/* ===== TEXT ===== */
.eps-score{
  font-weight:900;
  font-size:16px;
}

.eps-name{

}

.eps-assist{
  font-size:14px;
  font-weight:600;
  color:#64748b;
}
.eps-player{
  color:inherit;
  text-decoration:none;
  color:#0e5faf;
}

.eps-player:hover{
  color:#c91414;
}

.eps-assist-link{
  font-size:14px;
  font-weight:600;
  color:#64748b;
}

/* ===== SUB ARROWS ===== */
.eps-arrow{
  font-size:18px;
  font-weight:900;
}

.eps-arrow.out{ color:#ef4444; }
.eps-arrow.in{ color:#22c55e; }
/* ===== PERIOD ===== */
.eps-period{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:14px 0 10px;
}

.eps-period-title{
  font-size:13px;
  font-weight:800;
  color:#475569;
  background:#f1f5f9;
  padding:5px 14px;
  border-radius:999px;
  border:1px solid #e2e8f0;
  box-shadow:0 1px 3px rgba(15,23,42,.06);
  white-space:nowrap;
}
/* контейнер */
.basket-quarters {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
}

/* кубик */
.basket-quarter {
  background: linear-gradient(180deg, #f6f7f9, #e9edf2);
  border-radius: 14px;
  padding: 10px 12px 12px;
  min-width: 68px;
  text-align: center;

  box-shadow:
    0 6px 18px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.8);

  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Q1 / Q2 / Q3 / Q4 */
.q-title {
  align-self: center;

  min-width: 26px;
  height: 22px;
  padding: 0 6px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;

  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #2563eb);

  border-radius: 6px;

  box-shadow:
    0 2px 6px rgba(37,99,235,.45),
    inset 0 1px 0 rgba(255,255,255,.25);
}


/* счёт */
.q-score {
  background: linear-gradient(180deg, #ffffff, #f1f3f6);
  border-radius: 10px;

  padding: 6px 8px;

  font-size: 18px;
  font-weight: 800;
  color: #111827;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.08);
}


.q-score .sep {
  opacity: .35;
  font-weight: 600;
}



@media (max-width: 768px){
  .basket-quarter {
    min-width: 54px;
    padding: 8px 10px;
    border-radius: 9px;
  }

  .q-score {
    font-size: 16px;
  }

  .q-title {
    font-size: 10px;
  }
  .eps-row{
    grid-template-columns:170px 40px 170px;
    margin:4px 0;
    padding:4px 0;
  }

  .eps-time{
    font-size:12px;
    padding:3px 7px;
    border-radius:8px;
  }

  .eps-line{
    width:2px;
    margin-top:4px;
  }

  .eps-side{
    font-size:13px;
    line-height:1.15;
  }

  .eps-side.left{ padding-right:4px; }
  .eps-side.right{ padding-left:4px; }

  .eps-event-line{
    display:flex;
    flex-wrap:nowrap;
    gap:4px 6px;
    max-width:100%;
  }

  .eps-icon{
    width:18px;
    height:18px;
    flex-shrink:0;
  }

  .eps-score{ font-size:13px; }

  .eps-name{
    font-size:13px;
    font-weight:700;
    max-width:100px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .eps-assist,
  .eps-assist-link{
    font-size:11px;
  }

  .eps-arrow{
    font-size:14px;
    font-weight:900;
  }

 
}



.eventpage-layout {display:grid; grid-template-columns:1fr 360px; gap:16px; margin-bottom:60px;}
@media(max-width:900px) {
.eventpage-layout {grid-template-columns:1fr;}
}
/* ================= CARD ================= */

.eventpage-card {background:var(--eventpage-card); border-radius:var(--eventpage-radius);}
/* ================= EVENTPAGE SKELETON ================= */

@keyframes eventpage-skel-pulse {0% { opacity: .55; } 50% { opacity: .9; } 100% { opacity: .55; }}
.eventpage-skeleton {background: #efe8d8; animation: eventpage-skel-pulse 1.2s ease-in-out infinite;}
/* ---------- TOPBAR ---------- */

.eventpage-topbar {display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--eventpage-border);}
.eventpage-topbar .eventpage-pill {display: flex; align-items: center; min-height: 28px;}
.eventpage-topbar .eventpage-skeleton {height: 28px; border-radius: 8px;}
/* ---------- HERO ---------- */

.eventpage-hero {padding: 16px;}
.eventpage-hero-box {border-radius: 12px; padding: 36px 24px; background: #0f172a;}
.eventpage-hero-grid {display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;}
/* team column */
.eventpage-team-col {display: flex; flex-direction: column; align-items: center; gap: 12px;}
/* logo */
.eventpage-team-logo-skel {width: 80px; height: 80px; border-radius: 12px;}
/* team name */
.eventpage-team-name-skel {width: 170px; height: 24px; border-radius: 10px;}
/* score */
.eventpage-scorebox {display: flex; flex-direction: column; align-items: center; gap: 10px;}
.eventpage-matchtime-skel {width: 190px; height: 34px; border-radius: 10px;}
.eventpage-score {display: flex; align-items: center; gap: 10px;}
.eventpage-score-num-skel {width: 80px; height: 80px; border-radius: 10px;}
.eventpage-score-sep-skel {width: 24px; height: 50px; border-radius: 8px;}
/* mobile */
@media (max-width: 700px) {.eventpage-hero-grid { grid-template-columns: 1fr; gap: 20px; }}

/* =========================
   EVENTPAGE NAV (FLAT)
========================= */

.eventpage-nav {
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--eventpage-border);
}

/* кнопка */
.eventpage-nav-btn {
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--eventpage-muted);
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}

/* иконка */
.eventpage-nav-btn i {
  font-size:13px;
}

/* hover — аккуратно */
.eventpage-nav-btn:hover {
  color:#171733;
  border-color:#171733;
  background:transparent;
}

/* active — без говна */
.eventpage-nav-btn.active {
  color:#ffffff;
  background:#171733;
}




/* ================= TOP BAR ================= */

.eventpage-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--eventpage-border);
}

.eventpage-left {
  justify-self: start;
}

.eventpage-center {
  justify-self: center;
}

.eventpage-right {
  justify-self: end;
}
.eventpage-pill {display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:8px; font-size:13px; font-weight:700; background:#f1f5f9; text-transform:uppercase;}
.eventpage-pill-status-live {background:#fb6565; color:#ffffff;}
.eventpage-pill-status-finished {background:#f1f5f9;color:#334155;}
.eventpage-pill-status-scheduled {background:#eef2ff;color:#3730a3;}

.eventpage-pill-league {justify-self:center;background:#eff2f5;color: rgba(0, 0, 0, .9);}
.eventpage-pill-logo-liga {max-height: 22px;}
.eventpage-pill-date {background:#eef2ff; color:#3730a3;}
/* ================= HERO ================= */

.eventpage-hero {padding:16px;}
.eventpage-hero-box {
  border-radius: 12px;
  padding: 36px 24px;
  background: #1e7f43;
  color: #fff;
}
.eventpage-hero-box.football {
  background: url("/public/images/bg_ft.webp")
              center / cover no-repeat;
}
.eventpage-hero-box.hockey {
  background: url("/public//images/bg_hc.webp")
              center / cover no-repeat;
}

.eventpage-hero-box.tennis {
  background: url("/public//images/bg_tennis_thr.webp")
              center / cover no-repeat;
}
.eventpage-hero-box.basketball {
  background:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
    url("/public/images/bg_basket.webp") center / cover no-repeat;
}
.eventpage-hero-box.american-football {
  background: 
     linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
  url("/public//images/bg_amball.webp")
              center / cover no-repeat;
}

.eventpage-hero-box.baseball {
  background: 
     linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
  url("/public//images/bg_baseball.webp")
              center / cover no-repeat;
}
.eventpage-hero-box.handball {
  background: 
       linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
  url("/public//images/bg_handball.webp")
              center / cover no-repeat;
}
.eventpage-hero-box.rugby-league,
.eventpage-hero-box.rugby {
  background: 
       linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
  url("/public//images/bg_rugby.webp")
              center / cover no-repeat;
}
.eventpage-hero-box.floorball {
  background: 
       linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
  url("/public//images/bg_floorball.webp")
              center / cover no-repeat;
}
.eventpage-hero-box.bandy {
  background: 
       linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
  url("/public//images/bg_bandy.webp")
              center / cover no-repeat;
}
.eventpage-hero-box.futsal {
  background: 
       linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
  url("/public//images/bg_futsal.webp")
              center / cover no-repeat;
}
.eventpage-hero-box.volleyball {
  background: 
       linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
  url("/public//images/bg_volleyball.webp")
              center / cover no-repeat;
}
.eventpage-hero-box.cricket {
  background: 
       linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
  url("/public//images/bg_cricket.webp")
              center / cover no-repeat;
}
.eventpage-hero-box.darts {
  background: 
  url("/public//images/bg_darts.webp")
              center / cover no-repeat;
}

.eventpage-hero-box.snooker {
  background: 
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
  url("/public//images/bg_snooker.webp")
              center / cover no-repeat;
}
.eventpage-hero-box.beachvolleyball {
  background: 
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
  url("/public//images/bg_beachvolleyball.webp")
              center / cover no-repeat;
}
.eventpage-hero-box.aussie-rules {
  background: 
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
  url("/public//images/bg_aussie-rules.webp")
              center / cover no-repeat;
}
.eventpage-hero-box.badminton {
  background: 
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
  url("/public//images/bg_badminton.webp")
              center / cover no-repeat;
}
.eventpage-hero-box.water-polo {
  background: 
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
  url("/public//images/bg_water-polo.webp")
              center / cover no-repeat;
}
.eventpage-hero-box.field-hockey {
  background: 
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
  url("/public//images/bg_field-hockey.webp")
              center / cover no-repeat;
}
.eventpage-hero-box.table-tennis {
  background:
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
    url("/public/images/bg_table-tennis2.webp")
      center bottom / cover no-repeat;
}
.eventpage-hero-box.beachsoccer {
  background:
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
    url("/public/images/bg_beachsoccer.webp")
      center bottom / cover no-repeat;
}
.eventpage-hero-box.netball {
  background:
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
    url("/public/images/bg_netball.webp")
      center bottom / cover no-repeat;
}
.eventpage-hero-box.pesapallo {
  background:
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
    url("/public/images/bg_pesapallo2.webp")
      center bottom / cover no-repeat;
}
.eventpage-hero-box.esports {
  background:
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
    url("/public/images/bg_esports.webp")
      center bottom / cover no-repeat;
}
.eventpage-hero-grid {display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;}
/* ===== TEAM COLUMN ===== */

.eventpage-team-col {display:flex; flex-direction:column; align-items:center; gap:12px;}
.eventpage-logo {
  display: flex;
  align-items: center;
  gap: 6px;
     padding: 8px 16px;
    border-radius: 10px;
    background: rgba(0,0,0,.55);
}
.eventpage-logo img {width:80px; height:auto;}
.eventpage-team-name-link {font-size:22px; font-weight:800; text-transform:uppercase; color:#ffffff; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 200px;
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(0,0,0,.55);}
    .eventpage-team-name-link.twonames{font-size:16px;}
.eventpage-team-name-link:hover {text-decoration:underline;}
/* ===== SCORE ===== */

.eventpage-scorebox {display:flex; flex-direction:column; align-items:center; gap:5px;}
.eventpage-matchtime {font-size:21px; font-weight:700; padding:6px 12px; border-radius:10px; background:rgba(0,0,0,.45); letter-spacing:.5px;}
.eventpage-score {display:flex; align-items:center; }
.eventpage-score-num {
    gap:15px;
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(0,0,0,.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    font-weight: 800;
    line-height: 1;
    min-width: 80px; 
}
.eventpage-score-sub {
    padding: 6px 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    font-size: 18px;
    font-weight: 600;
    line-height: 1;

    color: #e2e6ee;

    background: rgba(0,0,0,.55);
    border-radius: 8px;

    white-space: nowrap;
}

.tennis-service {
  width: 28px;            
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;  
    margin: 0 10px;
}
.tennis-service.is-active {
  visibility: visible;
}
.baseball-service img,
.tennis-service img {
  width: 30px;
  height: 30px;
}
.tennis-service.is-active img {
  animation: tennis-serve-pulse 1.8s infinite ease-in-out;
}

@keyframes tennis-serve-pulse {
  0% {
    filter: drop-shadow(0 0 3px rgba(255,235,59,.45));
    transform: scale(1);
  }
  50% {
    filter:
      drop-shadow(0 0 6px rgba(255,235,59,.7))
      drop-shadow(0 0 10px rgba(255,235,59,.5));
    transform: scale(1.035);
  }
  100% {
    filter: drop-shadow(0 0 3px rgba(255,235,59,.45));
    transform: scale(1);
  }
}

.eventpage-score-sep {font-size:50px; font-weight:900; opacity:.9;}
/* ===== MOBILE ===== */

@media(max-width:700px) {.eventpage-hero-grid{ grid-template-columns:1fr; gap:20px; }}
/* ================= SECTIONS ================= */

.eventpage-section {padding:16px; border-top:1px solid var(--eventpage-border);}
.eventpage-section-title {font-size:15px; font-weight:900; text-transform:uppercase; margin-bottom:10px; color:#334155;}
/* ================= TIMELINE WITH TIME ================= */

.eventpage-timeline {position:relative; padding:28px 0 34px; /* место под иконки и время */}
/* ОСНОВА */
.eventpage-timeline-track {position:relative; height:8px;  background:#e5e7eb; border-radius:999px;}
.eventpage-timeline-fill {position:absolute; left:0; top:0; height:100%; background:#a5df9f;}
.eventpage-timeline-time {position:absolute; top:100%; margin-top:8px; font-size:11px; font-weight:700; color:var(--eventpage-muted); white-space:nowrap;}
.eventpage-timeline-time-start {left:0; transform:translateX(-2px);}
.eventpage-timeline-time-half {left:50%; transform:translateX(-50%);}
.eventpage-timeline-time-end {right:0; transform:translateX(2px);}

/* событие = точка на оси */
.eventpage-timeline-event {
  position:absolute;
  top:50%;
  width:26px;           /* шаг коллизий */
  height:0;
  /* left:% ты ставишь инлайном */
  /* сдвиг: сначала центрируем (иначе событие "якорится" левым краем),
     потом раздвигаем рядом по --shift */
  transform:
    translateX(-50%)
    translateX(calc(var(--shift, 0) * 26px));
  z-index:2; /* чтобы поверх трека */
}

/* палка */
.eventpage-timeline-stick {position:absolute; left:50%; transform:translateX(-50%); width:2px; background:#cbd5e1;}

/* иконка */
.eventpage-timeline-icon {position:absolute; left:50%; transform:translateX(-50%); width:22px; height:22px; border-radius:50%; background:#fff; border:1px solid var(--eventpage-border); display:grid; place-items:center; font-size:12px; box-shadow:0 2px 6px rgba(15,23,42,.12);}
.eventpage-timeline-icon img{
  display:block;
}

/* палка начинается РОВНО от линии */
.eventpage-timeline-home .eventpage-timeline-stick {bottom:4px; /* 8px линия / 2 */ height:12px; /* КОРОТКАЯ */}
/* иконка сразу над палкой */
.eventpage-timeline-home .eventpage-timeline-icon {bottom:18px; /* 12 + 6 */}

/* ===== AWAY (DOWN) ===== */
.eventpage-timeline-away .eventpage-timeline-stick {top:4px; /* 8px линия / 2 */ height:12px;}
.eventpage-timeline-away .eventpage-timeline-icon {top:18px;}

/* типы */
.eventpage-timeline-goal .eventpage-timeline-icon img {  width:18px;}
.eventpage-timeline-card .eventpage-timeline-icon img {  width:15px;}
.eventpage-timeline-red  .eventpage-timeline-icon img {  width:15px;}
.eventpage-timeline-sub  .eventpage-timeline-icon img {  width:15px;}

.eventpage-timeline-minute{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  font-size:10px;
  font-weight:800;
  color:#475569;
  background:#fff;
  padding:2px 6px;
  border-radius:6px;
  border:1px solid #e5e7eb;
  z-index:3;
  pointer-events:none;
}
.eventpage-timeline-stick{
  z-index:1;
}
.eventpage-timeline-icon {
  transform: translateX(-50%); 
}

/* ================= COMMENTARY ================= */

.eventpage-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;

    max-height: 300px;     
    overflow-y: auto;      
    overflow-x: hidden;   
}

/* ОСТАЛЬНОЕ — БЕЗ ИЗМЕНЕНИЙ */
.eventpage-feed-row {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--eventpage-border);
    background: #fafafa;
}

.eventpage-minute {
    font-weight: 800;
    color: var(--eventpage-accent);
}

/* ================= TWO COLUMNS ================= */

.eventpage-two {display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:800px) {
.eventpage-two {grid-template-columns:1fr;}
}
/* ================= PANEL ================= */

.eventpage-panel {border:1px solid var(--eventpage-border); border-radius:12px; overflow:hidden;}
.eventpage-panel-head {padding:10px 12px; background:#f8fafc; font-size:13px; font-weight:900;}
.eventpage-panel-body {padding:10px 12px;}
.eventpage-player,
.eventpage-result {display:flex; align-items:center; justify-content:space-between; padding:8px; border-radius:8px; border:1px solid var(--eventpage-border); background:#fff; margin-bottom:8px;}
.eventpage-number {width:32px; height:32px; border-radius:8px; background:var(--eventpage-accent); color:#fff; display:grid; place-items:center; font-weight:900;}
/* ===============================
   LINEUPS GRID
================================ */
.eventpage-lineups {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width:800px) {
  .eventpage-lineups {grid-template-columns:1fr;}
}

/* ===============================
   LINEUP CARD
================================ */
.eventpage-lineup {
  border:1px solid var(--eventpage-border);
  border-radius:10px;
  background:#ffffff;
  overflow:hidden;
}

/* ===============================
   HEADER
================================ */
.eventpage-lineup-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 10px;
  background: #e2e6ee;
  color: #64748b;

}

.eventpage-lineup-team {
  font-weight:800;
  font-size:12px;
}

.eventpage-lineup-formation {
  font-size:11px;
  font-weight:700;
  color:#64748b;
}

/* ===============================
   LIST
================================ */
.eventpage-lineup-list {
  display:flex;
  flex-direction:column;
}

/* ===============================
   LINE GROUP
================================ */
.eventpage-lineup-line {
  padding:2px 0;
}

.eventpage-lineup-line-title {
  padding:2px 10px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#475569;
  background:#f8fafc;
  border-top:1px solid var(--eventpage-border);
}

/* ===============================
   PLAYER ROW
================================ */
.eventpage-lineup-player {
  display:grid;
  grid-template-columns:16px 22px 1fr;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  font-size:12px;
  text-decoration:none;
  border-bottom:1px dashed var(--eventpage-border);
}

.eventpage-lineup-player:last-child {
  border-bottom:none;
}

.eventpage-lineup-player:hover {
  background:#f1f5f9;
}

/* ===============================
   NUMBER
================================ */
.eventpage-lineup-num {
  width:16px;
  height:16px;
  border-radius:3px;
  border:1px solid #64748b;
  font-size:9px;
  font-weight:800;
  color:#64748b;
  display:grid;
  place-items:center;
}

/* ===============================
   PHOTO
================================ */
.eventpage-lineup-photo {
  width:20px;
  height:20px;
  border-radius:50%;
  object-fit:cover;
  background:#e5e7eb;
  border:1px solid #e2e8f0;
}

/* ===============================
   NAME
================================ */
.eventpage-lineup-name {
  font-weight:600;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===============================
   COACH
================================ */
.eventpage-lineup-coach {
  padding:5px 10px;
  font-size:11px;
  font-weight:600;
  color:#64748b;
  background:#fafafa;
  border-top:1px solid var(--eventpage-border);
}

/* =========================
   LAST GAMES (FIX)
========================= */

.eventpage-lastgames {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 14px;
}
.eventpage-lastgames-lich {
  display: grid;
  grid-template-columns: 1fr; 
  gap: 14px;
}
@media (max-width:800px) {
  .eventpage-lastgames {
    grid-template-columns: 1fr;
  }
}



@media(max-width:800px) {
.eventpage-lastgames {grid-template-columns:1fr;}
}
.eventpage-lastgames-team {border:1px solid var(--eventpage-border); border-radius:12px; background:#ffffff; overflow:hidden;}
.eventpage-lastgames-head {padding: 6px 10px; background:#e2e6ee; border-bottom:1px solid var(--eventpage-border); font-weight:800; font-size:12px; color:#64748b;}
.eventpage-lastgames-list {display:flex; flex-direction:column;}
/* ===== LAST GAME ROW (TIGHT ALIGNMENT) ===== */

.eventpage-lastgame {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 10px;
  padding:8px 10px; font-size:13px; border-bottom:1px dashed var(--eventpage-border);
}
.eventpage-lastgame-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

.eventpage-lastgame-lich {display: grid; grid-template-columns: 100px 1fr 100px; align-items: center; gap:10px; padding:8px 10px; font-size:13px; border-bottom:1px dashed var(--eventpage-border);}
.eventpage-lastgame-time {font-size:10px; color:var(--eventpage-muted); white-space:nowrap;}
.eventpage-lastgame-time-lich {font-weight: 600;font-size:12px; color:var(--eventpage-muted); white-space:nowrap;}
/* TEAM BLOCK */
.eventpage-lastgame-side {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100px;
}

.eventpage-lastgame-side-left {
  justify-content: flex-end;
  text-align: right;
}

.eventpage-lastgame-side-right {
  justify-content: flex-start;
  text-align: left;
}

/* TEAM NAME */
.eventpage-lastgame-team {font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px;}
.eventpage-lastgame-team-lich {font-weight:600; white-space:nowrap;}

/* LOGO */
.eventpage-lastgame-logo {width:18px; height:18px; flex-shrink:0;}
/* SCORE */

.eventpage-lastgame-scorebox {display:flex; align-items:center; gap:3px; margin:0 6px;}
.eventpage-lastgame-sep {font-weight:900; color:var(--eventpage-muted);}
/* h2h meta */
.eventpage-lastgame-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-right:auto;
  font-size:12px;
  color:#64748b;
}

.eventpage-lastgame-flag{
  width:18px;
  height:12px;;
}

.eventpage-lastgame-tournament{
  white-space:nowrap;
}

/* =========================
   SCORE PILLS
========================= */

.eventpage-lastgame-score {padding: 0 4px; border-radius:4px; display:grid; place-items:center; font-weight:800; font-size:15px; color:#fff;}
.eventpage-score-win  { background:#58c742; }  
.eventpage-score-lose { background:#e82a2a; }  
.eventpage-score-draw { background:#838383; }   
.eventpage-score-lich { background: #e2e6ee; color: #64748b; }   

/* =========================
   STATS — ULTRA COMPACT (FINAL)
========================= */

/* ---------- TABS ---------- */

.eventpage-lineup-tabs,
.eventpage-stat-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.eventpage-lineup-tab,
.eventpage-stat-tabs button {
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid var(--eventpage-border);
  background: #f8fafc;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;

  color: #334155;
  cursor: pointer;

  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease;
}

.eventpage-lineup-tab:hover,
.eventpage-stat-tabs button:hover {
  background: #eef2f7;
}

.eventpage-lineup-tab.active,
.eventpage-stat-tabs button.active {
  background: var(--eventpage-accent);
  border-color: var(--eventpage-accent);
  color: #fff;
}


/* ---------- PANELS ---------- */

.eventpage-stat-panel {display:none;}
.eventpage-stat-panel.active {display:block;}

/* ДВА СТОЛБЦА, ЖЁСТКО */
.eventpage-stat-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:6px;
}

/* ---------- ITEM ---------- */

.eventpage-stat-item {
  border:1px solid var(--eventpage-border);
  border-radius:8px;
  padding:6px 8px;
  background:#fff;

  /* КЛЮЧ */
  width:100%;
  max-width:100%;
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  gap:4px;
}

/* ---------- TITLE ---------- */

.eventpage-stat-title {
  font-size:12px;
  font-weight:900;
  text-align:center;
  color:#334155;
  line-height:1.1;
}

/* ---------- BAR (100% GUARANTEED) ---------- */

.eventpage-stat-bar {
  width:100%;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:#e5e7eb;
}

.bar-home {
  float:left;
  height:100%;
  background:#2563eb;
}

.bar-away {
  float:left;
  height:100%;
  background:#ef4444;
}

.bar-neutral {
  float:left;
  height:100%;
  background:#e5e7eb;
}



/* ---------- VALUES ---------- */

.eventpage-stat-values {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  font-weight:900;
  line-height:1;
  color:#0f172a;
}

/* =========================
   СКЕЛЕТОН
========================= */

@keyframes eventpage-timeline-pulse {0%{opacity:.5} 50%{opacity:.9} 100%{opacity:.5}}
.eventpage-timeline-skel {animation:eventpage-timeline-pulse 1.3s ease-in-out infinite;}
/* section title */
.eventpage-section-title.skel {width:120px; height:16px; background:#efe8d8; border-radius:6px;}
/* main track */
.eventpage-timeline-track.skel {background:#efe8d8;}
/* progress */
.eventpage-timeline-fill.skel {background:#e6dcc6;}
/* event placeholders */
.eventpage-timeline-icon.skel {background:#efe8d8; border:none; box-shadow:none;}
.eventpage-timeline-stick.skel {background:#e6dcc6;}
/* time labels */
.eventpage-timeline-time.skel {width:24px; height:10px; background:#efe8d8; border-radius:4px; color:transparent;}
@keyframes eventpage-feed-pulse {
0% {opacity:.55}
50% {opacity:.9}
100% {opacity:.55}
}
.eventpage-feed-skel {animation:eventpage-feed-pulse 1.3s ease-in-out infinite;}
/* минута */
.eventpage-minute.skel {width:36px; height:14px; background:#efe8d8; border-radius:6px; color:transparent;}
/* текст комментария */
.eventpage-feed-text-skel {height:14px; background:#efe8d8; border-radius:6px;}
/* вариативная ширина строк */
.eventpage-feed-text-skel.w80 {width:80%}
.eventpage-feed-text-skel.w60 {width:60%}
.eventpage-feed-text-skel.w90 {width:90%}
@keyframes eventpage-lineup-pulse {
0% {opacity:.55}
50% {opacity:.9}
100% {opacity:.55}
}
.eventpage-lineup-skel {animation:eventpage-lineup-pulse 1.3s ease-in-out infinite;}
/* header */
.eventpage-lineup-head.skel {background:#efe8d8; color:transparent;}
/* player number */
.eventpage-lineup-num.skel {background:#e6dcc6; color:transparent;}
/* player name */
.eventpage-lineup-name.skel {height:14px; background:#efe8d8; border-radius:6px; color:transparent;}
/* position */
.eventpage-lineup-pos.skel {width:28px; height:10px; background:#efe8d8; border-radius:6px; color:transparent;}
/* coach */
.eventpage-lineup-coach.skel {height:14px; background:#efe8d8; border-radius:6px; color:transparent;}
@keyframes eventpage-lastgames-pulse {
0% {opacity:.55}
50% {opacity:.9}
100% {opacity:.55}
}
.eventpage-lastgames-skel {animation:eventpage-lastgames-pulse 1.3s ease-in-out infinite;}
/* header */
.eventpage-lastgames-head.skel {background:#efe8d8; color:transparent;}
/* time */
.eventpage-lastgame-time.skel {width:44px; height:10px; background:#efe8d8; border-radius:4px; color:transparent;}
/* team name */
.eventpage-lastgame-team.skel {height:12px; background:#efe8d8; border-radius:6px; color:transparent;}
/* logo */
.eventpage-lastgame-logo.skel {width:18px; height:18px; background:#e6dcc6; border-radius:4px;}
/* score */
.eventpage-lastgame-score.skel {width:16px; height:18px; background:#efe8d8; border-radius:4px; color:transparent;}
@media (max-width: 900px) {

  /* ================= LAYOUT ================= */

  .eventpage-layout {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 32px;
  }

  /* ================= TOPBAR ================= */

  .eventpage-topbar {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 10px 12px;
  }

  .eventpage-pill {
    font-size: 8px;
    padding: 5px 10px;
  }

  .eventpage-pill-logo-liga {
    max-height: 18px;
  }

  /* ================= HERO ================= */

  .eventpage-hero {
    padding: 12px;
 
  }

  .eventpage-hero-box {
    padding: 20px 14px;

   
  }

  .eventpage-hero-grid {
    gap: 16px;
  }

  .eventpage-logo img {
    width: 50px;
  }

  .eventpage-team-name-link {
    font-size: 10px;
  }

  /* score */
  .eventpage-score-num {
    min-width: 56px;
    height: 56px;
    font-size: 40px;
  }

  .eventpage-score-sep {
    font-size: 34px;
  }

  .eventpage-matchtime {
    font-size: 14px;
    padding: 4px 10px;
  }

  /* ================= NAV ================= */

  .eventpage-nav {
    padding: 10px 12px;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .eventpage-nav::-webkit-scrollbar {
    display: none;
  }

  .eventpage-nav-btn {
    font-size: 8px;
    padding: 5px 8px;
    white-space: nowrap;
  }

  /* ================= SECTIONS ================= */

  .eventpage-section {
    padding: 12px;
  }

  .eventpage-section-title {
    font-size: 13px;
    margin-bottom: 8px;
  }

  /* ================= TIMELINE ================= */

  .eventpage-timeline {
    padding: 20px 0 28px;
  }

  .eventpage-timeline-time {
    font-size: 10px;
  }

  .eventpage-timeline-icon {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  /* ================= FEED ================= */

  .eventpage-feed {
    max-height: 240px;
    gap: 8px;
  }

  .eventpage-feed-row {
    grid-template-columns: 44px 1fr;
    padding: 8px;
  }

  /* ================= TWO COLS ================= */

  .eventpage-two {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* ================= LINEUPS ================= */

  .eventpage-lineups {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .eventpage-lineup-player {
    font-size: 12px;
    padding: 6px 10px;
  }

  /* ================= LAST GAMES ================= */

  .eventpage-lastgames {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .eventpage-lastgame {
    grid-template-columns:
      40px
      1fr
      52px
      1fr;
    font-size: 12px;
    gap: 8px;
  }

  .eventpage-lastgame-team {
    max-width: 110px;
  }

  /* ================= STATS ================= */

  .eventpage-stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .eventpage-stat-title {
    font-size: 10px;
  }

  .eventpage-stat-values {
    font-size: 10px;
  }

}

.eventpage-hero-grid {
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
  }
  
/* =========================
   EVENTPAGE STANDINGS
========================= */

.eventpage-standing-head,
.eventpage-standing-row{
  display:grid;
  grid-template-columns:40px 1fr 60px 60px 60px 60px;
  padding:10px;
  border-radius:10px;
}
.eventpage-standing-group{
  margin-top:18px;
}
.eventpage-standing-group-title{
  display:flex;
  align-items:center;
  gap:10px;

  margin:8px 0 10px;
  padding:6px 10px;

  font-size:15px;
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;

  color:#0f172a;
  background:#f1f5f9;
  border-left:4px solid #0e5faf;
  border-radius:6px;
}

/* HEAD */
.eventpage-standing-head{
  width:100%;
  margin-bottom:6px;
  background:#f1f5f9;
  font-size:12px;
  font-weight:700;
  color:#475569;
}

/* ячейки */
.eventpage-standing-head > div{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* колонка "Команда" */
.eventpage-standing-head > div:nth-child(2){
  justify-content:flex-start;
  padding-left:6px;
}

/* разделители */
.eventpage-standing-head > div{
  border-right:1px solid #e5e7eb;
}
.eventpage-standing-head > div:last-child{
  border-right:0;
}

/* ROW */
.eventpage-standing-row{
  background:#ffffff;
  font-size:16px;
  transition:background .15s ease;
}
.eventpage-standing-row:hover{
  background:#f8fafc;
}
.eventpage-standing-row > div{
  display:flex;
  align-items:center;
  justify-content:center;
}
.eventpage-standing-row > div:nth-child(2){
  justify-content:flex-start;
  gap:8px;
}

/* team cell */
.eventpage-standing-team{
  display:flex;
  gap:10px;
  color:#0000EE;
  align-items:center;
}
.eventpage-standing-team img{
  width:22px;
  height:22px;
}
.eventpage-standing-link{
  color:#0000EE;
  text-decoration:none;
}
.eventpage-standing-link:hover{
 text-decoration:underline;
}

.eventpage-standing-points{
  font-weight:800;
}

/* rank badge */
.eventpage-rank-badge{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  font-size:13px;
  font-weight:800;
  color:#fff;
  position:relative;
  cursor:default;
}

.eventpage-rank-badge--default{
  background:#e5e7eb;
  color:#6b7280;
}

/* tooltip */
.eventpage-rank-badge[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  top:50%;
  left:calc(100% + 10px);
  transform:translateY(-50%);
  background:#0f172a;
  color:#fff;
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
  z-index:30;
}

.eventpage-rank-badge[data-tooltip]::before{
  content:'';
  position:absolute;
  top:50%;
  left:calc(100% + 4px);
  transform:translateY(-50%);
  border:6px solid transparent;
  border-right-color:#0f172a;
  opacity:0;
  transition:opacity .15s ease;
}

.eventpage-rank-badge[data-tooltip]:hover::after,
.eventpage-rank-badge[data-tooltip]:hover::before{
  opacity:1;
}

.eventpage-standing-row--current{
  background:#ffdbdb;
}

.eventpage-standing-row--current:hover{
  background:#fed5d5;
}
 /* ===== DRAW ===== */

.eventpage-draw {
  display:flex;
  flex-direction:column;
  gap:20px;
}

.eventpage-draw-round-block {
  background:#fff;
  border:1px solid var(--eventpage-border);
  border-radius:12px;
  padding:12px;
}

.eventpage-draw-round-title {
  font-weight:800;
  font-size:14px;
  margin-bottom:8px;
  color:var(--eventpage-text);
}

.eventpage-draw-match {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  padding:6px 0;
  font-size:13px;
}

.eventpage-draw-team {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.eventpage-draw-score {
  font-weight:800;
  min-width:36px;
  text-align:center;
}

/* сыгран */
.eventpage-draw-match--played .eventpage-draw-score {
  color:#0f172a;
}

/* будущий */
.eventpage-draw-match--future {
  opacity:.6;
}

.eventpage-draw-time {
  grid-column:1 / -1;
  font-size:11px;
  color:var(--eventpage-muted);
  margin-left:auto;
}