:root {
  --page-bg: #f3f4f6;
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --text-strong: #2f2f2f;
  --text-body: #555555;
  --text-muted: #b7b7b7;
  --text-time: #8d8d8d;
  --line: #d5d5d5;
  --green: #5a9d67;
  --red: #c34a4a;
  --yellow: #efb62d;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  color: var(--text-body);
  font-family: Arial, Helvetica, sans-serif;
}

body {
  min-height: 100vh;
}

.page {
  width: 100%;
  padding: 24px 16px 40px;
  display: flex;
  justify-content: center;
}

.card {
  width: 100%;
  max-width: 420px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.page-title {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.2;
  color: var(--text-strong);
  font-weight: 700;
}

.page-subtitle {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.4;
  color: #6b7280;
}

.widget-shell {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 8px;
  overflow: hidden;
}

.debug-box {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  font-size: 12px;
  line-height: 1.4;
  color: #475569;
}

/* =========================================================
   TIMELINE OPTA — skin visual
   Não altera top/left/right inline da Opta
   ========================================================= */

#widget-timeline-custom {
  --tl-bg: #ffffff;
  --tl-text: #555555;
  --tl-muted: #b7b7b7;
  --tl-time: #8d8d8d;
  --tl-line: #d3d3d3;
  --tl-in: #5a9d67;
  --tl-out: #c34a4a;
  --tl-yellow: #efb62d;
  --tl-gap: 18px;
  --tl-name-size: 13px;
  --tl-meta-size: 10px;
  --tl-time-size: 14px;
  --tl-family: Arial, Helvetica, sans-serif;
}

#widget-timeline-custom,
#widget-timeline-custom .Opta,
#widget-timeline-custom .Opta > div,
#widget-timeline-custom .Opta table,
#widget-timeline-custom .Opta tbody,
#widget-timeline-custom .Opta tr,
#widget-timeline-custom .Opta td,
#widget-timeline-custom .Opta ul,
#widget-timeline-custom .Opta li {
  background: var(--tl-bg) !important;
  font-family: var(--tl-family) !important;
  color: var(--tl-text) !important;
  box-shadow: none !important;
}

/* Limpeza de elementos que poluem o visual do teste */
#widget-timeline-custom .Opta-PlayerImage,
#widget-timeline-custom .Opta-Image-Player,
#widget-timeline-custom .Opta-Image-Event {
  display: none !important;
}

/* Header */
#widget-timeline-custom .Opta-MatchHeader {
  border: 0 !important;
  padding: 0 0 10px !important;
  margin: 0 0 8px !important;
  background: #fff !important;
}

#widget-timeline-custom .Opta-MatchHeader-Details {
  display: none !important;
}

#widget-timeline-custom .Opta-Date {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #5f5f5f !important;
  text-align: center !important;
  margin-bottom: 8px !important;
}

/* Linha central / barra */
#widget-timeline-custom .Opta-Timeline-Bar,
#widget-timeline-custom .Opta-Timeline .Opta-Bar,
#widget-timeline-custom .Opta-Vertical .Opta-Bar,
#widget-timeline-custom .Opta-Timeline-Vertical .Opta-Bar,
#widget-timeline-custom .Opta-TimeBar {
  background: var(--tl-line) !important;
  border-color: var(--tl-line) !important;
  width: 1px !important;
}

/* Divisores */
#widget-timeline-custom .Opta-PeriodDivider,
#widget-timeline-custom .Opta-Period-Divider,
#widget-timeline-custom .Opta-Timeline .Opta-Divider,
#widget-timeline-custom .Opta-Divider {
  color: var(--tl-time) !important;
  border-color: var(--tl-line) !important;
  background: transparent !important;
}

/* Tempo / minuto */
#widget-timeline-custom .Opta-Time,
#widget-timeline-custom .Opta-Minute,
#widget-timeline-custom .Opta-EventTime,
#widget-timeline-custom .Opta-Timeline time,
#widget-timeline-custom .Opta-MatchEvent time {
  font-size: var(--tl-time-size) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--tl-time) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Evento */
#widget-timeline-custom .Opta-MatchEvent {
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 26px !important;
}

/* Alinhamento dos lados */
#widget-timeline-custom .Opta-MatchEvent.Opta-Home,
#widget-timeline-custom .Opta-MatchEvent.Opta-Team-0,
#widget-timeline-custom .Opta-MatchEvent[data-side="home"] {
  text-align: right !important;
}

