/* ==========================================================================
   match_detail.css
   Extracted from info/templates/info/match_detail.html
   Covers: pitch board, match header, timeline, bench, coach, stats cards,
           match info, player dots, position badges, news tab, comments tab.
   ========================================================================== */

/* ===== SPA tab fade transition ===== */
#mdTabContent {
  transition: opacity 0.16s ease;
  /* Prevent scrollbar layout shift when switching between tabs with
     different content heights (e.g. H2H has scrollbar, News doesn't).
     Ensures the page always needs a scrollbar so it never disappears. */
  min-height: 80vh;
}

/* ===== PITCH BOARD ===== */
.pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: visible;
}

/* ── Pitch loading overlay + icon ── */
.pitch-load-overlay {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  z-index: 5;
  background: #111520;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pitch-load-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  z-index: 6;
  pointer-events: none;
  filter: invert(1) drop-shadow(0 0 10px rgba(233,196,106,0.6))
          drop-shadow(0 0 22px rgba(233,196,106,0.25));
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* After loading: kill filter on the icon so it doesn't create a compositing layer at opacity:0 */
.pitch:not(.pitch--loading):not(.pitch--fading) .pitch-load-icon { filter: none; }
.pitch .pitch-pieces {
  transition: opacity 0.3s ease;
}
.pitch .pitch-board-img {
  transition: opacity 0.3s ease;
}

/* Active loading state — pieces hidden, overlay + icon visible */
.pitch--loading .pitch-load-overlay {
  opacity: 1;
  animation: pitchPulse 1.6s ease-in-out infinite;
  transition: none;  /* no fade-in on initial paint */
}
.pitch--loading .pitch-load-icon {
  opacity: 1;
  animation: pitchIconFloat 2s ease-in-out infinite;
  transition: none;
}
.pitch--loading .pitch-pieces { opacity: 0; transition: none; }
.pitch--loading .pitch-board-img { opacity: 0; transition: none; }

/* Fading state (pill switch exit) */
.pitch--fading .pitch-load-overlay { opacity: 1; }
.pitch--fading .pitch-load-icon {
  opacity: 1;
  animation: pitchIconFloat 2s ease-in-out infinite;
}
.pitch--fading .pitch-pieces { opacity: 0; }
.pitch--fading .pitch-board-img { opacity: 0; }

@keyframes pitchPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.55; }
}
@keyframes pitchIconFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-6px); }
}
/* Board image + background clipped with rounded corners */
.pitch-board-clip {
  position: absolute; inset: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #111520;
  z-index: 0;
}
.pitch-board-img {
  width: 100%; height: 100%;
  object-fit: fill;
  display: block;
  image-rendering: high-quality;
  -webkit-image-rendering: -webkit-optimize-contrast;
}
/* Snap ghost — fade only, no shape morphing */
.pitch-ghost {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  filter: blur(3px);
  background: color-mix(in srgb, var(--hi-accent, #e9c46a) 55%, rgba(255,255,255,0.2));
  border-radius: 4px;
  transition: opacity 0.2s ease;
}
.pitch-ghost.vis {
  opacity: 1;
}
/* Edge lines — solid core along the thin axis, fading outward + tapered ends */
.pitch-ghost.ghost-edge {
  border-radius: 3px;
  -webkit-mask-image:
    linear-gradient(var(--ghost-dir, to bottom),
      transparent, rgba(0,0,0,0.5) 12%, black 25%, black 75%, rgba(0,0,0,0.5) 88%, transparent),
    linear-gradient(var(--ghost-cross, to right),
      transparent, rgba(0,0,0,0.4) 15%, black 35%, black 65%, rgba(0,0,0,0.4) 85%, transparent);
  -webkit-mask-composite: destination-in;
  mask-image:
    linear-gradient(var(--ghost-dir, to bottom),
      transparent, rgba(0,0,0,0.5) 12%, black 25%, black 75%, rgba(0,0,0,0.5) 88%, transparent),
    linear-gradient(var(--ghost-cross, to right),
      transparent, rgba(0,0,0,0.4) 15%, black 35%, black 65%, rgba(0,0,0,0.4) 85%, transparent);
  mask-composite: intersect;
}
/* Piece layer — overflow visible so edge pieces aren't clipped */
.pitch-pieces { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: visible; }
/* Individual piece */
.pitch-piece {
  position: absolute;
  width: 11%; height: 11%;
  cursor: var(--cur-grab, grab);
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  overflow: visible;
  transition: left 0.25s cubic-bezier(0.22,0.68,0.35,1),
              top 0.25s cubic-bezier(0.22,0.68,0.35,1),
              transform 0.3s ease-out,
              filter 0.2s ease;
  z-index: 10;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  transform: translate(-50%, -50%);
  contain: layout style;
}
.pitch-piece img {
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
  display: block;
  image-rendering: high-quality;
  -webkit-image-rendering: -webkit-optimize-contrast;
}
.pitch-piece:hover:not(.dragging) {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}
.pitch-piece:active { cursor: var(--cur-grabbing, grabbing); }
.pitch-piece.dragging {
  cursor: var(--cur-grabbing, grabbing);
  z-index: 9999;
  transition: transform 0.05s linear, filter 0.08s ease;
  transform-origin: 50% 10%;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5));
}
/* Event badges on pitch pieces */
.pitch-evt {
  position: absolute;
  z-index: 12;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0px;
  font-size: 0.7rem;
  line-height: 1;
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'Noto Emoji', system-ui, sans-serif;
  font-variant-emoji: text;
  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,0.7));
  opacity: 0.9;
}
.pitch-evt--goals    { top: 22%; left: 22%; transform: translate(-50%, -50%); }
.pitch-evt--cards    { top: 22%; right: 22%; transform: translate(50%, -50%); }
.pitch-evt--subs     { bottom: 28%; right: 22%; transform: translate(50%, 50%); }
.pitch-evt--owngoals { bottom: 28%; left: 22%; transform: translate(-50%, 50%); }
/* Yellow card tint */
.pitch-evt--yellow {
  filter: brightness(0) invert(1)
    drop-shadow(0 0 1px rgba(245,190,50,0.9))
    drop-shadow(0 0 3px rgba(245,190,50,0.4));
}
/* Red card tint */
.pitch-evt--red {
  filter: brightness(0) invert(1)
    drop-shadow(0 0 1px rgba(248,81,73,0.9))
    drop-shadow(0 0 3px rgba(248,81,73,0.4));
}
/* Own goal tint */
.pitch-evt--og {
  filter: brightness(0) invert(1)
    drop-shadow(0 0 1px rgba(220,53,69,0.9))
    drop-shadow(0 0 3px rgba(220,53,69,0.4));
  opacity: 0.85;
}
/* Player card — overlaps bottom of piece, number sits on piece */
.pitch-piece-card {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translate(-50%, 55%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  gap: 1px;
}
.pitch-piece-num {
  font-weight: 900;
  font-size: 0.6rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  color: var(--hi-accent, #e9c46a);
  background: color-mix(in srgb, var(--te-deep, #0f1119) 70%, rgba(0,0,0,0.85));
  border: 1px solid color-mix(in srgb, var(--hi-accent, #e9c46a) 15%, transparent);
  border-radius: 999px;
  padding: 0 5px;
  z-index: 4;
}
.pitch-piece-num:empty { display: none; }
.pitch-piece-name {
  font-size: 0.55rem;
  line-height: 1.15;
  text-align: center;
  padding: 1.5px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--te-deep, #0f1119) 60%, rgba(0,0,0,0.75));
  border: 1px solid rgba(255,255,255,0.06);
}
/* Given name on first row, all surname parts together on second row */
.pitch-piece-name .pn-given {
  display: block;
  white-space: nowrap;
}
.pitch-piece-name .pn-sur-row {
  display: block;
  white-space: nowrap;
  font-weight: 800;
  color: var(--hi-text, #f0f0f0);
}
.pitch-piece-name .pn-given {
  font-weight: 400;
  color: var(--hi-text-sec, #9ca3af);
}
/* Single name (no surname sibling) — bold like a surname */
.pitch-piece-name .pn-sur:only-child,
.pitch-piece-name .pn-given:only-child {
  font-weight: 800;
  color: var(--hi-text, #f0f0f0);
}
.pitch-piece-name .pn-sur {
  font-weight: 800;
  color: var(--hi-text, #f0f0f0);
}
/* Formation badge */
.pitch-formation {
  position: absolute; z-index: 5;
  padding: 2px 8px; border-radius: 6px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-size: 0.55rem;
  font-weight: 800; letter-spacing: 0.5px;
}
.pitch-formation--home { top: 6px; right: 6px; }
.pitch-formation--away { bottom: 6px; right: 6px; }

/* Empty-pitch fallback — dimmed board, no players. */
.pitch--empty .pitch-board-img { opacity: 0.55; }
/* Own Goal styling — red-tinted via drop-shadow (keeps white base from md-icon filter) */
.own-goal-icon.md-icon {
  filter: brightness(0) invert(1)
    drop-shadow(0 0 1px rgba(220,53,69,0.9))
    drop-shadow(0 0 3px rgba(220,53,69,0.4));
  opacity: 0.85;
}

/* (match-formation-badge removed — using .pitch-formation) */

.own-goal-label {
  color: #dc3545;
  font-weight: 600;
  font-size: 0.8rem;
}

/* Alternative: red circle marker */
.own-goal-marker::before {
  content: "\25CF";
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Emoji', system-ui, sans-serif;
  font-variant-emoji: text;
  color: #dc3545;
  font-size: 0.6rem;
  position: relative;
  top: -0.3em;
  margin-right: -0.3em;
}

/* Penalty Shootout Box */
.penalty-shootout-box {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid rgba(0,0,0,0.1);
}

.pso-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pso-score {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,0.25);
  border-radius: 20px;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(255,255,255,0.06);
}
.pso-score .sc-num { color: var(--hi-text-sec, #9ca3af); }
.pso-score .sc-num.is-winner { color: var(--hi-text, #f0f0f0); font-weight: 900; }
.pso-score .sc-sep {
  color: var(--hi-accent, #e9c46a);
  font-size: 0.35rem;
  opacity: 0.65;
  font-variant-emoji: text;
}
.pso-score .sc-pen-tag {
  font-size: 0.45rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--hi-accent, #e9c46a);
  opacity: 0.8;
  margin-left: 0.1rem;
}

.pso-table {
  margin-top: 0.5rem;
}

.pso-table td {
  padding: 0.4rem 0.5rem;
  vertical-align: middle;
  border: none;
}

.pso-player {
  font-size: 0.9rem;
  min-width: 120px;
}

.pso-result {
  width: 40px;
}

.pso-round {
  width: 30px;
  font-size: 0.75rem;
}

.pso-scored {
  font-size: 0.7rem;
  color: #4ade80;
  font-variant-emoji: text;
}
.pso-missed {
  font-size: 0.7rem;
  color: #f84949;
  opacity: 0.55;
  font-variant-emoji: text;
}
  .match-section-nav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0.5rem 0;
  gap: 0.5rem;
  margin-bottom: 1rem;
  scrollbar-width: none;
}
.match-section-nav::-webkit-scrollbar { display: none; }

.match-section-nav-item {
  flex: 0 0 auto;
  min-width: 100px;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: var(--hi-surface, #1a1f2e);
  color: var(--hi-text-sec, #9ca3af);
  border: 1px solid var(--hi-border, rgba(255,255,255,0.06));
  transition: all 0.2s;
}

.match-section-nav-item:hover {
  background: color-mix(in srgb, var(--hi-accent, #e9c46a) 8%, var(--hi-surface, #1a1f2e));
  border-color: color-mix(in srgb, var(--hi-accent, #e9c46a) 20%, transparent);
  color: var(--hi-text, #f0f0f0);
  text-decoration: none;
  transform: translateY(-1px);
}

.match-section-nav-item.active {
  background: color-mix(in srgb, var(--hi-accent, #e9c46a) 15%, var(--hi-surface, #1a1f2e));
  color: var(--hi-accent, #e9c46a);
  border-color: color-mix(in srgb, var(--hi-accent, #e9c46a) 40%, transparent);
  font-weight: 800;
}
/* Match header bar (fixed below navbar) */
.match-header-fixed {
  position: fixed;
  top: var(--nav-h, 52px);
  left: 0; right: 0;
  z-index: 999;
  background: color-mix(in srgb, var(--mh-deep, #0f1119) 60%, #0a0c14);
  border-bottom: 1px solid color-mix(in srgb, var(--mh-accent, #e9c46a) 15%, rgba(255,255,255,0.06));
  padding: 1rem 0;
  color: #f0f0f0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Solid cover behind the transparent navbar so scrolled content doesn't bleed through */
.match-header-fixed::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0; right: 0;
  height: var(--nav-h, 52px);
  background: color-mix(in srgb, var(--mh-deep, #0f1119) 55%, #0a0c14);
  pointer-events: none;
}

/* Grid layout — score pinned to center, teams stretch to container edges */
.mh-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.mh-team {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mh-team-home { justify-content: flex-start; }
.mh-team-away { justify-content: flex-end; }
.mh-center { text-align: center; }

.match-header-fixed .team-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #f0f0f0;
  text-decoration: none;
  transition: color 0.15s;
}
a.team-name:hover {
  color: var(--mh-accent, #e9c46a);
}

.match-header-fixed .score {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--mh-accent, #e9c46a);
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
}
.match-header-fixed .mh-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  background: #2ecc71;
  vertical-align: middle;
  animation: mhLivePulse 2s ease-in-out infinite;
}
@keyframes mhLivePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46,204,113,0.5); }
  50%      { opacity: .6; box-shadow: 0 0 8px 3px rgba(46,204,113,0.3); }
}
.match-header-fixed .mh-date {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
}
/* TBD team placeholder — fixture-pill style, no badge, no link. */
.match-header-fixed .mh-tbd {
  color: rgba(255,255,255,0.3);
  font-style: italic;
  letter-spacing: 0.3px;
  font-weight: 500;
}
/* Stage label shown above kickoff time when both teams are TBD. */
.match-header-fixed .mh-stage {
  display: block;
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.15rem;
}

/* Responsive header */
@media (max-width: 768px) {
  .match-header-fixed .team-name { font-size: 1.1rem; }
  .match-header-fixed .score { font-size: 1.4rem; }
  .mh-grid { gap: 0.6rem; }
  .table-responsive { scrollbar-width: none; }
  .table-responsive::-webkit-scrollbar { display: none; }
  .pitch { aspect-ratio: 0.78; }
}
@media (max-width: 480px) {
  .match-header-fixed .team-name { font-size: 0.85rem; }
  .match-header-fixed .score { font-size: 1.1rem; letter-spacing: 1px; }
  .mh-grid { gap: 0.4rem; }
  .mh-team { gap: 0.3rem; min-width: 0; }
}
/* Pitch wrapper should NOT be sticky (prevents overlap/trapping) */
.lineups-sticky{
  position: static !important;
  top: auto !important;
}
/* Allow long bench names to wrap nicely */
.bench-name{
  white-space: normal;
  word-break: break-word;
}
.lineups-left-sticky{
  position: static;
  top: auto;
  max-height: none;
  overflow: visible;
}

.bench-table{
  table-layout: auto;  /* allow columns to size naturally */
  width: 100%;
}

.bench-table td{
  overflow: visible;
  text-overflow: clip;
  vertical-align: top;
}

/* Allow player names to wrap nicely instead of pushing columns wide */
.bench-name{
  white-space: normal;
  word-break: break-word;
}
/* Bench rows: keep consistent vertical spacing even when event lines are empty */
.bench-events,
.bench-minutes{
  min-height: 1.1em;      /* reserves a line even if empty */
  line-height: 1.1;
  margin: 0;
}

/* optional: tighten the overall row spacing slightly */
.bench-table td{
  padding-top: .35rem;
  padding-bottom: .35rem;
}
  .coach-box {
    border: 1px dashed var(--hi-border-lit, rgba(255,255,255,0.12));
    background: rgba(255,255,255,0.04);
    padding: .6rem 1rem;
    border-radius: .5rem;
    color: var(--hi-text-sec, #9ca3af);
  }
  .coach-label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--hi-text-dim, rgba(255,255,255,0.3));
    line-height: 1;
    margin: 3px 0;
  }
  .coach-name {
    font-size: 0.72rem;
    line-height: 1.2;
    margin: 3px 0;
  }

  .side-panel-card .card-header {
    position: sticky;
    top: 0;
    background: rgba(0,0,0,0.25);
    z-index: 1;
  }
  /* Timeline layout (Overview tab) */
.timeline-event-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: start;
  margin-bottom: 0.6rem;
}

.timeline-home {
  text-align: right;
  padding-right: 0.5rem;
}

.timeline-away {
  text-align: left;
  padding-left: 0.5rem;
}

/* Single-name players: bold when no .pn-sur sibling exists */
.timeline-home:not(:has(.pn-sur)) .pn-given,
.timeline-away:not(:has(.pn-sur)) .pn-given,
.sub-in:not(:has(.pn-sur)) .pn-given,
.sub-out:not(:has(.pn-sur)) .pn-given,
.pso-player:not(:has(.pn-sur)) .pn-given,
.mi-val span:not(:has(.pn-sur)) > .pn-given {
  font-weight: 800;
  color: var(--hi-text, #f0f0f0);
}

.timeline-minute {
  position: relative;
  text-align: center;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  color: var(--hi-accent, #e9c46a);
  line-height: 1;
}
/* Event emoji — sits at the inner edge of the name column, near the minute */
.timeline-has-icon { position: relative; }
.tm-card {
  position: absolute;
  top: 0;
  font-size: 0.85em;
  line-height: inherit;
}
.tm-card-home { right: -2px; transform: translateX(100%); }
.tm-card-away { left: -2px; transform: translateX(-100%); }

.timeline-minute .tm-num { display: inline-block; }
.timeline-minute .tm-mark {
  font-size: 0.72em;
  opacity: 0.65;
  margin-left: 1px;
  vertical-align: 0.2em;
  font-weight: 600;
}

.timeline-home div,
.timeline-away div {
  line-height: 1.1;
}
.timeline-muted {
  color: var(--hi-text-dim, rgba(255,255,255,0.3));
  font-size: 0.85rem;
}
/* ===== Consistent emoji treatment (matches chess mr-icon + blog glow) ===== */
.md-icon {
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'Noto Emoji', system-ui, sans-serif !important;
  font-variant-emoji: text;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.25s ease, filter 0.3s ease;
  line-height: 1;
  vertical-align: baseline;
}
.timeline-event-row:hover .md-icon,
.bench-row:hover .md-icon,
tr:hover .md-icon {
  opacity: 1;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 0.6px rgba(255,255,255,0.85))
    drop-shadow(0 0 1.4px rgba(255,255,255,0.35));
}

/* Yellow card — amber tinted glow */
.md-icon.md-yellow {
  filter: brightness(0) invert(1)
    drop-shadow(0 0 0.8px rgba(245,190,50,0.8))
    drop-shadow(0 0 2.5px rgba(245,190,50,0.3));
  opacity: 0.8;
}
.timeline-event-row:hover .md-icon.md-yellow,
.bench-row:hover .md-icon.md-yellow {
  opacity: 1;
  filter: brightness(0) invert(1)
    drop-shadow(0 0 1px rgba(245,190,50,0.95))
    drop-shadow(0 0 4px rgba(245,190,50,0.45));
}

/* Red card — red tinted glow */
.md-icon.md-red {
  filter: brightness(0) invert(1)
    drop-shadow(0 0 0.8px rgba(248,81,73,0.8))
    drop-shadow(0 0 2.5px rgba(248,81,73,0.3));
  opacity: 0.8;
}
.timeline-event-row:hover .md-icon.md-red,
.bench-row:hover .md-icon.md-red {
  opacity: 1;
  filter: brightness(0) invert(1)
    drop-shadow(0 0 1px rgba(248,81,73,0.95))
    drop-shadow(0 0 4px rgba(248,81,73,0.45));
}

/* Second yellow — red overlapping yellow, offset right+down */
.card-stack {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0 4px;
  vertical-align: middle;
}
.card-stack-under,
.card-stack-over {
  position: absolute;
  font-size: inherit;
  line-height: 1;
}
.card-stack-under {
  left: -0.15em;
  top: -0.08em;
  z-index: 1;
}
.card-stack-over {
  left: 0.15em;
  top: 0.08em;
  z-index: 2;
  text-shadow:
    0 0 2px #1a1f2e,
    0 0 4px #1a1f2e,
    1px 0 1px #1a1f2e,
    -1px 0 1px #1a1f2e,
    0 1px 1px #1a1f2e,
    0 -1px 1px #1a1f2e;
}

.event-icon {
  margin: 0 4px;
}
.sub-in {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  padding: 0;
}

.timeline-home .sub-in { justify-content: flex-end; }
.timeline-away .sub-in { justify-content: flex-start; }

.sub-out {
  font-size: 0.72rem;
  color: var(--hi-text-dim, rgba(255,255,255,0.25));
  line-height: 1.1;
  margin: 0;
  padding: 0;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.sub-out .pn-given {
  color: inherit;
  font-weight: 400;
}
.sub-out .pn-sur {
  color: inherit;
  font-weight: 700;
}
.timeline-event-row:hover .sub-out {
  opacity: 0.75;
}
/* Overview left panel: card-like look */
.overview-left {
  background: var(--hi-surface, #1a1f2e);
  color: var(--hi-text, #f0f0f0);
  border: 1px solid var(--hi-border, rgba(255,255,255,0.06));
  border-radius: 10px;
  padding: 1rem 1rem;
}

.overview-left h6 {
  color: var(--hi-text, #f0f0f0) !important;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.overview-left .timeline-muted {
  color: var(--hi-text-dim, rgba(255,255,255,0.3)) !important;
}
.overview-left .timeline-minute {
  color: var(--hi-accent, #e9c46a);
}
.overview-left .sub-out {
  color: var(--hi-text-dim, rgba(255,255,255,0.3));
}
/* ============================================================
   Right column cards — Match Statistics + Match Info
   Consistent typography, label/value hierarchy
   ============================================================ */
.stats-card {
  border-radius: 10px;
  background: var(--hi-surface, #1a1f2e);
  border: 1px solid var(--hi-border, rgba(255,255,255,0.06));
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.stats-card .card-header {
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--hi-border, rgba(255,255,255,0.06));
  padding: 0.7rem 1rem;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--hi-accent, #e9c46a);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.stats-card .card-header::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--hi-accent, #e9c46a);
  border-radius: 2px;
}
.stats-card .card-body { padding: 0.85rem 1rem; }

/* -- Match Statistics -- */
.ms-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 0.42rem 0.4rem;
  margin: 0 -0.4rem;
  border-bottom: 1px solid var(--hi-border, rgba(255,255,255,0.04));
  border-radius: 5px;
  transition: background 0.15s;
}
.ms-row:last-child { border-bottom: none; }
.ms-row:hover {
  background: color-mix(in srgb, var(--hi-accent, #e9c46a) 5%, transparent);
}
.ms-row.is-headline { padding: 0.55rem 0.4rem 0.65rem; }
.ms-row.is-headline .ms-val { font-size: 1.4rem; }

.ms-team-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--hi-border, rgba(255,255,255,0.06));
  margin-bottom: 0.25rem;
}
.ms-team-head .ms-team-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--hi-text, #f0f0f0);
}

.ms-val {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--hi-text, #f0f0f0);
  line-height: 1;
}
.ms-val.is-winner { color: var(--hi-accent, #e9c46a); }
.ms-val.is-zero { color: var(--hi-text-dim, rgba(255,255,255,0.3)); }

.ms-label {
  text-align: center;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--hi-text-dim, rgba(255,255,255,0.4));
}

/* -- Match Info -- */
.mi-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0.85rem;
  padding: 0.45rem 0.4rem;
  margin: 0 -0.4rem;
  border-bottom: 1px solid var(--hi-border, rgba(255,255,255,0.04));
  border-radius: 5px;
  transition: background 0.15s;
  align-items: baseline;
}
.mi-row:last-child { border-bottom: none; }
.mi-row:hover {
  background: color-mix(in srgb, var(--hi-accent, #e9c46a) 5%, transparent);
}

.mi-key {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--hi-text-dim, rgba(255,255,255,0.4));
  line-height: 1.4;
}

.mi-val {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--hi-text, #f0f0f0);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
/* Soft = dim, regular weight (like pn-given). Strong = bold white (like pn-sur). */
.mi-soft {
  color: var(--hi-text-sec, #9ca3af);
  font-weight: 400;
}
.mi-strong {
  color: var(--hi-text, #f0f0f0);
  font-weight: 800;
}
.mi-num {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--hi-accent, #e9c46a);
}
.mi-name .pn-given {
  font-weight: 400;
  color: var(--hi-text-sec, #9ca3af);
}
.mi-name .pn-sur {
  font-weight: 800;
  color: var(--hi-text, #f0f0f0);
}
.mi-sub {
  display: block;
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--hi-text-dim, rgba(255,255,255,0.4));
  margin-top: 2px;
  letter-spacing: 0.2px;
}
.mi-val .badge-tilt-wrap { line-height: 0; }

.mi-flags {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--hi-border, rgba(255,255,255,0.06));
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.mi-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hi-accent, #e9c46a) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--hi-accent, #e9c46a) 40%, transparent);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--hi-accent, #e9c46a);
}
.mi-flag.is-neutral {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: var(--hi-text-sec, #9ca3af);
}
.mi-flag .md-icon {
  font-size: 0.7rem;
  line-height: 1;
}
.mi-flag .mr-icon {
  font-size: 0.7rem;
  font-variant-emoji: text;
  line-height: 1;
}

.timeline-home .sub-out { padding-right: 1.2rem; }
.timeline-away .sub-out { padding-left: 1.2rem; }

.sub-emoji {
  flex: 0 0 auto;
  font-size: 0.8rem;
  line-height: 1;
  vertical-align: baseline;
}
.bench-pill{
  display: inline-block;
  background: #fff;
  color: #111;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .75rem;
  border: 1px solid rgba(0,0,0,.15);
  white-space: nowrap;
}

/* --- pitch player block --- */
.player-dot{
  position: relative;
  --avatar: 56px;
  width: 110px;
  max-width: 18vw;
  text-align: center;
  color: #fff;
}

/* wrapper around the piece so badges can sit OUTSIDE without being clipped */
.avatar-stack{
  position: relative;
  width: var(--avatar);
  height: calc(var(--avatar) * 1.2);
  margin: 0 auto;
}
.player-avatar{
  position: relative;
  width: var(--avatar);
  height: calc(var(--avatar) * 1.2);
  margin: 0;
  background: transparent;
  overflow: visible;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45));
}

.player-avatar img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Name label below piece — compact, chess-style */
.player-dot .name {
  font-size: 0.58rem;
  line-height: 1.15;
  margin-top: 1px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.4);
  letter-spacing: 0.2px;
}
.player-dot .name a { color: #fff; text-decoration: none; }

/* base badge style (used pitch + bench) */
.kit-badge{
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.6);
  background: rgba(0,0,0,.75);
  color: #fff;
  font-weight: 900;
  font-size: .62rem;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* pitch placement (overlaps piece base) */
.kit-badge--pitch{
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  z-index: 5;
}

/* bench placement (normal inline) */
.kit-badge--bench{
  border: 1px solid rgba(0,0,0,.2);
  background: rgba(0,0,0,.85);
  font-size: .75rem;
}

/* ===== SUBSTITUTES — mirrored layout with fixed-center positions ===== */
.bench-row {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--hi-border, rgba(255,255,255,0.06));
  border-radius: 6px;
  transition: background 0.15s;
  min-height: 2.1rem;
  font-size: 0.72rem;
}
.bench-row:last-child { border-bottom: none; }
.bench-row:hover {
  background: color-mix(in srgb, var(--hi-accent, #e9c46a) 6%, transparent);
}

/* Left half: home name+num — flush left */
.bench-half-home {
  display: flex; align-items: center;
  justify-content: flex-start;
  width: calc(50% - 72px);
  min-width: 0;
}
/* Right half: away num+name — flush right */
.bench-half-away {
  display: flex; align-items: center;
  justify-content: flex-end;
  width: calc(50% - 72px);
  min-width: 0;
  margin-left: auto;
}

/* ---- Center zone: events + positions, all absolutely anchored ---- */
/* Position pair — the true fixed anchor at dead center */
.bench-center-pos {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 3px;
  z-index: 2;
}
/* Home events — right edge flush, ending with gap before pos pair */
.bench-center-hevt {
  position: absolute;
  right: calc(50% + 32px);
  display: flex; align-items: center; gap: 3px;
  z-index: 1;
}
/* Away events — left edge flush, starting with gap after pos pair */
.bench-center-aevt {
  position: absolute;
  left: calc(50% + 32px);
  display: flex; align-items: center; gap: 3px;
  z-index: 1;
}

/* Name + number group */
.bench-slot-name {
  display: flex; align-items: center; gap: 0.3rem;
  min-width: 0;
  overflow: hidden;
}

/* Position chip — fixed-width, color-coded bg */
.bench-pos {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 18px;
  border-radius: 4px;
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  text-align: center;
  color: var(--hi-text, #f0f0f0);
  border: 1px solid rgba(255,255,255,0.06);
}
.bench-pos--gk { background: rgba(245,158,11,0.18); border-color: rgba(245,158,11,0.25); }
.bench-pos--df { background: rgba(34,197,94,0.14); border-color: rgba(34,197,94,0.2); }
.bench-pos--mf { background: rgba(59,130,246,0.14); border-color: rgba(59,130,246,0.2); }
.bench-pos--fw { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.2); }

/* Shirt number */
.bench-num {
  font-size: 0.62rem;
  font-weight: 900;
  color: var(--hi-text-dim, rgba(255,255,255,0.35));
  font-variant-numeric: tabular-nums;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

/* Player name */
.bench-pname {
  font-size: 0.7rem;
  color: var(--hi-text, #f0f0f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  cursor: var(--cur-default, default);
}
/* Single-name players: bold (only pn-given, no pn-sur siblings) */
.bench-pname .pn-given:only-child {
  font-weight: 800;
  color: var(--hi-text, #f0f0f0);
}
/* Truncated name: subtle dotted underline hint */
.bench-pname.is-truncated {
  text-decoration: underline dotted rgba(255,255,255,0.15);
  text-underline-offset: 2px;
}

/* Match events (sub in, goals, cards) — contrasting pill style */
.bench-evt {
  font-size: 0.6rem;
  flex-shrink: 0;
  line-height: 1;
}
/* Event pills */
.bench-center-hevt .bench-evt,
.bench-center-aevt .bench-evt {
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 0.56rem;
  font-weight: 700;
  color: var(--hi-text-sec, #9ca3af);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bench-center-hevt .bench-evt.md-icon,
.bench-center-aevt .bench-evt.md-icon {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.62rem;
  opacity: 0.75;
}
.bench-row:hover .bench-center-hevt .bench-evt,
.bench-row:hover .bench-center-aevt .bench-evt {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.1);
}
.bench-row:hover .bench-center-hevt .bench-evt.md-icon,
.bench-row:hover .bench-center-aevt .bench-evt.md-icon {
  background: none;
  border: none;
  opacity: 1;
}

/* ===== CONSISTENT NAME TYPOGRAPHY across all tabs ===== */
/* Given name: light, dimmed.  Surname: bold, bright. */
.pn-given { font-weight: 400; color: var(--hi-text-sec, #9ca3af); }
.pn-sur   { font-weight: 800; color: var(--hi-text, #f0f0f0); }

/* Timeline rows hover */
.timeline-event-row {
  border-radius: 5px;
  padding: 0.2rem 0.3rem;
  transition: background 0.15s;
}
.timeline-event-row:hover {
  background: color-mix(in srgb, var(--hi-accent, #e9c46a) 5%, transparent);
}

/* PSO rows hover */
.pso-table tr {
  transition: background 0.15s;
}
.pso-table tr:hover {
  background: color-mix(in srgb, var(--hi-accent, #e9c46a) 5%, transparent);
}

/* name closer to the circle (and leaves room for the number badge) */
.player-dot .name{
  margin-top: 8px;            /* tighter than before */
  font-size: .85rem;
  line-height: 1.1;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* corner badges: emojis ONLY, no background/outline */
.pdot-badge{
  position: absolute;
  z-index: 4;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  pointer-events: none;
  font-size: 1rem;
  line-height: 1;
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'Noto Emoji', system-ui, sans-serif;
  font-variant-emoji: text;
  filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0,0,0,.6));
  opacity: 0.85;
}

/* positions relative to the avatar-stack */
.pdot-goals { top: -10px; left: -10px; }      /* top-left */

/* move these up to align with the shirt number */
.pdot-subs{
  left: -10px;
  top: calc(var(--avatar) - 10px);
  bottom: auto;
}

.pdot-cards{
  right: -10px;
  top: calc(var(--avatar) - 10px);
  bottom: auto;
}
/* --- W/D/L form squares --- */
/* ===== H2H WC Record symmetric grid ===== */
.h2h-wc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 0.6rem;
  font-size: 0.66rem;
}
.h2h-wc-cell {
  padding: 0.15rem 0;
  min-height: 1.15em; /* ensures empty cells still hold row height */
}
.h2h-wc-home { text-align: left; }
.h2h-wc-away { text-align: right; }
.h2h-wc-dim { color: var(--hi-text-dim, rgba(255,255,255,0.3)); }

/* WC Record — embellished labels */
.wc-rec-finish-row { padding-top: 0.25rem; padding-bottom: 0.3rem; }
.wc-rec-stage {
  display: inline-block;
  font-size: 0.48rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--hi-accent, #e9c46a);
  background: color-mix(in srgb, var(--hi-accent, #e9c46a) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--hi-accent, #e9c46a) 18%, transparent);
  border-radius: 4px;
  padding: 0.12rem 0.4rem;
  white-space: nowrap;
}
.wc-rec-years {
  color: var(--hi-accent, #e9c46a);
  font-size: 0.52rem;
  font-weight: 600;
  font-style: italic;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
  text-shadow: 0 0 8px color-mix(in srgb, var(--hi-accent, #e9c46a) 40%, transparent);
}

/* Editions row */
.wc-rec-editions-row {
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--hi-border, rgba(255,255,255,0.06));
  margin-bottom: 0.1rem;
}
.wc-rec-editions {
  color: var(--hi-text, #f0f0f0);
  font-weight: 800;
  font-size: 0.72rem;
}
.wc-rec-editions-label {
  color: var(--hi-text-dim, rgba(255,255,255,0.3));
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Biggest win/loss match rows */
.wc-rec-match-row { padding: 0.2rem 0; }
.wc-rec-wl-tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 3px;
  font-size: 0.42rem; font-weight: 800; color: #fff;
  vertical-align: middle;
}
.wc-rec-wl-w { background: #52b788; }
.wc-rec-wl-l { background: #e76f51; }
.wc-rec-score-link {
  text-decoration: none;
  color: var(--hi-text, #f0f0f0);
  font-weight: 800;
  transition: color 0.15s;
}
.wc-rec-score-link:hover { color: var(--hi-accent, #e9c46a); }
.wc-rec-score-loss { font-weight: 600; opacity: 0.7; }
.wc-rec-score-loss:hover { opacity: 1; }
.wc-rec-year {
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--hi-text-dim, rgba(255,255,255,0.25));
  font-variant-numeric: tabular-nums;
}

/* Stat labels (P, W-D-L, GF/GA, etc.) */
.wc-rec-stat-label {
  color: var(--hi-text-dim, rgba(255,255,255,0.3));
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.h2h-wc-grid strong {
  font-variant-numeric: tabular-nums;
}

.h2h-wc-stat-top {
  border-top: 1px solid var(--hi-border, rgba(255,255,255,0.06));
  padding-top: 0.35rem;
  margin-top: 0.2rem;
}

/* H2H match list — compact pills for narrow card */
.h2h-match-list { margin: 0; gap: 0.2rem; }
.h2h-match-list .fix-match-row {
  grid-template-columns: 1fr auto 1fr;
  padding: 0.35rem 0.5rem;
  font-size: 0.65rem;
}
.h2h-match-list .fix-match-time,
.h2h-match-list .fix-match-stage { display: none; }
.h2h-match-list .fix-match-score { font-size: 0.72rem; min-width: 38px; }
.h2h-match-list .th-team-name { font-size: 0.6rem; }

/* Stage label above each H2H match pill */
.h2h-stage-label {
  font-size: 0.46rem;
  font-weight: 900;
  color: var(--hi-accent, #e9c46a);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  text-align: center;
  margin-top: 0.35rem;
  margin-bottom: 0.1rem;
}
.h2h-stage-label:first-child { margin-top: 0; }

/* W-D-W summary row */
.h2h-wdw-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.2rem 0.35rem;
  margin-top: 0.4rem;
  border-top: 1px solid var(--hi-border, rgba(255,255,255,0.06));
  font-size: 0.66rem;
}
.h2h-wdw-val { font-variant-numeric: tabular-nums; }
.h2h-wdw-center {
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Match count footer */
.h2h-match-count {
  text-align: center;
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--hi-text-dim, rgba(255,255,255,0.25));
  padding-top: 0.4rem;
  margin-top: 0.3rem;
  border-top: 1px solid var(--hi-border, rgba(255,255,255,0.06));
}

.form-strip{
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  align-items: center;
}

.form-chip{
  width: 26px; height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.7rem;
  border: none;
  color: #fff;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.form-chip::before {
  content: ''; position: absolute;
  top: -6px; left: -4px; right: -4px; bottom: -6px;
}
a.form-chip:hover {
  z-index: 2;
}

/* colors — lobby palette with matching glow */
.form-w{ background: #52b788; box-shadow: 0 1px 4px rgba(82,183,136,0.3); }
.form-d{ background: #6b7280; box-shadow: 0 1px 4px rgba(107,114,128,0.2); }
.form-l{ background: #e76f51; box-shadow: 0 1px 4px rgba(231,111,81,0.3); }
a.form-chip.form-w:hover { box-shadow: 0 2px 10px rgba(82,183,136,0.45); }
a.form-chip.form-d:hover { box-shadow: 0 2px 10px rgba(107,114,128,0.35); }
a.form-chip.form-l:hover { box-shadow: 0 2px 10px rgba(231,111,81,0.45); }
/* Position badge colors (detailed positions) */
.pos-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 4px;
}

/* Category colors */
.pos-gk { background: #f59e0b; color: #fff; }  /* Gold/Yellow */
.pos-df { background: #3b82f6; color: #fff; }  /* Blue */
.pos-mf { background: #10b981; color: #fff; }  /* Green */
.pos-fw { background: #ef4444; color: #fff; }  /* Red */

/* Position code shown on pitch */
.player-dot .pos-code {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    margin-top: 2px;
    letter-spacing: 0.5px;
}

/* Alternative: badge style for position on pitch */
.pitch-pos-badge {
    display: inline-block;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    margin-top: 2px;
}


/* ==========================================================================
   NEWS TAB (.md-news-*)
   ========================================================================== */

.md-news-wrap{--mn-gap:0.7rem;}
.md-news-eyebrow{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;font-size:0.6rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--hi-text-dim,rgba(255,255,255,0.5));margin-bottom:0.8rem;padding:0 0.1rem;}
.md-news-eyebrow .md-news-eyebrow-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--hi-border,rgba(255,255,255,0.12)),transparent);}
.md-news-eyebrow strong{color:var(--hi-accent,#e9c46a);font-weight:700;letter-spacing:0.6px;}

.md-news-col-title{display:flex;align-items:center;gap:0.5rem;font-size:0.62rem;text-transform:uppercase;letter-spacing:1.4px;font-weight:800;color:var(--hi-accent,#e9c46a);margin:0 0 0.55rem 0.15rem;}
.md-news-col-title::before{content:"";display:inline-block;width:14px;height:2px;background:var(--hi-accent,#e9c46a);border-radius:2px;}

.md-news-list{display:flex;flex-direction:column;gap:var(--mn-gap);}

/* ── News cards — td-fc style (hero + summary row) ── */
.md-news-card{position:relative;display:block;border-radius:10px;overflow:hidden;background:var(--hi-surface,#252b3d);border:1px solid rgba(255,255,255,0.06);text-decoration:none;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
.md-news-card::after{content:'';position:absolute;top:0;left:-20%;width:140%;height:4px;background:linear-gradient(90deg,transparent 5%,color-mix(in srgb,var(--hi-accent,#e9c46a) 25%,transparent) 30%,rgba(255,255,255,0.55) 50%,color-mix(in srgb,var(--hi-accent,#e9c46a) 25%,transparent) 70%,transparent 95%);filter:blur(18px);pointer-events:none;z-index:5;transform:rotate(-15deg) translateY(-60px);}
.md-news-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--hi-accent,#e9c46a) 12%,transparent);box-shadow:0 2px 12px -4px color-mix(in srgb,var(--hi-accent,#e9c46a) 8%,transparent);}
.md-news-card:hover::after{animation:mdCardShine .7s ease-out forwards;}
@keyframes mdCardShine{0%{transform:rotate(-15deg) translateY(-60px);}100%{transform:rotate(-15deg) translateY(280px);}}

/* Hero section — compact */
.md-news-hero{position:relative;height:clamp(80px,12vw,120px);overflow:hidden;}
.md-news-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.md-news-card:hover .md-news-img{transform:scale(1.04);}
.md-news-flag-bg{position:absolute;width:160%;top:50%;left:55%;transform:translate(-50%,-50%) rotate(4deg);opacity:0.45;filter:saturate(0.8);}
.md-news-img-empty{position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--hi-accent,#e9c46a) 12%,transparent),transparent 60%),linear-gradient(135deg,#1a1f2e,#252b3d);}
.md-news-tour-logo{position:absolute;top:0.4rem;right:0.4rem;width:28px;height:28px;object-fit:contain;z-index:1;opacity:0.8;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.5));pointer-events:none;user-select:none;}
.md-news-grad{display:none;}
.md-news-card::before{content:'';position:absolute;top:0;left:0;right:0;height:calc(clamp(80px,12vw,120px) + 4px);background:linear-gradient(180deg,transparent 50%,var(--hi-surface,#252b3d) 100%);pointer-events:none;z-index:3;}

/* Hero overlay text */
.md-news-hero-text{position:absolute;bottom:0;left:0;right:0;padding:0.5rem 0.7rem;z-index:4;display:flex;flex-direction:column;gap:0.2rem;}

/* Pill — matches td-fc-pill: teal bg, rounded, sweep shine */
.md-news-pill{align-self:flex-start;display:inline-flex;align-items:center;position:relative;overflow:hidden;padding:3px 8px;font-size:0.45rem;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;border-radius:5px;color:#fff;background:#2a9d8f;border:none;white-space:nowrap;line-height:1.5;transition:filter .3s ease,box-shadow .3s ease;}
.md-news-pill.is-muted{background:rgba(255,255,255,0.85);color:#1a1f2e;}
.md-news-pill.is-article{background:rgba(94,198,184,0.88);color:#0f1119;}
.md-news-pill::after{content:'';position:absolute;top:0;left:-80%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);transform:skewX(-20deg);pointer-events:none;opacity:0;}
.md-news-card:hover .md-news-pill{filter:brightness(1.15);box-shadow:0 0 8px rgba(42,157,143,0.35);}
.md-news-card:hover .md-news-pill::after{opacity:1;animation:mdPillShine .5s ease-out forwards;}
@keyframes mdPillShine{0%{left:-80%;}100%{left:120%;}}

.md-news-title{font-size:0.74rem;font-weight:800;line-height:1.25;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 6px rgba(0,0,0,0.85);}

/* Summary row below hero */
.md-news-summary-row{display:flex;align-items:baseline;gap:0.6rem;padding:0.45rem 0.7rem;}
.md-news-summary{flex:1;font-size:0.64rem;color:var(--hi-text-sec,#9ca3af);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.md-news-date{font-size:0.5rem;color:var(--hi-text-dim,rgba(255,255,255,0.25));white-space:nowrap;font-weight:600;flex-shrink:0;font-variant-numeric:tabular-nums;letter-spacing:0.3px;}

.md-news-empty{padding:2.2rem 1rem;text-align:center;color:var(--hi-text-dim,rgba(255,255,255,0.4));font-size:0.7rem;background:rgba(255,255,255,0.02);border:1px dashed var(--hi-border,rgba(255,255,255,0.1));border-radius:10px;}
.md-news-empty-glyph{font-size:1.5rem;display:block;margin-bottom:0.4rem;opacity:0.5;}

@media (max-width:767px){
  .md-news-col + .md-news-col{margin-top:1rem;}
}


/* ==========================================================================
   COMMENTS TAB (.md-comments-*)
   ========================================================================== */

/* Bridge --f-* (forum) -> --hi-* (history/match-detail) so comment_styles.html renders correctly */
.md-comments {
  --f-bg: var(--hi-bg, #0f1119);
  --f-surface: var(--hi-surface, #252b3d);
  --f-surface-2: var(--hi-surface-lit, #2f3750);
  --f-border: var(--hi-border, rgba(255,255,255,0.06));
  --f-border-lit: rgba(255,255,255,0.12);
  --f-text: var(--hi-text, #f0f0f0);
  --f-text-sec: var(--hi-text-sec, #9ca3af);
  --f-text-dim: var(--hi-text-dim, rgba(255,255,255,0.35));
  --f-accent: var(--hi-accent, #e9c46a);
  --f-accent-dim: rgba(233,196,106,0.15);
  --f-blue: #58a6ff;
  --f-green: #4ade80;
  --f-red: #f85149;
  --f-teal: #2a9d8f;
  --f-hover: rgba(255,255,255,0.03);
  color: var(--hi-text, #f0f0f0);
}

/* Eyebrow header (consistent with news tab) */
.md-comments-eyebrow{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;font-size:0.6rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--hi-text-dim,rgba(255,255,255,0.5));margin-bottom:0.8rem;padding:0 0.1rem;}
.md-comments-eyebrow .md-comments-eyebrow-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--hi-border,rgba(255,255,255,0.12)),transparent);}
.md-comments-eyebrow strong{color:var(--hi-accent,#e9c46a);font-weight:700;letter-spacing:0.6px;}

/* Wrapping card so the thread sits on a clean surface.
   overflow:visible so cm-menu dropdowns and the hype roulette can float above the card edge. */
.md-comments-card{background:var(--hi-surface,#252b3d);border:1px solid var(--hi-border,rgba(255,255,255,0.08));border-radius:12px;overflow:visible;}
.md-comments-card > *:first-child{border-top-left-radius:12px;border-top-right-radius:12px;}
.md-comments-card > *:last-child{border-bottom-left-radius:12px;border-bottom-right-radius:12px;}

/* Sort tabs */
.md-comments-toolbar{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;padding:0.7rem 1.1rem;border-bottom:1px solid var(--hi-border,rgba(255,255,255,0.06));background:rgba(255,255,255,0.02);}
.md-comments-toolbar-title{font-size:0.62rem;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;color:var(--hi-accent,#e9c46a);display:flex;align-items:center;gap:0.5rem;}
.md-comments-toolbar-title::before{content:"";display:inline-block;width:14px;height:2px;background:var(--hi-accent,#e9c46a);border-radius:2px;}
.md-comments-sort{display:flex;gap:0.25rem;}
.md-comments-sort-btn{background:none;border:1px solid transparent;color:var(--hi-text-dim,rgba(255,255,255,0.4));font-size:0.55rem;font-weight:700;text-transform:uppercase;letter-spacing:0.7px;padding:0.25rem 0.55rem;border-radius:999px;cursor:var(--cur-pointer, pointer);transition:color .15s,background .15s,border-color .15s;}
.md-comments-sort-btn:hover{color:var(--hi-text,#f0f0f0);}
.md-comments-sort-btn.active{color:var(--hi-accent,#e9c46a);background:rgba(233,196,106,0.1);border-color:rgba(233,196,106,0.35);}

/* Compose bar (mirrors .nw-compose from news_theme) */
.md-compose{padding:0.75rem 1.2rem;border-bottom:1px solid var(--hi-border,rgba(255,255,255,0.06));}
.md-compose-row{display:flex;align-items:center;gap:0.5rem;}
.md-compose-input-wrap{flex:1;position:relative;}
.md-compose-input{width:100%;padding:0.6rem 3.2rem 0.6rem 0.9rem;background:var(--hi-bg,#0f1119);border:1px solid var(--hi-border,rgba(255,255,255,0.08));border-radius:14px;color:var(--hi-text,#f0f0f0);font-size:0.78rem;outline:none;transition:border-color .2s;font-family:inherit;resize:none;min-height:42px;max-height:140px;overflow-y:auto;line-height:1.5;box-sizing:border-box;}
.md-compose-input::placeholder{color:var(--hi-text-dim,rgba(255,255,255,0.4));}
.md-compose-input:focus{border-color:var(--hi-accent,#e9c46a);}
.md-compose-counter{position:absolute;top:50%;right:0.7rem;transform:translateY(-50%);font-size:0.5rem;font-weight:600;color:var(--hi-text-dim,rgba(255,255,255,0.4));font-variant-numeric:tabular-nums;user-select:none;pointer-events:none;transition:color .15s;opacity:0.5;}
.md-compose-counter.warn{color:var(--hi-accent,#e9c46a);opacity:1;}
.md-compose-counter.over{color:#f85149;opacity:1;}
.md-compose-send{width:34px;height:34px;border-radius:50%;background:var(--hi-accent,#e9c46a);border:none;color:#0b0f14;cursor:var(--cur-pointer, pointer);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;transition:transform .15s,opacity .15s;opacity:0.35;flex-shrink:0;}
.md-compose-send.ready{opacity:1;}
.md-compose-send.ready:hover{transform:scale(1.08);}
.md-compose-reply{display:flex;align-items:center;gap:0.4rem;margin-bottom:0.4rem;padding:0.25rem 0.6rem;background:rgba(233,196,106,0.15);border:1px solid rgba(233,196,106,0.25);border-radius:10px;font-size:0.6rem;font-weight:700;color:var(--hi-accent,#e9c46a);}
.md-compose-reply-label{flex:1;}
.md-compose-reply-cancel{width:16px;height:16px;border-radius:50%;background:var(--hi-surface-lit,#2f3750);border:none;color:var(--hi-text-dim,rgba(255,255,255,0.4));font-size:0.5rem;cursor:var(--cur-pointer, pointer);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.md-compose-reply-cancel:hover{background:#f85149;color:#fff;}
.md-compose-login{padding:0.85rem 1.2rem;font-size:0.72rem;color:var(--hi-text-sec,#9ca3af);border-bottom:1px solid var(--hi-border,rgba(255,255,255,0.06));}
.md-compose-login a{color:var(--hi-accent,#e9c46a);text-decoration:none;font-weight:700;}

/* Comment list area (the .cm rules from comment_styles.html will style children) */
.md-comments-list{padding:0.2rem 0;min-height:120px;}
.md-comments-empty{padding:2.5rem 1rem;text-align:center;color:var(--hi-text-dim,rgba(255,255,255,0.4));font-size:0.72rem;}
.md-comments-empty-glyph{font-size:1.6rem;display:block;margin-bottom:0.4rem;opacity:0.55;}

/* Collapse button used by reply trees */
.md-comments .nw-collapse-btn{display:inline-flex;align-items:center;gap:0.25rem;padding:0.2rem 0.5rem;margin:0.3rem 0 0.1rem;font-size:0.52rem;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--hi-text-dim,rgba(255,255,255,0.4));background:none;border:none;cursor:var(--cur-pointer, pointer);transition:color .15s;}
.md-comments .nw-collapse-btn:hover{color:var(--hi-accent,#e9c46a);}
.md-comments .cm-replies.collapsed > .cm{display:none;}

/* ===== Emoji icon treatment -- monochrome white + glow (matches feed) ===== */
.md-comments .cm-approve .act-icon,
.md-comments .cm-act .act-icon{
  opacity:0.6;
  filter:brightness(0) invert(1);
  transition:opacity 0.25s ease, filter 0.3s ease;
  font-variant-emoji:text;
}
.md-comments .cm-approve:hover .act-icon,
.md-comments .cm-act:hover .act-icon{
  opacity:1;
  filter:brightness(0) invert(1)
    drop-shadow(0 0 0.6px rgba(255,255,255,0.85))
    drop-shadow(0 0 1.4px rgba(255,255,255,0.35));
}
.md-comments .cm-approve.cm-liked .act-icon{
  opacity:1;
  filter:brightness(0) invert(1)
    drop-shadow(0 0 0.6px rgba(233,196,106,0.95))
    drop-shadow(0 0 1.6px rgba(233,196,106,0.45));
}
.md-comments .cm-approve.cm-liked .cm-act-count{color:var(--hi-accent,#e9c46a);}
@keyframes mdLikePop{
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1.15); }
}
.md-comments .cm-approve.cm-like-anim .act-icon{animation:mdLikePop 0.3s ease-out;}

/* Upvote arrow — bold chevron (matches forum) */
.md-comments .upvote-arrow{
  display:inline-block;
  width:8px;height:8px;
  border-left:2.5px solid currentColor;
  border-top:2.5px solid currentColor;
  transform:rotate(45deg);
  position:relative;
  top:1px;
}

/* Layout: approve + reply sit together on the left right after the name.
   time + edited + menu form a single right-aligned cluster. */
.md-comments .cm-head{align-items:center;}
.md-comments .cm-approve{order:5;}
.md-comments .cm-reply-btn{order:6;margin-left:0.4rem;color:var(--hi-text-dim,rgba(255,255,255,0.4));}
.md-comments .cm-reply-btn:hover{color:var(--hi-accent,#e9c46a);}
.md-comments .cm-time{order:10;margin-left:auto;color:var(--hi-text-dim,rgba(255,255,255,0.4));}
.md-comments .cm-edited{order:12;}
.md-comments .cm-menu{order:13;}
/* Consistent inner padding so top-level and replies share the same right edge.
   The nested .cm sits inside .cm-replies, which is itself inside the parent .cm's
   content area (already 1.2rem from the card edge). Setting nested padding-right=0
   prevents the right edge from drifting inward by an extra 1.2rem. */
.md-comments .cm{padding:0.85rem 1.2rem;overflow:visible;}
.md-comments .cm-head{overflow:visible;}
.md-comments .cm-replies{padding-right:0;}
.md-comments .cm-replies .cm{padding:0.75rem 0 0.75rem 1.2rem;}

/* cm-menu dropdown should float above siblings, not be clipped */
.md-comments .cm-menu{position:relative;}
.md-comments .cm-menu-drop{z-index:1000;}

/* ===== Hype roulette -- spinning number reel on first approve ===== */
.md-comments .cm-approve{position:relative;overflow:visible !important;}
.md-comments .hype-roulette{
  position:absolute;bottom:100%;left:50%;
  transform:translate(-50%, -6px);
  width:44px;height:20px;
  background:rgba(15,17,25,0.55);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:6px;
  font-family:'Segoe UI', system-ui, sans-serif !important;
  font-size:0.78rem;font-weight:700;
  color:rgba(240,240,240,0.85) !important;
  white-space:nowrap;overflow:hidden;
  pointer-events:none;z-index:60;opacity:0;
  transition:opacity 0.2s ease, transform 0.25s ease;
  text-decoration:none !important;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,0.4) 16%,#000 42%,#000 58%,rgba(0,0,0,0.4) 84%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,0.4) 16%,#000 42%,#000 58%,rgba(0,0,0,0.4) 84%,transparent 100%);
}
.md-comments .hype-roulette.is-visible{opacity:1;}
.md-comments .hype-roulette-track{
  position:absolute;top:0;left:0;height:100%;
  display:flex;align-items:center;gap:14px;padding:0 22px;
  transition:transform 0.95s cubic-bezier(0.18,0.78,0.22,1) !important;
  will-change:transform;
}
.md-comments .hype-roulette-num{
  flex:0 0 auto;opacity:0.7;
  color:rgba(240,240,240,0.78) !important;
  text-decoration:none !important;
  filter:none !important;
}
.md-comments .hype-roulette-num.is-final{
  opacity:1;
  color:var(--hi-accent,#e9c46a) !important;
  text-shadow:0 0 5px rgba(233,196,106,0.5);
}
.md-comments .hype-roulette.tier-hot     { border-color: rgba(233,196,106,0.35); }
.md-comments .hype-roulette.tier-hype    { border-color: rgba(233,196,106,0.55); }
.md-comments .hype-roulette.tier-jackpot { border-color: rgba(255,240,185,0.75); }
.md-comments .hype-roulette.fade-out{
  opacity:0;transform:translate(-50%, -12px);
}

/* ===== Mobile — H2H match pills: don't clip team codes ===== */
@media (max-width: 576px) {
  .h2h-match-list .fix-match-team {
    overflow: visible;
    text-overflow: clip;
  }
  .h2h-match-list .th-team-name {
    font-size: 0.52rem;
  }
}