/* =========================================================
   欧超 38-0 · 赛前中心与 2D 比赛实况
   Editorial V3 欧洲足球画报复古美学系统
   ========================================================= */

/* --- 1. 赛前中心报头 (Match Centre Masthead) --- */
.live-shell-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  background: #fffcf7;
  border: 3px double #181512;
  border-radius: 8px;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.live-kicker {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #9e2a2b; /* 头条酒红 */
  text-transform: uppercase;
}

.live-shell-head h2 {
  margin: 2px 0 4px;
  font-size: 24px;
  font-weight: 900;
  color: #181512;
  letter-spacing: -0.02em;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.live-shell-head p {
  margin: 0;
  color: #63584c;
  font-size: 13px;
  font-weight: 500;
}

.live-round-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  background: #f4efe6;
  border: 1px solid #c8bead;
  border-radius: 6px;
  text-align: center;
  min-width: 80px;
}

.live-round-seal span {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #7a6e5d;
  font-weight: 800;
}

.live-round-seal b {
  font-size: 24px;
  line-height: 1.1;
  color: #9e2a2b;
  font-family: "Impact", "Arial Black", sans-serif;
}

.live-round-seal small {
  color: #8c7e6b;
  font-size: 10px;
}

/* --- 2. 赛前操作栏 (Pre-match Actions) --- */
.pre-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.pre-actions .act {
  background: #fffcf7;
  color: #181512;
  border: 1px solid #c8bead;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.04);
  transition: all 0.15s ease;
}

.pre-actions .act:hover {
  background: #efe7d8;
  border-color: #9e2a2b;
  color: #9e2a2b;
}

.pre-actions .act:first-child,
.pre-actions .act#preQuickBtn {
  background: linear-gradient(180deg, #9e2a2b 0%, #781d1e 100%);
  color: #fff;
  border-color: #601415;
  box-shadow: 0 3px 8px rgba(158, 42, 43, 0.3);
}

.pre-actions .act#preQuickBtn:hover {
  background: linear-gradient(180deg, #b33233 0%, #8c2425 100%);
  color: #fff;
}

.pre-actions .act#preStartBtn {
  background: linear-gradient(180deg, #1b4d32 0%, #113622 100%);
  color: #fff;
  border-color: #0a2416;
}
.pre-actions .act#preStartBtn:hover {
  background: linear-gradient(180deg, #246341 0%, #16472d 100%);
  color: #fff;
}

.pre-watch-hint {
  font-size: 12px;
  color: #7a6e5d;
  margin-left: auto;
  font-style: italic;
}

.pre-summary {
  padding: 10px 16px;
  background: #fffcf7;
  border: 1px solid #dcd2c0;
  border-left: 4px solid #1b4d32;
  border-radius: 6px;
  font-size: 13px;
  color: #2c251e;
  margin-bottom: 14px;
}

/* --- 3. 赛前三栏画报卡片 (Pre-match 3-column Grid) --- */
.pre-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.9fr 1fr;
  gap: 12px;
}