#widget-timeline-custom .Opta-MatchEvent.Opta-Away,
#widget-timeline-custom .Opta-MatchEvent.Opta-Team-1,
#widget-timeline-custom .Opta-MatchEvent[data-side="away"] {
  text-align: left !important;
}

#widget-timeline-custom .Opta-MatchEvent.Opta-Home > *,
#widget-timeline-custom .Opta-MatchEvent.Opta-Team-0 > * {
  margin-right: var(--tl-gap) !important;
}

#widget-timeline-custom .Opta-MatchEvent.Opta-Away > *,
#widget-timeline-custom .Opta-MatchEvent.Opta-Team-1 > * {
  margin-left: var(--tl-gap) !important;
}

/* Nome principal */
#widget-timeline-custom .Opta-Player,
#widget-timeline-custom .Opta-PlayerName,
#widget-timeline-custom .Opta-Name,
#widget-timeline-custom .Opta-MatchEvent strong,
#widget-timeline-custom .Opta-MatchEvent b,
#widget-timeline-custom .Opta-MatchEvent .Opta-Label {
  font-size: var(--tl-name-size) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  color: var(--tl-text) !important;
}

/* Linha secundária */
#widget-timeline-custom .Opta-Assist,
#widget-timeline-custom .Opta-GoalText,
#widget-timeline-custom .Opta-EventNote,
#widget-timeline-custom .Opta-Qualifier,
#widget-timeline-custom .Opta-SubText,
#widget-timeline-custom .Opta-MatchEvent small {
  display: block !important;
  margin-top: 2px !important;
  font-size: var(--tl-meta-size) !important;
  line-height: 1.05 !important;
  color: var(--tl-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}

/* Entrada / saída */
#widget-timeline-custom .Opta-SubIn,
#widget-timeline-custom .Opta-Sub-On,
#widget-timeline-custom .Opta-PlayerIn,
#widget-timeline-custom .Opta-In,
#widget-timeline-custom .Opta-MatchEvent .is-in {
  color: var(--tl-in) !important;
}

#widget-timeline-custom .Opta-SubOut,
#widget-timeline-custom .Opta-Sub-Off,
#widget-timeline-custom .Opta-PlayerOut,
#widget-timeline-custom .Opta-Out,
#widget-timeline-custom .Opta-MatchEvent .is-out {
  color: var(--tl-out) !important;
}

/* Ícones */
#widget-timeline-custom .Opta-IconGoal,
#widget-timeline-custom .Opta-IconSubstitution,
#widget-timeline-custom .Opta-IconSub,
#widget-timeline-custom .Opta-IconYellowCard,
#widget-timeline-custom .Opta-IconYellow,
#widget-timeline-custom .Opta-IconRedCard,
#widget-timeline-custom .Opta-IconOwnGoal,
#widget-timeline-custom .Opta-Icon {
  transform: scale(0.85) !important;
  transform-origin: center center !important;
}

#widget-timeline-custom .Opta-IconGoal,
#widget-timeline-custom .Opta-IconOwnGoal {
  color: #4f4f4f !important;
}

#widget-timeline-custom .Opta-IconYellowCard,
#widget-timeline-custom .Opta-IconYellow {
  color: var(--tl-yellow) !important;
  background: transparent !important;
}

/* Escudos */
#widget-timeline-custom .Opta-Image-Team img {
  visibility: visible !important;
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
}

/* Placar / divisores */
#widget-timeline-custom .Opta-Divider.Opta-Dash,
#widget-timeline-custom .Opta-Divider.Opta-Versus,
#widget-timeline-custom .Opta-scores abbr,
#widget-timeline-custom .Opta-Score abbr {
  color: #666 !important;
  font-weight: 500 !important;
}

/* Remove bold excessivo herdado */
#widget-timeline-custom .Opta strong,
#widget-timeline-custom .Opta b,
#widget-timeline-custom .Opta th {
  font-weight: 500 !important;
}

@media (max-width: 480px) {
  .page {
    padding: 12px 10px 24px;
  }

  .card {
    padding: 14px;
  }

  #widget-timeline-custom {
    --tl-gap: 14px;
    --tl-name-size: 12px;
    --tl-meta-size: 9px;
    --tl-time-size: 13px;
  }

  #widget-timeline-custom .Opta-MatchEvent {
    min-height: 24px !important;
  }

  #widget-timeline-custom .Opta-Image-Team img {
    width: 18px !important;
    height: 18px !important;
  }
}