/**
 * Match Single Page Styles
 * Estilos específicos para a página single-aps_jogo.php
 * 
 * @package SuperPortistas
 * @since 2.0.0
 */

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Sticky Header (as regras vinham duplicadas num <style> do componente) */
#match-header-sticky {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.95);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#match-header-sticky.shadow-lg {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

#match-header-sticky [title]:hover {
    cursor: help;
}

/* Estado «ao vivo» do placar compacto: tinta do design system. */
.sp-match-live-ink {
    color: var(--sp-live, #dc2626);
}

/* Scroll Margin for Sections */
section[id$="-section"] {
    scroll-margin-top: calc(var(--sp-site-header-offset) + 4rem);
}


/* Section Spacing */
.space-y-6 > * + * {
    margin-top: 1.5rem;
}

/* Premium Card Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Match cards use design system surfaces — no blue gradient override */
.sp-match-layout .sp-widget,
.sp-match-layout .sp-card {
    animation: fadeInUp 0.6s ease-out;
}

/* Pulse Animation for Live Elements */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}
    50% {
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
    }
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Loading States */
.htmx-indicator {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Chat Scrollbar */
#match-chat-messages {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

#match-chat-messages::-webkit-scrollbar {
    width: 6px;
}

#match-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

#match-chat-messages::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
}

#match-chat-messages::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.7);
}

/* Tira de tabs de jornal - Design System Super Portistas
   (a declaração do wrapper vive junto do sticky, mais abaixo) */
.match-tabs-premium-navigation {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid var(--sp-border, #dfe5ee);
}

.match-tabs-premium-navigation::-webkit-scrollbar {
    display: none;
}

.match-tabs-premium-navigation .match-tab-premium-button {
    flex: 0 0 auto;
}

/* 7 rótulos («Classificação», «Alinhamentos») pedem ~120px cada: só a partir
   de lg cabem sem rolar. */
@media (min-width: 1024px) {
    .match-tabs-premium-navigation {
        flex-wrap: wrap;
        overflow: visible;
    }
}

/* Tabs de jornal planas em azul Porto (mockup) */
.match-tab-premium-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 40px;
    padding: 0 0.75rem;
    background: transparent;
    border: none;
    border-radius: 8px 8px 0 0;
    font-family: 'Libre Franklin', ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sp-ink-strong, #33415c);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    outline: none;
    white-space: nowrap;
}