.pre-card {
  background: #f6eddc;
  border: 1px solid #dcd2c0;
  border-radius: 8px;
  padding: 14px;
  max-height: 560px;
  overflow-y: auto;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.pre-card h3 {
  margin: 4px 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: #181512;
  border-bottom: 1px dashed #dcd2c0;
  padding-bottom: 6px;
}

/* 即时积分榜 */
.pre-table table {
  width: 100%;
  font-size: 11px;
  border-collapse: collapse;
  color: #2c251e;
}
.pre-table th {
  background: #eae2d3;
  color: #181512;
  font-weight: 800;
  padding: 5px 4px;
  border-bottom: 1px solid #c8bead;
  text-align: center;
}
.pre-table td {
  padding: 5px 4px;
  border-bottom: 1px solid #ede5d7;
  text-align: center;
}
.pre-table tr.me {
  background: rgba(158, 42, 43, 0.08);
  font-weight: 800;
  color: #9e2a2b;
}

/* 最近战报列表 */
.pre-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pre-result {
  display: grid;
  grid-template-columns: 36px 1fr auto 1fr;
  gap: 6px;
  align-items: center;
  padding: 7px 10px;
  background: #fffcf7;
  border: 1px solid #e0d6c4;
  border-radius: 6px;
  font-size: 11px;
  color: #181512;
}
.pre-result .round {
  color: #9e2a2b;
  font-weight: 900;
}
.pre-result .team {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.pre-result .team.home { text-align: right; }
.pre-result .score {
  font-weight: 900;
  color: #181512;
  background: #ede5d7;
  padding: 1px 6px;
  border-radius: 4px;
}
.pre-empty {
  padding: 30px 12px;
  text-align: center;
  color: #8c7e6b;
  font-size: 12px;
}

/* 我的球员数据列表 */
.pre-players {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pre-player {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: #fffcf7;
  border: 1px solid #e0d6c4;
  border-radius: 6px;
  font-size: 11px;
  color: #181512;
}
.pre-player .avwrap {
  width: 30px;
  height: 30px;
  border-radius: 4px;
}
.pre-player .name {
  font-weight: 800;
  color: #181512;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pre-player .meta {
  font-size: 10px;
  color: #7a6e5d;
}
.pre-player .numbers {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #4a4034;
  font-weight: 700;
}

/* --- 4. 2D 比赛实况屏幕 (Live Match Screen) --- */
.live-scoreboard {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(180deg, #1b1916 0%, #0d0c0a 100%);
  border: 2px solid #3d372e;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  color: #fff;
}

.live-team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.live-team-home { justify-content: flex-end; text-align: right; }
.live-team-away { justify-content: flex-start; }
.live-team b {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.live-team-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.live-team-badge .ic { width: 34px; height: 34px; }

.live-score-centre {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 10px;
  align-items: center;
  justify-items: center;
  min-width: 150px;
}
.live-score-centre strong {
  grid-column: 1/-1;
  color: #ffd166;
  font-size: 38px;
  line-height: 1;
  font-family: "Impact", "Arial Black", sans-serif;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(255, 209, 102, 0.4);
}
.live-score-centre span,
.live-score-centre small {
  font-size: 12px;
  font-weight: 700;
}
.live-score-centre span { color: #dcd2c0; justify-self: end; }
.live-score-centre small { color: #ffd166; justify-self: start; }

.live-controls {
  position: absolute;
  right: 14px;
  display: flex;
  gap: 8px;
}
.live-controls button {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.live-controls button:hover {
  background: rgba(255,255,255,0.25);
  border-color: #ffd166;
  color: #ffd166;
}

/* 2D 实况三列舞台 */
.live-stage {
  display: grid;
  grid-template-columns: 200px minmax(480px, 1fr) 200px;
  gap: 12px;
  align-items: start;
}

.live-lineup {
  height: 520px;
  overflow-y: auto;
  padding: 12px;
  background: #f6eddc;
  border: 1px solid #dcd2c0;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.04);
}

.live-lineup h3 {
  margin: 0 0 8px;
  color: #9e2a2b;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  border-bottom: 1px dashed #dcd2c0;
  padding-bottom: 4px;
}

.live-lineup-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 5px 4px;
  border-bottom: 1px solid #ede5d7;
  font-size: 11px;
  color: #181512;
}
.live-lineup-row .num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: #eae2d3;
  border-radius: 4px;
  color: #181512;
  font-weight: 900;
  font-size: 10px;
}
.live-lineup-row .nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.live-lineup-row .pos {
  color: #7a6e5d;
  font-size: 10px;
  font-weight: 800;
}

/* 2D 俯视球场 */
.live-pitch {
  position: relative;
  height: 520px;
  overflow: hidden;
  background: repeating-linear-gradient(90deg, #134b2f 0, #134b2f 10%, #0e3f26 10%, #0e3f26 20%);
  border: 3px solid #061c10;
  border-radius: 8px;
  isolation: isolate;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.7), 0 8px 24px rgba(0,0,0,0.3);
}

.live-pitch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.35);
  transform: translateX(-50%);
}

.live-pitch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.live-centre-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  transform: translate(-50%, -50%);
}

.live-box {
  position: absolute;
  top: 50%;
  width: 14%;
  height: 58%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  transform: translateY(-50%);
}
.live-box.home { left: -2px; border-left: 0; border-radius: 0 4px 4px 0; }
.live-box.away { right: -2px; border-right: 0; border-radius: 4px 0 0 4px; }

.live-goal {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 22%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-50%);
}
.live-goal.home { left: -2px; border-left: 0; }
.live-goal.away { right: -2px; border-right: 0; }

/* 球员战术棋子与头像 (纯 GPU 硬件加速 60FPS 物理驱动) */
.live-player {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  transform: translate3d(0,0,0) translate(-50%,-50%);
  transition: none;
  will-change:transform;
}

.live-player .portrait {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  transition: transform 0.1s ease-out;
}
.live-player .avwrap {
  width: 38px;
  height: 38px;
  border: 2px solid #73cfff;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0,0,0,0.6);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.live-player.me .avwrap {
  border-color: #ffd166;
  box-shadow: 0 0 0 2px rgba(255,209,102,0.3), 0 3px 10px rgba(0,0,0,0.6);
}

/* 球员瞬时奔跑朝向指针 (Facing Indicator) */
.live-player .facing-pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  margin-left: -22px;
  pointer-events: none;
  border-radius: 50%;
  transform: rotate(var(--facing-deg, 0deg));
  transition: transform 0.08s linear;
  opacity: 0.85;
}
.live-player .facing-pointer::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid #73cfff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.9));
}
.live-player.me .facing-pointer::after {
  border-bottom-color: #ffd166;
}
.live-player .shirt {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0a2c45;
  border: 1px solid #73cfff;
  color: #d9f3ff;
  font-size: 9px;
  font-weight: 900;
}
.live-player.me .shirt {
  background: #4d3b0c;
  border-color: #ffd166;
  color: #ffebad;
}

