:root {
  --lw-bg: #333338;
  --lw-fg: #f5f7fb;
  --lw-muted: #8a93a3;
  --lw-home: #ff6b35;
  --lw-away: #3aa3ff;
  --lw-card: #161b24;
  --lw-border: #232a36;
  --lw-accent: #1f7a3a;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; color: var(--lw-fg); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* Match-page card header. Sits flush against the pitch below it. */
.lw-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px 14px;
  border-radius: 4px 4px 0 0;
  background: var(--lw-bg);
}
/* Cancel the parent's flex gap so the header sits flush against the
   pitch wrap. */
.lw-header + .lw-field-wrap { margin-top: -10px; }

.lw-meta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  color: var(--lw-fg);
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.lw-meta-text { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; opacity: 0.92; }

.lw-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--lw-fg);
}
.lw-scoreline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 4px 0 6px;
}
.lw-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lw-team.lw-home { justify-content: flex-end; }
.lw-team.lw-away { justify-content: flex-start; }
.lw-name { font-weight: 600; font-size: 15px; color: var(--lw-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lw-team-badge {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #fff;
  background: var(--lw-team-color, #475569);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.22), 0 0 0 2px rgba(255,255,255,0.06);
  text-transform: uppercase;
  transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.lw-team.lw-home .lw-team-badge { --lw-team-color: var(--lw-home); }
.lw-team.lw-away .lw-team-badge { --lw-team-color: var(--lw-away); }
/* When this team has the ball, the badge glows its kit colour and lifts. */
.lw-team-badge.lw-on {
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,0.22),
    0 0 0 2px rgba(255,255,255,0.12),
    0 0 14px var(--lw-team-color);
  transform: scale(1.08);
}

.lw-status { text-align: center; min-width: 95px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.lw-score { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: #fde047; display: inline-flex; align-items: baseline; gap: 5px; }
.lw-score-num { min-width: 0.7em; }
.lw-score-sep { color: rgba(255,255,255,0.55); font-weight: 500; }
/* Match clock overlay — pinned to the top centre of the pitch wrap.
   Green numerals on a translucent dark chip so it reads above grass. */
.lw-elapsed {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #4ade80;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  pointer-events: none;
}

/* Stadium-perspective container — the SVG is tilted forward around its
   bottom edge so the far touchline recedes (foreshortened) and the near
   touchline reads larger, matching the bet365 broadcast camera POV.
   `perspective` on the wrapper + `transform: rotateX(...)` on the SVG
   does the work; aspect-ratio is held by `padding-top` so the
   foreshortened SVG doesn't lose vertical space. */
.lw-field-wrap {
  position: relative;
  background: #2f392f;
  border: 1px solid var(--lw-border);
  /* iOS Safari rasterises 3D children of `overflow: hidden` ancestors
     into a flat snapshot. clip-path achieves the same clip without
     forcing the flatten. */
  clip-path: inset(0);
  -webkit-clip-path: inset(0);
  padding: 0;
  perspective: 900px;
  perspective-origin: 50% 100%;
  -webkit-perspective: 900px;
  -webkit-perspective-origin: 50% 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
/* Stadium overlay — flat HTML imgs sitting above the tilted SVG so
   they read as the back wall of the stadium without picking up the
   pitch's perspective. */
.lw-stadium-overlay {
  position: absolute;
  top: -5%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 100%;
  background-image: url(https://i.imgur.com/oFEu9Ba.png);
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
/* iOS Safari/Chrome don't apply 3D transforms to SVG elements, so the
   tilt lives on this HTML wrapper. The SVG inside renders flat and
   inherits the wrapper's projected geometry. */
.lw-field-tilt {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: -13.5%;
  transform: rotateX(67deg) scale(1.13);
  -webkit-transform: rotateX(67deg) scale(1.13);
  transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  /* Force iOS WebKit onto a real 3D compositing layer instead of
     flattening the rotated SVG into a 2D snapshot. */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.lw-field {
  width: 100%;
  display: block;
}
.lw-ball-group {
  transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform;
}
/* The SVG ball circle is now an invisible position anchor; the
   visible ball is rendered as an HTML element outside the SVG so
   it doesn't inherit the pitch's rotateX tilt. */
.lw-ball-flat { opacity: 0; }
.lw-ball-html {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--bs, 14px);
  height: var(--bs, 14px);
  border-radius: 50%;
  background: #fff;
  border: 1px solid #9ca3af;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 4;
  transform: translate(var(--bx, 0px), var(--by, 0px)) translate(-50%, -50%);
  will-change: transform, width, height;
}
/* HTML tooltip — sits OUTSIDE the SVG so it doesn't pick up the pitch
   tilt. Position is driven by --bx / --by custom props (set in JS from
   the ball's getBoundingClientRect). The compound transform anchors
   the bottom of the pill 14px above the ball centre. */
.lw-ball-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
  background: var(--lw-team-color, #202832);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  transform: translate(var(--bx, 0px), var(--by, 0px)) translate(-50%, calc(-100% - 14px));
  transition: opacity 0.25s ease, background 0.25s ease, color 0.25s ease;
  will-change: transform;
}
.lw-ball-tooltip.lw-on { opacity: 1; }
/* Pause overlay (half-time, etc.). The .lw-paused class on
   .lw-field-wrap toggles visibility — when active, the ball, shadow,
   tooltip, and attack wedge are hidden so the dialog reads cleanly. */
.lw-pause-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 22px;
  border-radius: 6px;
  background: rgba(10, 14, 20, 0.82);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 6;
}
.lw-field-wrap.lw-paused .lw-pause-overlay { opacity: 1; }
.lw-field-wrap.lw-paused .lw-ball-html,
.lw-field-wrap.lw-paused .lw-ball-shadow,
.lw-field-wrap.lw-paused .lw-ball-tooltip,
.lw-field-wrap.lw-paused .lw-attack-wedge { opacity: 0 !important; }
.lw-ball-tooltip::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--lw-team-color, #202832);
  transform: translateX(-50%);
  transition: border-top-color 0.25s ease;
}
/* Flat HTML shadow. Outer div handles positioning (translate to the
   ball centre + downward bias) and the squash via scaleY. Inner div
   handles the breathing pulse independently so the pulse can't
   distort the outer translate distances. */
.lw-ball-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--bs, 14px) * 1.4);
  height: calc(var(--bs, 14px) * 1.4);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 3;
  transition: background 0.25s ease;
  transform:
    translate(var(--bx, 0px), var(--by, 0px))
    translate(-50%, -50%)
    translateY(calc(var(--bs, 14px) * 0.45))
    scaleY(0.32);
  will-change: transform;
}
.lw-ball-shadow-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
  animation: lw-shadow-breathe 2.4s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes lw-shadow-breathe {
  0%, 100% { transform: scale(1);   opacity: 0.85; }
  50%      { transform: scale(1.3); opacity: 1; }
}
.lw-ball-player { transition: opacity 0.25s ease; pointer-events: none; }
.lw-ball-player-bg, .lw-ball-player-tip { transition: fill 0.25s ease; }
.lw-attack-wedge { transition: opacity 0.35s ease, fill 0.25s ease; }
.lw-event-banner { font-size: 6px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; pointer-events: none; transition: opacity 0.3s; }

.lw-poss-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--lw-bg);
  border-radius: 0 0 4px 4px;
  text-align: center;
  min-height: 40px;
  transition: background 0.25s ease;
}
.lw-field-wrap + .lw-poss-strip { margin-top: 0; }
.lw-poss-team { color: var(--lw-fg); justify-self: end; font-size: 13px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lw-poss-sep { width: 2px; height: 22px; background: var(--lw-muted); border-radius: 1px; transition: background 0.25s ease, box-shadow 0.25s ease; }
.lw-poss-strip[data-side="home"] .lw-poss-sep,
.lw-poss-strip[data-side="away"] .lw-poss-sep { background: var(--lw-team-color, var(--lw-muted)); box-shadow: 0 0 6px var(--lw-team-color, transparent); }
.lw-poss-event { font-weight: 700; font-size: 14px; justify-self: start; letter-spacing: 0.4px; text-transform: capitalize; transition: color 0.25s ease; }
.lw-poss-strip[data-mode="dangerous_attack"] .lw-poss-event { color: #ffb04a; text-shadow: 0 0 6px rgba(255,176,74,0.5); }
.lw-poss-strip[data-mode="attack"] .lw-poss-event { color: var(--lw-fg); }
.lw-poss-strip[data-mode="in_possession"] .lw-poss-event { color: var(--lw-fg); }

.lw-stats { background: var(--lw-card); border: 1px solid var(--lw-border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.lw-possession-row { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 10px; }
.lw-stat-val { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; }
.lw-stat-val.lw-home { text-align: right; color: var(--lw-home); }
.lw-stat-val.lw-away { text-align: left; color: var(--lw-away); }
.lw-stat-bar { position: relative; height: 6px; background: var(--lw-away); border-radius: 999px; overflow: hidden; }
.lw-bar-home { position: absolute; inset: 0 auto 0 0; background: var(--lw-home); width: 50%; transition: width 0.4s ease; }
.lw-stat-bar .lw-stat-label { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); color: var(--lw-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; }

.lw-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.lw-stat-cell { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; padding: 6px 8px; background: rgba(255,255,255,0.03); border-radius: 6px; font-variant-numeric: tabular-nums; }
.lw-stat-cell > span:first-child { color: var(--lw-home); text-align: right; font-weight: 600; }
.lw-stat-cell > span:last-child { color: var(--lw-away); text-align: left; font-weight: 600; }
.lw-stat-cell > label { color: var(--lw-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }

.lw-timeline { background: var(--lw-card); border: 1px solid var(--lw-border); border-radius: 10px; padding: 8px 10px; max-height: 180px; overflow: auto; }
.lw-timeline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 4px; }
.lw-timeline-item { display: grid; grid-template-columns: 50px 1fr; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 4px; font-size: 12px; }
.lw-timeline-item.lw-side-home { background: linear-gradient(90deg, rgba(255,107,53,0.18), transparent 60%); }
.lw-timeline-item.lw-side-away { background: linear-gradient(270deg, rgba(58,163,255,0.18), transparent 60%); }
.lw-timeline-clock { color: var(--lw-muted); font-variant-numeric: tabular-nums; }
.lw-timeline-text { display: flex; align-items: center; gap: 6px; }
.lw-timeline-icon { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px; }
.lw-timeline-item.lw-flash { animation: lw-flash 0.6s ease; }
@keyframes lw-flash { 0% { background-color: rgba(255,255,255,0.25); } 100% { background-color: transparent; } }

/* Hidden for now — markup retained so it can be re-enabled by
   removing this rule. Placed AFTER the .lw-stats / .lw-timeline
   block above so the cascade lets it win. */
.lw-stats, .lw-timeline { display: none; }

.lw-footer { display: flex; justify-content: space-between; align-items: center; color: var(--lw-muted); font-size: 11px; padding: 0 4px; }
.lw-conn { display: flex; align-items: center; gap: 6px; }
.lw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6b7180; transition: background 0.3s; }
.lw-dot.lw-up { background: #4ade80; box-shadow: 0 0 6px #4ade80aa; }
.lw-dot.lw-down { background: #ef4444; }

@media (max-width: 480px) {
  .lw-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .lw-name {
    font-size: 13px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
  }
  .lw-team.lw-home .lw-name { text-align: end; }
  .lw-score { font-size: 24px; }
}