.match-tab-premium-button:focus-visible {
    outline: 2px solid var(--sp-porto, #004b9b);
    outline-offset: 2px;
}

.match-tab-premium-button:hover:not(.match-tab-premium-active) {
    color: var(--sp-porto, #004b9b);
    box-shadow: inset 0 -3px 0 var(--sp-on-navy, #b9cce4);
}

.match-tab-premium-button.match-tab-premium-active {
    background: var(--sp-surface-muted, #f4f7fb);
    color: var(--sp-porto, #004b9b);
    font-weight: 800;
    box-shadow: inset 0 -3px 0 var(--sp-porto, #004b9b);
}

@media (min-width: 768px) {
    .match-tab-premium-button {
        gap: 0.5rem;
        height: 44px;
        padding: 0 1rem;
    }
}

.match-tab-label {
    font-size: 0.6875rem;
    font-weight: inherit;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

@media (min-width: 768px) {
    .match-tab-label {
        font-size: 0.75rem;
    }
}

/* Tab do jogo ao vivo — a vermelho */
.match-tab-premium-button.match-tab-premium-live {
    color: var(--sp-live, #dc2626);
}

.match-tab-premium-button.match-tab-premium-live.match-tab-premium-active {
    color: var(--sp-live, #dc2626);
    box-shadow: inset 0 -3px 0 var(--sp-live, #dc2626);
}

.match-tab-live-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--sp-live, #dc2626);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5);
    animation: match-live-pulse 1.6s ease-in-out infinite;
}

@keyframes match-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
    50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
}

.match-tab-premium-button.match-tab-premium-inactive {
    background: transparent;
    color: var(--sp-ink-strong, #33415c);
}

.match-tabs-content {
    position: relative;
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Loading State */
.match-tabs-content .loading-overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* A barra fica colada abaixo do header do site + barra compacta do jogo. O
   offset do site vem da var (muda em md e em lg); a altura da barra do jogo
   acompanha o escudo, que cresce em sm e em md (match-header-sticky.php). */
.match-tabs-premium-wrapper {
    --sp-match-bar-h: 3.5rem;
    position: sticky;
    top: calc(var(--sp-site-header-offset) + var(--sp-match-bar-h));
    z-index: 30;
    scroll-margin-top: calc(var(--sp-site-header-offset) + var(--sp-match-bar-h));
    margin: 0 -1rem 1.5rem;
    padding: 0.5rem 1rem 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sp-border, #dfe5ee);
    box-shadow: 0 2px 8px rgba(6, 21, 43, 0.06);
}

@media (min-width: 640px) {
    .match-tabs-premium-wrapper {
        --sp-match-bar-h: 4rem;
    }
}

/* Sinaliza que a faixa rola — o corte na margem só se lê num mockup. */
@media (min-width: 768px) {
    .match-tabs-premium-wrapper {
        --sp-match-bar-h: 4.5rem;
    }

    .match-tabs-premium-wrapper::after {
        content: "";
        position: absolute;
        top: 0.5rem;
        right: 0;
        bottom: 1px;
        width: 24px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
        pointer-events: none;
    }
}

@media (min-width: 1024px) {
    .match-tabs-premium-wrapper {
        margin-bottom: 2rem;
    }

    .match-tabs-premium-wrapper::after {
        display: none;
    }
}

/* Alpine.js x-cloak - Hide elements until Alpine is ready */
[x-cloak] {
    display: none !important;
}

/* Densidade do conteúdo das abas: o mínimo alto do desktop deixaria um vazio
   grande em telemóvel enquanto a aba carrega. */
.match-tabs-content {
    min-height: 300px;
}

#match-header-sticky .max-w-content {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

@media (min-width: 768px) {
    .match-tabs-content {
        min-height: 400px;
    }

    #match-header-sticky .max-w-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Tab Estatísticas: Accordions */
.match-stats-accordions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.match-stats-accordion-item {
    border: 1px solid rgba(229, 231, 235, 1);
    border-radius: 0.75rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.match-stats-accordion-heading {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.match-stats-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    text-align: left;
    color: rgba(17, 24, 39, 1);
    background: rgba(249, 250, 251, 1);
    border: none;
    cursor: pointer;
    font: inherit;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.match-stats-accordion-trigger:hover {
    background: rgba(243, 244, 246, 1);
    color: rgba(55, 65, 81, 1);
}

.match-stats-accordion-trigger:focus {
    outline: 2px solid var(--sp-porto, #004b9b);
    outline-offset: 2px;
}

.match-stats-accordion-chevron {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

.match-stats-accordion-chevron-open {
    transform: rotate(180deg);
}

.match-stats-accordion-panel {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid rgba(229, 231, 235, 1);
    background: #fff;
}

.match-stats-accordion-panel > * + * {
    margin-top: 1rem;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-pulse,
    .animate-ping,
    .animate-spin {
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .match-tab-premium-button {
        border-width: 3px;
    }
    
    .match-tab-premium-button.match-tab-premium-active {
        border-width: 4px;
    }
}

/* Print Styles */
@media print {
    #match-header-sticky {
        position: static;
    }
    
    .no-print {
        display: none;
    }
}

/* ==========================================================================
   Scoreboard hero — herói de placar em gradiente azul (redesign 2026)
   ========================================================================== */
.sp-match-hero {
    background: linear-gradient(120deg, var(--sp-porto-bright, #0a4ea3) 0%, var(--sp-navy-mid, #052d5e) 70%, var(--sp-navy-soft, #041f42) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.sp-match-hero::after {
    /* Brilho subtil no canto superior direito (sem depender de imagem) */
    content: "";
    position: absolute;
    top: -60%;
    right: -10%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.sp-match-hero__inner {
    position: relative;
    z-index: 1;
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
}

.sp-match-hero__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.sp-match-hero__competition {
    font-family: 'Libre Franklin', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.72);
}

.sp-match-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 26px;
    padding: 0 12px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.14);
    font-family: 'Libre Franklin', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sp-match-hero__status--live {
    background: var(--sp-live, #dc2626);
}

.sp-match-hero__live-dot {
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: #fff;
    animation: sp-match-hero-pulse 1.2s infinite;
}

@keyframes sp-match-hero-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}

/* Estado base = o placar compacto que o designer desenhou em Mobile.dc.html:
   escudo em cima, nome por baixo, três colunas com o resultado ao centro. */
.sp-match-hero__teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
}

.sp-match-hero__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 0;
    text-align: center;
}

.sp-match-hero__team--home,
.sp-match-hero__team--away {
    justify-content: center;
    text-align: center;
}

.sp-match-hero__team-name {
    order: 2;
    width: 100%;
    font-family: 'Source Serif 4', Georgia, Cambria, 'Times New Roman', serif;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.sp-match-hero__badge {
    order: 1;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.sp-match-hero__team--home .sp-match-hero__badge {
    background: #fff;
}

.sp-match-hero__badge img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.sp-match-hero__badge-initials {
    font-family: 'Libre Franklin', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 800;
    color: #fff;
}

.sp-match-hero__center {
    text-align: center;
    min-width: 0;
    flex-shrink: 0;
}

.sp-match-hero__score {
    font-family: 'Source Serif 4', Georgia, Cambria, 'Times New Roman', serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
}

.sp-match-hero--live .sp-match-hero__score {
    color: #fff;
}

.sp-match-hero__score-sep {
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.625rem;
}

.sp-match-hero__vs {
    font-family: 'Source Serif 4', Georgia, Cambria, 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.sp-match-hero__kick {
    font-family: 'Libre Franklin', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.25rem;
}

@media (min-width: 640px) {
    /* A partir de sm o escudo volta para o lado do nome, como no desktop. */
    .sp-match-hero__teams {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .sp-match-hero__team {
        flex-direction: row;
        gap: 0.875rem;
        flex: 1 1 200px;
    }

    .sp-match-hero__team--home {
        justify-content: flex-end;
        text-align: right;
    }

    .sp-match-hero__team--away {
        justify-content: flex-start;
        text-align: left;
    }

    .sp-match-hero__badge {
        order: 0;
        width: 52px;
        height: 52px;
    }

    .sp-match-hero__badge img {
        width: 34px;
        height: 34px;
    }

    .sp-match-hero__team-name {
        order: 0;
        width: auto;
        font-size: 1.375rem;
    }

    .sp-match-hero__center {
        min-width: 110px;
    }

    .sp-match-hero__score {
        font-size: 2.5rem;
    }

    .sp-match-hero__score-sep {
        font-size: 2rem;
    }

    .sp-match-hero__vs {
        font-size: 2rem;
    }
}

@media (min-width: 1024px) {
    .sp-match-hero__team-name {
        font-size: 1.625rem;
    }

    .sp-match-hero__score {
        font-size: 3rem;
    }

    .sp-match-hero__score-sep {
        font-size: 2.5rem;
    }

    .sp-match-hero__vs {
        font-size: 2.5rem;
    }
}

/* ==========================================================================
   Alinhamento com o mockup (redesign 2026) — apenas a página de jogo
   Tudo scoped a .sp-match-layout: não altera markup, Alpine, dados nem outras
   páginas. Objetivo: cartões planos "de jornal" (borda subtil #DFE5EE,
   canto 12px, sombra leve) e menos ornamento herdado do design antigo.
   Laranja continua reservado à gamificação — acentos de secção usam azul porto.
   ========================================================================== */

/* Superfícies de cartão planas e coerentes, como no mockup.
   Unifica o raio a 12px e neutraliza sombras pesadas (shadow-lg) que alguns
   componentes empilham por cima do .sp-widget. */
.sp-match-layout .sp-widget {
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(6, 21, 43, 0.04);
}

/* Elementos internos com sombras pesadas do design antigo → planos */
.sp-match-layout .sp-widget .shadow-lg {
    box-shadow: none;
}
.sp-match-layout .sp-widget .shadow-md {
    box-shadow: 0 1px 2px rgba(6, 21, 43, 0.05);
}

/* Cartões de evento na timeline: borda fina em vez de border-2, mais próximo
   das linhas planas do mockup (mantém a cor como acento). */
.sp-match-layout .sp-widget .border-2 {
    border-width: 1px;
}

/* Caixas de ícone dos cabeçalhos: planas (sem sombra própria), como pede o
   visual mais limpo do mockup. Cor/gradiente porto mantêm-se. */
.sp-match-layout .sp-widget .rounded-xl.flex.items-center.justify-center,
.sp-match-layout .sp-widget .rounded-lg.flex.items-center.justify-center {
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Acordeões da Estatística: cabeçalhos-etiqueta ao estilo do mockup
   (rótulo em maiúsculas + acento vertical azul porto), fundo branco.
   -------------------------------------------------------------------------- */
.sp-match-layout .match-stats-accordion-item {
    box-shadow: 0 1px 2px rgba(6, 21, 43, 0.04);
    border-color: var(--sp-border, #dfe5ee);
}

.sp-match-layout .match-stats-accordion-trigger {
    background: #fff;
    padding: 1.125rem 1.25rem;
}

.sp-match-layout .match-stats-accordion-trigger:hover {
    background: var(--sp-surface-muted, #f4f7fb);
    color: var(--sp-ink, #0f172a);
}

.sp-match-layout .match-stats-accordion-trigger > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: 'Libre Franklin', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sp-ink, #0f172a);
}

.sp-match-layout .match-stats-accordion-trigger > span:first-child::before {
    content: "";
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: var(--sp-porto, #004b9b);
    flex-shrink: 0;
}

/* Painel aberto: manter separador subtil, tipografia do corpo do mockup */
.sp-match-layout .match-stats-accordion-panel {
    border-top-color: var(--sp-border, #dfe5ee);
}

/* ==========================================================================
   Campo de alinhamentos (Alinhamentos.dc.html)
   A altura era um `height: 500px` inline com uma regra CSS que dependia da
   string exacta dentro do atributo `style` — qualquer edição do template
   desligava-a em silêncio. Passa a token, e o relvado passa às tintas do
   design system (--sp-pitch) em vez do verde solto do Tailwind.
   ========================================================================== */
:root {
    --sp-pitch-h: 23.75rem;
}

@media (min-width: 640px) {
    :root {
        --sp-pitch-h: 27.5rem;
    }
}

@media (min-width: 768px) {
    :root {
        --sp-pitch-h: 30rem;
    }
}

@media (min-width: 1024px) {
    /* 520px — valor do mockup. Abaixo disto o campo comia a dobra inteira. */
    :root {
        --sp-pitch-h: 32.5rem;
    }
}

.sp-match-pitch {
    position: relative;
    width: 100%;
    height: var(--sp-pitch-h, 23.75rem);
    padding: 1rem;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--sp-pitch, #15803d) 0%, var(--sp-pitch-deep, #166534) 100%);
}

@media (min-width: 768px) {
    .sp-match-pitch {
        padding: 1.5rem;
    }
}

.sp-match-pitch__line {
    position: absolute;
    border-color: rgba(255, 255, 255, 0.32);
    pointer-events: none;
}

.sp-match-pitch__line--box {
    inset: 16px;
    border: 3px solid rgba(255, 255, 255, 0.32);
    border-radius: 6px;
}

.sp-match-pitch__line--half {
    top: 50%;
    left: 16px;
    right: 16px;
    height: 0;
    border-top: 2px solid rgba(255, 255, 255, 0.32);
}

.sp-match-pitch__line--circle {
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-radius: 9999px;
}

.sp-match-pitch__line--area-top,
.sp-match-pitch__line--area-bottom {
    left: 50%;
    width: 220px;
    max-width: 60%;
    height: 70px;
    transform: translateX(-50%);
    border: 2px solid rgba(255, 255, 255, 0.28);
}

.sp-match-pitch__line--area-top {
    top: 16px;
    border-top: none;
}

.sp-match-pitch__line--area-bottom {
    bottom: 16px;
    border-bottom: none;
}

.sp-match-pitch__player {
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
}

.sp-match-pitch__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0 auto;
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: #fff;
    color: var(--sp-ink, #0f172a);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: transform 0.2s ease;
}

.sp-match-pitch__player:hover .sp-match-pitch__dot {
    transform: scale(1.1);
}

/* Apelido em telemóvel: o nome completo não cabe entre dois jogadores. */
.sp-match-pitch__name {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}

.sp-match-pitch__name-full {
    display: none;
}

@media (min-width: 640px) {
    .sp-match-pitch__dot {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
}

@media (min-width: 768px) {
    .sp-match-pitch__name {
        font-size: 11px;
    }

    .sp-match-pitch__name-short {
        display: none;
    }

    .sp-match-pitch__name-full {
        display: inline;
    }
}

@media (min-width: 1024px) {
    .sp-match-pitch__dot {
        width: 32px;
        height: 32px;
    }
}

/* Ponto de jogador indisponível (lesões/castigos): tinta de erro do design
   system. Era `bg-orange-500`, e o laranja é kicker editorial, não estado. */
.sp-match-out-dot {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--sp-danger, #dc2626);
}

/* ==========================================================================
   Corpo do «Sobre o Jogo» — texto de artigo dentro da ficha.
   Vinha de um <style> inline no componente, com hex à solta e um bloco
   `max-width` a desfazer o desktop.
   ========================================================================== */
.match-content-prose {
    font-family: 'Source Serif 4', Georgia, Cambria, 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.75;
    color: var(--sp-ink-muted, #475569);
}

@media (min-width: 768px) {
    .match-content-prose {
        font-size: 18px;
    }
}

.match-content-prose h1,
.match-content-prose h2,
.match-content-prose h3,
.match-content-prose h4 {
    color: var(--sp-ink, #0f172a);
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

.match-content-prose h2 {
    font-size: 20px;
    border-bottom: 2px solid var(--sp-border, #dfe5ee);
    padding-bottom: 0.5em;
}

@media (min-width: 768px) {
    .match-content-prose h2 {
        font-size: 22px;
    }
}

.match-content-prose p {
    margin-bottom: 1.25em;
}

.match-content-prose a {
    color: var(--sp-porto, #004b9b);
    text-decoration: underline;
    transition: color 0.2s;
}

.match-content-prose a:hover {
    color: var(--sp-porto-hover, #003d7a);
}

.match-content-prose ul,
.match-content-prose ol {
    margin: 1.25em 0;
    padding-left: 1.75em;
}

.match-content-prose li {
    margin: 0.5em 0;
}

.match-content-prose img {
    border-radius: 0.5rem;
    margin: 1.5em 0;
    max-width: 100%;
    height: auto;
}

.match-content-prose blockquote {
    border-left: 4px solid var(--sp-porto, #004b9b);
    padding-left: 1em;
    margin: 1.5em 0;
    font-style: italic;
    color: var(--sp-ink-muted, #475569);
}

.match-content-prose code {
    background-color: var(--sp-surface-subtle, #eef2f7);
    padding: 0.125em 0.375em;
    border-radius: 0.25rem;
    font-size: 0.875em;
    color: var(--sp-danger, #dc2626);
}

.match-content-prose pre {
    background-color: var(--sp-navy, #06152b);
    color: var(--sp-surface, #fff);
    padding: 1em;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.5em 0;
}

.match-content-prose pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

/* ==========================================================================
   Cronologia de eventos.
   O mockup desenha a linha ao centro com os cartões a 50%. A 320px isso dá
   ~92px por cartão, com um ícone de 40px lá dentro. Abaixo de md a calha e o
   nó saem e os cartões ocupam a largura toda; casa e fora continuam a
   distinguir-se pelo alinhamento e pela cor da borda, sem `order` a saltar.
   ========================================================================== */
.sp-match-events {
    position: relative;
}

.sp-match-events__rail,
.sp-match-events__node,
.sp-match-events__spacer {
    display: none;
}

.sp-match-events__row {
    display: flex;
    align-items: center;
}

.sp-match-events__side {
    flex: 1 1 auto;
    min-width: 0;
}

.sp-match-events__side--home {
    text-align: right;
}

.sp-match-events__side--away {
    text-align: left;
}

.sp-match-events__card {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;
    background: var(--sp-surface, #fff);
    box-shadow: 0 1px 2px rgba(6, 21, 43, 0.05);
    text-align: left;
}

/* O ícone é decorativo e não pode roubar largura ao nome do jogador. */
.sp-match-events__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    color: #fff;
    font-size: 1rem;
}

@media (min-width: 768px) {
    .sp-match-events__rail {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: var(--sp-surface-subtle, #eef2f7);
    }

    .sp-match-events__node {
        display: block;
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        border-radius: 9999px;
        border: 4px solid var(--sp-surface, #fff);
        box-shadow: 0 1px 2px rgba(6, 21, 43, 0.08);
    }

    .sp-match-events__spacer {
        display: block;
        flex: 1 1 0;
    }

    .sp-match-events__row {
        position: relative;
        z-index: 1;
    }

    .sp-match-events__side {
        flex: 1 1 0;
    }

    .sp-match-events__side--home {
        padding-right: 1.5rem;
    }

    .sp-match-events__side--away {
        padding-left: 1.5rem;
    }

    .sp-match-events__card {
        max-width: 28rem;
        padding: 0.75rem 1rem;
    }

    .sp-match-events__icon {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.125rem;
    }
}