.live-player .label {
  display: none;
  max-width: 90px;
  padding: 2px 6px;
  background: rgba(0,0,0,0.75);
  border-radius: 4px;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.live-player.carrier {
  z-index: 8;
  filter: drop-shadow(0 0 10px rgba(255,209,102,0.95));
}
.live-player.carrier .label,
.live-player.goal-scorer .label {
  display: block;
}

.live-player.carrier::before {
  content: "";
  position: absolute;
  left: 19px;
  top: -10px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #ffd166;
  transform: translateX(-50%);
}

.live-player.pressing .avwrap { filter: drop-shadow(0 0 8px rgba(255,112,82,0.95)); }
.live-player.marking .avwrap { filter: drop-shadow(0 0 6px rgba(115,207,255,0.75)); }
.live-player.tackling .portrait { animation: liveTackle 0.45s cubic-bezier(.25,1,.5,1); }
.live-player.shooting .portrait { animation: liveKick 0.48s cubic-bezier(.25,1,.5,1); }
.live-player.saving .portrait { animation: liveSave 0.65s cubic-bezier(.16,1,.3,1); }
.live-player.goal-scorer .portrait { animation: liveCelebrate 1.1s cubic-bezier(.16,1,.3,1); }

/* 2.5D 足球立体投影 (Ground Shadow) */
.live-ball-shadow {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  width: 14px;
  height: 8px;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 75%);
  transform: translate3d(0,0,0) translate(-50%,-50%);
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity 0.05s linear;
}

/* 2.5D 足球 (纯 GPU 硬件加速 60FPS 物理驱动) */
.live-ball {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 2px solid #222;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ddd 58%, #777);
  box-shadow: 0 2px 8px rgba(0,0,0,0.7);
  transform: translate3d(0,0,0) translate(-50%,-50%);
  transition: none;
  will-change: transform;
}
.live-ball.cross { box-shadow: 0 0 12px rgba(255,209,102,0.95); }
.live-ball.shot { box-shadow: 0 0 0 3px rgba(255,255,255,0.3), 0 0 18px rgba(255,112,82,0.98); }

.live-pitch.focus-attack {
  box-shadow: inset 0 0 110px rgba(4,12,8,0.82), 0 0 0 2px rgba(255,209,102,0.5);
  transition: box-shadow 0.3s ease;
}

