/* ============================================================================
   Penalty Shootout · "cinta" card
   ----------------------------------------------------------------------------
   Renders on the match-overview FT branch when the fixture was decided
   on penalties. View model built by ShootoutAdapter, partial at
   templates/pages/match/_shootout_card.html.twig.

   Class prefix `psh-*` (penalty-shootout) is neutral — no competitor
   brand names, no project-specific verbs. Composes on top of `.card`
   so background, border, border-radius and outer margin come from the
   shared card chrome; this stylesheet only adds the cinta-specific
   bits (ambient team glow, scoreboard, timeline, dots, keepers).

   Tokens come from tokens.css + themes.css. Team colours arrive per-
   card as `--psh-home` / `--psh-away` via inline style on the article.
   ============================================================================ */

@layer components {
  /* ── Card chrome ────────────────────────────────────────────────────── */

  .psh-card {
    --psh-goal: var(--color-win);
    --psh-miss: var(--color-loss);
    --psh-amber: var(--color-yellow-card);
    --psh-home-glow: color-mix(in oklab, var(--psh-home) 18%, transparent);
    --psh-away-glow: color-mix(in oklab, var(--psh-away) 18%, transparent);

    position: relative;
    overflow: hidden;
    isolation: isolate;
    font-family: var(--font-body);
    color: var(--color-text);
  }

  /* Soft team-coloured ambience bleeding in from each side. Subtle on
     purpose: the eye reads it as "the air is heavier on this side". */
  .psh-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(120% 80% at -10% 50%, var(--psh-home-glow) 0%, transparent 55%),
      radial-gradient(120% 80% at 110% 50%, var(--psh-away-glow) 0%, transparent 55%);
  }

  .psh-card > * {
    position: relative;
    z-index: 1;
  }

  /* ── Header strip ──────────────────────────────────────────────────── */

  .psh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }

  .psh-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-text);
  }

  .psh-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--color-surface-sunken);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
  }

  /* Live state — soft amber tint so a glance reads "ongoing" without
     stealing focus from the cinta below. */
  .psh-status--en-curso {
    color: var(--color-yellow-card);
    background: color-mix(in oklab, var(--color-yellow-card) 12%, transparent);
  }

  /* ── Scoreboard — sits centred under the header strip ──────────────── */

  .psh-scoreboard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 16px;
    margin-bottom: 4px;
    background: var(--color-surface-sunken);
    border-radius: 10px;
  }

  .psh-score-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .psh-score-crest {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  /* Winner reads bold white, loser is muted + strikethrough — mismo
     patrón que usamos en rondas de clasificación. Sin team colours en
     el marcador: deja que la cinta cuente la historia de cada disparo
     y que el scoreboard sólo confirme quién pasó. */
  .psh-score-num {
    font-family: var(--font-title);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: color-mix(in oklab, var(--color-text-muted) 70%, transparent);
  }

  .psh-score-side--winner .psh-score-num {
    color: var(--color-text);
    text-decoration: none;
  }

  /* Live shootouts (no declared winner): both sides read white so the
     scoreboard doesn't muted both teams as if both lost. */
  .psh-card:not([data-winner="home"]):not([data-winner="away"]) .psh-score-num {
    color: var(--color-text);
    text-decoration: none;
  }

  .psh-score-dash {
    font-family: var(--font-title);
    font-size: 22px;
    color: var(--color-text-subtle);
  }

  /* ── Dot strip summary ─────────────────────────────────────────────── */

  .psh-dotstrip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
  }

  .psh-dotstrip__side {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .psh-dotstrip__divider {
    width: 1px;
    height: 12px;
    background: var(--color-border);
  }

  .psh-mini-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .psh-mini-dot--goal {
    background: var(--psh-goal);
    box-shadow: 0 0 8px color-mix(in oklab, var(--psh-goal) 33%, transparent);
  }

  .psh-mini-dot--miss {
    border: 1.5px solid var(--psh-miss);
  }

  /* ── Column headers ────────────────────────────────────────────────── */

  .psh-colhead {
    display: grid;
    grid-template-columns: 1fr 20px 1fr;
    margin-top: 12px;
    margin-bottom: 4px;
  }

  .psh-colhead__cell {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .psh-colhead__cell--home {
    justify-content: flex-end;
    padding-right: 8px;
  }

  .psh-colhead__cell--away {
    justify-content: flex-start;
    padding-left: 8px;
  }

  .psh-colhead__cell img {
    width: 13px;
    height: 13px;
    object-fit: contain;
  }

  .psh-colhead__short {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-subtle);
  }

  .psh-colhead__order {
    font-size: 9px;
    color: var(--color-text-muted);
  }

  /* ── Timeline ──────────────────────────────────────────────────────── */

  .psh-timeline {
    position: relative;
  }

  .psh-timeline__spine {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--color-border-subtle);
    transform: translateX(-50%);
  }

  .psh-round {
    position: relative;
  }

  /* ── Round separator (R1, R2…) ─────────────────────────────────────── */

  .psh-round__sep {
    display: flex;
    align-items: center;
    padding: 7px 0 3px;
    position: relative;
    z-index: 2;
  }

  .psh-round__sep-line {
    flex: 1;
    height: 1px;
    background: var(--color-border-subtle);
  }

  .psh-round__sep-label {
    /* Background the same colour as the card so the spine doesn't bleed
       through the label. */
    background: var(--color-surface);
    padding: 0 8px;
    font-family: var(--font-title);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  /* ── Shot row (one per team per round) ─────────────────────────────── */

  .psh-shot {
    display: grid;
    grid-template-columns: 1fr 20px 1fr;
    align-items: center;
  }

  .psh-shot--home {
    padding: 4px 0 1px;
  }

  .psh-shot--away {
    padding: 1px 0 4px;
  }

  /* Body + avatar grouped so they share a single grid cell (col 1 for
     home, col 3 for away). Without this wrapper avatar would slot into
     col 2 (the 20px spine column) and the dot would spill into col 3,
     pushing it off the spine entirely. */
  .psh-shot__content {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }

  .psh-shot--home .psh-shot__content {
    justify-content: flex-end;
    padding-right: 8px;
  }

  .psh-shot--away .psh-shot__content {
    justify-content: flex-start;
    padding-left: 8px;
  }

  .psh-shot__body {
    min-width: 0;
  }

  .psh-shot--home .psh-shot__body {
    text-align: right;
  }

  .psh-shot__name {
    font-size: 13px;
    font-weight: 500;
    line-height: 17px;
    color: var(--color-text-muted);
  }

  .psh-shot.is-goal .psh-shot__name {
    font-family: var(--font-title);
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--color-text-secondary);
  }

  .psh-shot__reason {
    margin-top: 2px;
    display: flex;
  }

  .psh-shot--home .psh-shot__reason {
    justify-content: flex-end;
  }

  .psh-shot--away .psh-shot__reason {
    justify-content: flex-start;
  }

  /* Avatar — circle with team-aware ring (green if scored, neutral if
     missed). Initial sits underneath via absolute positioning so the
     slot reads even when the photo fails (CORS / 404 / slow network). */
  .psh-shot__avatar {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-surface-sunken);
    box-shadow: 0 0 0 2px var(--color-border);
    overflow: hidden;
    flex-shrink: 0;
    user-select: none;
  }

  .psh-shot.is-goal .psh-shot__avatar {
    box-shadow: 0 0 0 2px var(--psh-goal);
  }

  .psh-shot.is-miss .psh-shot__avatar {
    box-shadow: 0 0 0 2px var(--psh-miss);
  }

  .psh-shot__initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-secondary);
    z-index: 0;
  }

  .psh-shot__avatar img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Dot on the spine — solid if scored, hollow if missed. */
  .psh-shot__dot {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .psh-outcome-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .psh-shot.is-goal .psh-outcome-dot {
    background: var(--psh-goal);
    box-shadow: 0 0 8px color-mix(in oklab, var(--psh-goal) 33%, transparent);
  }

  .psh-shot.is-miss .psh-outcome-dot {
    border: 1.5px solid var(--psh-miss);
  }

  /* Connector tick between home shot and away shot of the same round. */
  .psh-round__tick {
    display: grid;
    grid-template-columns: 1fr 20px 1fr;
  }

  .psh-round__tick > span {
    grid-column: 2;
    justify-self: center;
    width: 1.5px;
    height: 6px;
    background: var(--color-border);
    border-radius: 1px;
  }

  /* Running score checkpoint below each round. */
  .psh-round__score {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
  }

  .psh-round__score-line {
    flex: 1;
    height: 1px;
    background: var(--color-border-subtle);
  }

  .psh-round__score-label {
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
  }

  /* Empty away slot (round decided before the 2nd kicker shot). */
  .psh-shot.is-empty .psh-shot__avatar--empty {
    background: transparent;
    box-shadow: 0 0 0 1.5px var(--color-border-subtle);
  }

  .psh-shot.is-empty .psh-outcome-dot--empty {
    border: 1.5px dashed var(--color-border);
  }

  .psh-shot.is-empty .psh-shot__name {
    color: var(--color-text-muted);
  }

  /* ── Reason pills (Fuera / Parada / Palo) ──────────────────────────── */

  .psh-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }

  /* Fail-the-target outcomes share the red palette — palo + fuera son
     ambos "no entró por culpa del lanzador". Parada queda amber porque
     el mérito es del portero, no un fallo equivalente. */
  .psh-pill--off-target,
  .psh-pill--post {
    color: var(--psh-miss);
    background: color-mix(in oklab, var(--psh-miss) 14%, transparent);
  }

  .psh-pill--saved {
    color: var(--psh-amber);
    background: color-mix(in oklab, var(--psh-amber) 14%, transparent);
  }

  /* ── Keepers footer ────────────────────────────────────────────────── */

  .psh-keepers {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px;
    background: var(--color-surface-sunken);
    border-radius: 10px;
    margin-top: 12px;
  }

  .psh-keeper {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .psh-keeper--away {
    flex-direction: row-reverse;
  }

  .psh-keeper__avatar {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-surface-hover);
    box-shadow: 0 0 0 2px var(--ring, var(--color-border));
    overflow: hidden;
    flex-shrink: 0;
  }

  .psh-keeper__initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-secondary);
    z-index: 0;
  }

  .psh-keeper__avatar img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .psh-keeper__info {
    flex: 1;
    min-width: 0;
  }

  .psh-keeper--away .psh-keeper__info {
    text-align: right;
  }

  .psh-keeper__name {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
  }

  .psh-keeper__meta {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    color: var(--color-text-muted);
  }

  .psh-keeper__saves {
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
    color: var(--psh-amber);
  }

  .psh-keeper__divider {
    width: 1px;
    height: 100%;
    background: var(--color-border);
    opacity: 0.5;
  }
}