/* 比赛事件流水记录 */
.live-event-log {
  height: 120px;
  overflow-y: auto;
  margin-top: 12px;
  padding: 8px 12px;
  background: #f6eddc;
  border: 1px solid #dcd2c0;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.04);
}
.live-event-row {
  display: grid;
  grid-template-columns: 42px 22px minmax(0, 1fr);
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid #ede5d7;
  font-size: 12px;
  color: #181512;
}
.live-event-row .min { color: #9e2a2b; font-weight: 900; }
.live-event-row.goal { background: rgba(255,209,102,0.25); font-weight: 800; color: #181512; }
.live-event-row.save { color: #0984e3; }
.live-event-row.tackle { color: #d63031; }

.live-goal-flash {
  position: fixed;
  left: 50%;
  top: 40%;
  z-index: 1500;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%,-50%) scale(0.72);
  color: #ffd166;
  font-size: clamp(46px, 9vw, 92px);
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-shadow: 0 0 28px rgba(255,209,102,0.8), 0 4px 16px rgba(0,0,0,0.8);
  transition: opacity 0.2s, transform 0.25s;
}
.live-goal-flash.show {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}

/* 动作高光关键帧系统 (增强戏剧张力与力量感) */
@keyframes liveTackle {
  0% { transform: scale(1) rotate(0deg); }
  40% { transform: translateX(12px) translateY(4px) rotate(14deg) scale(1.08); }
  75% { transform: translateX(8px) translateY(2px) rotate(6deg) scale(1.03); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes liveKick {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(0.95) rotate(-10deg) translateX(-4px); } /* 蓄力回拉 */
  55% { transform: scale(1.22) rotate(16deg) translateX(8px); } /* 爆发击球 */
  85% { transform: scale(1.05) rotate(4deg) translateX(2px); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes liveSave {
  0% { transform: scale(1) translateY(0) rotate(0deg); }
  25% { transform: scale(1.1) translateY(-6px) rotate(-8deg); }
  50% { transform: scale(1.26) translateY(-14px) translateX(6px) rotate(22deg); } /* 飞身舒展鱼跃扑救 */
  80% { transform: scale(1.1) translateY(-4px) rotate(8deg); }
  100% { transform: scale(1) translateY(0) rotate(0deg); }
}

@keyframes liveCelebrate {
  0% { transform: scale(1) translateY(0); }
  20% { transform: scale(1.25) translateY(-18px) rotate(-6deg); } /* 跃起欢呼 */
  45% { transform: scale(1.15) translateY(6px) rotate(12deg); } /* 落地滑跪 */
  70% { transform: scale(1.2) translateY(-8px) rotate(4deg); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes liveSpin { to { filter: brightness(1.35) saturate(1.25); } }

/* 响应式适配 */
@media (max-width:1050px){
  .pre-grid{grid-template-columns:1fr 1fr}
  .pre-card:first-child{grid-column:1/-1}
  .live-scoreboard{padding-right:20px}
  .live-controls{position:static;grid-column:1/-1;justify-content:center}
  .live-stage{grid-template-columns:1fr}
  .live-lineup{display:none}
  .live-pitch{height:min(66vh,520px)}
}

@media (max-width:640px),(max-width:900px) and (max-height:640px){
  .live-shell-head{padding:12px 14px}
  .live-shell-head h2{font-size:20px}
  .live-round-seal{min-width:70px}
  .pre-actions{display:grid;grid-template-columns:1fr 1fr}
  .pre-actions .act{min-height:44px}
  .pre-watch-hint{grid-column:1/-1;margin-left:0}
  .pre-grid{grid-template-columns:1fr}
  .pre-card:first-child{grid-column:auto}
  .pre-card{max-height:440px}
  .live-scoreboard{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;padding:10px 8px}
  .live-team{gap:4px}
  .live-team b{font-size:11px}
  .live-team-badge .ic{width:25px;height:25px}
  .live-score-centre{min-width:90px}
  .live-score-centre strong{font-size:28px}
  .live-controls{grid-column:1/-1}
  .live-pitch{height:400px;border-radius:6px}
  .live-player .portrait,.live-player .avwrap{width:30px;height:30px}
  .live-player .portrait{flex-basis:30px}
  .live-player .shirt{width:15px;height:15px;font-size:8px}
  .live-player .label{max-width:68px;font-size:8px}
  .live-event-log{height:100px}
}

@media (prefers-reduced-motion:reduce){
  .live-player,.live-ball,.live-goal-flash{transition:none!important;animation:none!important}
  .live-player .portrait,.live-ball{animation:none!important}
}

/* 关键战赛前头条与对手按钮 */
.pre-match-story[hidden]{display:none}
.pre-match-story{margin:0 0 14px;border:2px solid #181512;box-shadow:5px 6px 0 rgba(29,29,24,.16);background:#fffcf7}
.pre-match-story-card{padding:16px 18px;background:linear-gradient(120deg,#fffaf0,#f1e4c9)}
.pre-match-story-card.is-pending{background:linear-gradient(120deg,#f5efe4,#e7ddc7)}
.pre-match-story-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-bottom:2px solid #181512;padding-bottom:9px}
.pre-match-story-kicker{display:block;color:#9e2a2b;font:900 9px/1 var(--sans);letter-spacing:1.5px}
.pre-match-story-head h3{margin:6px 0 0;color:#181512;font:900 23px/1.15 var(--serif)}
.pre-match-story-tag{flex:0 0 auto;padding:6px 8px;color:#fffaf0;background:#9e2a2b;border:1px solid #601415;font:900 10px/1 var(--serif);white-space:nowrap}
.pre-match-matchup{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:center;margin:14px 0 10px}
.pre-match-team{display:flex;align-items:center;gap:8px;min-width:0;color:#181512}
.pre-match-team.is-home{justify-content:flex-end;text-align:right}
.pre-match-team.is-away{justify-content:flex-start}
.pre-match-team strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 17px/1.1 var(--serif)}
.pre-match-team-side{color:#7a6e5d;font:900 9px/1 var(--sans);letter-spacing:.5px}
.pre-match-team-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px}
.pre-match-team-badge .ic{width:36px;height:36px}
.pre-match-team-fallback{display:grid;place-items:center;width:32px;height:32px;color:#fff;background:#1b4d32;border:2px solid #181512;font:900 9px/1 var(--sans)}
.pre-match-vs{display:grid;justify-items:center;gap:3px;color:#9e2a2b}
.pre-match-vs b{font:900 20px/1 Georgia,serif}
.pre-match-vs small{color:#7a6e5d;font:800 9px/1 var(--sans)}
.pre-match-story-lead{margin:0;color:#2c251e;font:900 14px/1.55 var(--serif)}
.pre-match-story-card ul{display:grid;gap:5px;margin:10px 0 0;padding:0 0 0 19px;color:#63584c;font:700 11px/1.5 var(--serif)}
.pre-match-story-card li::marker{color:#9e2a2b}
.pre-match-story-footer{display:flex;justify-content:space-between;gap:10px;margin-top:12px;padding-top:7px;border-top:1px solid #c8bead;color:#9e2a2b;font:900 9px/1 var(--sans);letter-spacing:.6px}
.pre-match-story-footer em{color:#7a6e5d;font:700 10px/1 var(--serif);font-style:normal;letter-spacing:0}
.pre-actions #preStartBtn{display:flex;align-items:center;gap:8px;min-width:212px;text-align:left}
.pre-watch-opponent-crest{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px}
.pre-watch-opponent-crest .ic{width:27px;height:27px}
.pre-watch-crest-fallback{display:grid;place-items:center;width:24px;height:24px;color:#fff;background:#9e2a2b;border:1px solid #601415;font:900 10px/1 var(--sans)}
.pre-watch-copy{display:grid;gap:3px;min-width:0}
.pre-watch-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.pre-watch-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.78);font-size:10px;font-weight:700}
.pre-actions #preStartBtn.is-key-match{background:linear-gradient(180deg,#9e2a2b 0%,#781d1e 100%);border-color:#601415;box-shadow:0 4px 10px rgba(158,42,43,.32)}
.pre-actions #preStartBtn.is-featured-match{box-shadow:0 3px 9px rgba(27,77,50,.28),inset 0 0 0 1px #ffd166}
@media (max-width:640px),(max-width:900px) and (max-height:640px){
  .pre-match-story-card{padding:12px}
  .pre-match-story-head{gap:8px}
  .pre-match-story-head h3{font-size:18px}
  .pre-match-story-tag{padding:5px 6px;font-size:8px}
  .pre-match-matchup{gap:6px;margin:11px 0 8px}
  .pre-match-team{gap:4px}
  .pre-match-team strong{font-size:12px}
  .pre-match-team-side{font-size:7px}
  .pre-match-team-badge{flex-basis:29px;width:29px;height:29px}
  .pre-match-team-badge .ic{width:27px;height:27px}
  .pre-match-team-fallback{width:25px;height:25px;font-size:7px}
  .pre-match-vs b{font-size:16px}
  .pre-match-vs small{font-size:7px}
  .pre-match-story-lead{font-size:12px}
  .pre-match-story-card ul{font-size:10px}
  .pre-match-story-footer em{font-size:9px}
  .pre-actions #preStartBtn{min-width:0}
  .pre-watch-copy strong{font-size:11px}
  .pre-watch-copy small{font-size:8px}
}