:root {
      --accent: #a01323;
      --ink: #1a1a1a;
      --ink-soft: #555;
      --ink-muted: #7a7a7a;
      --paper: #f5f1e8;
      --rule: #d8d2c4;
      --rule-soft: #e6e1d3;
      --green: #2f6b4f;
      --amber: #b3801a;
      --max: 760px;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background: var(--paper);
      color: var(--ink);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      font-size: 17px;
      border-top: 5px solid var(--accent);
    }
    body::before {
      content: "";
      display: block;
      height: 3px;
      background: var(--ink);
      width: 100%;
    }
    h1, h2, h3 {
      font-family: "Charter", "Source Serif Pro", "Iowan Old Style", "Georgia", "Times New Roman", serif;
      color: var(--ink);
      font-weight: 600;
      letter-spacing: -.005em;
    }
    h1 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); margin: 0 0 .6rem; line-height: 1.12; letter-spacing: -.018em; }
    h2 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); margin: 2.4rem 0 .8rem; line-height: 1.22; }
    p { margin: 0 0 .9rem; }
    .container { max-width: var(--max); margin: 0 auto; padding: 0 1.4rem; }

    .hero {
      padding: 2.4rem 0 1.6rem;
      border-bottom: 1px solid var(--rule);
      margin-bottom: 1.8rem;
    }
    .hero .masthead {
      display: flex;
      align-items: center;
      gap: .8rem;
      margin-bottom: 1rem;
      padding-bottom: .9rem;
      border-bottom: 1px solid var(--rule);
    }
    .hero .crest {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      border-radius: 50%;
      background: linear-gradient(180deg, var(--accent) 0 50%, var(--ink) 50% 100%);
      box-shadow: 0 0 0 1px var(--rule);
    }
    .hero .label {
      font-family: "Charter", Georgia, serif;
      font-style: italic;
      font-size: .9rem;
      color: var(--ink-soft);
    }
    .hero .label b { color: var(--accent); font-weight: 600; font-style: normal; }
    .hero .lede {
      font-size: 1.08rem;
      color: var(--ink-soft);
      max-width: 60ch;
      margin: .6rem 0 0;
      line-height: 1.5;
    }

    /* Key numbers — 3 columns: Arrasate / Siviero / Demichelis */
    .keynums {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      margin: 1.4rem 0 2rem;
    }
    .keynums > div {
      padding: 1rem 1.1rem;
      border-right: 1px solid var(--rule-soft);
    }
    .keynums > div:last-child { border-right: 0; }
    .keynums .who {
      font-size: .72rem;
      color: var(--ink-muted);
      text-transform: uppercase;
      letter-spacing: .1em;
      font-weight: 600;
      margin-bottom: .4rem;
    }
    .keynums .num {
      font-family: "Charter", Georgia, serif;
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.1;
      font-variant-numeric: tabular-nums;
    }
    .keynums .num .small { font-size: 1rem; color: var(--ink-muted); font-weight: 500; }
    .keynums .lbl {
      font-size: .75rem;
      color: var(--ink-muted);
      margin-top: .3rem;
      line-height: 1.3;
    }

    /* Main table */
    .table-wrap { overflow-x: auto; margin: 1rem 0 1.4rem; }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: .94rem;
      font-variant-numeric: tabular-nums;
    }
    th, td {
      padding: .65rem .7rem;
      text-align: right;
      border-bottom: 1px solid var(--rule-soft);
    }
    th:first-child, td:first-child,
    th.coach, td.coach,
    th.range, td.range { text-align: left; }
    thead th {
      border-bottom: 2px solid var(--ink);
      border-top: 1px solid var(--ink);
      background: transparent;
      color: var(--ink);
      font-weight: 600;
      font-size: .76rem;
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    td.n {
      font-family: "Charter", Georgia, serif;
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--accent);
    }
    td.n.dim { color: transparent; }
    td.pts {
      font-weight: 600;
      font-family: "Charter", Georgia, serif;
      font-size: 1.05rem;
    }
    td.ppg { color: var(--ink-soft); }
    .coach-pill {
      display: inline-block;
      padding: .12rem .55rem;
      border-radius: 999px;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .02em;
    }
    .coach-pill.arr { background: #fce7eb; color: var(--accent); }
    .coach-pill.dem { background: #e1eee5; color: var(--green); }
    .coach-pill.int { background: #fbf3e8; color: var(--amber); }
    .coach-pill.mix { background: #efeae0; color: var(--ink-soft); }
    td.range { color: var(--ink); font-feature-settings: "tnum"; }
    tr.group-start td { border-top: 1px solid var(--rule); padding-top: .85rem; }

    .note {
      background: #fbf7ec;
      border-left: 3px solid var(--amber);
      padding: .9rem 1.1rem;
      margin: 1.6rem 0;
      font-size: .9rem;
      color: var(--ink-soft);
      line-height: 1.55;
    }
    .note b { color: var(--ink); font-weight: 600; }

    /* Highlight callouts — big "before/after" tiles */
    .highlights {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: .9rem;
      margin: 1.4rem 0 2rem;
    }
    .h-tile {
      background: #fff;
      border: 1px solid var(--rule);
      border-top: 3px solid var(--accent);
      padding: 1rem 1.1rem;
    }
    .h-tile .h-label {
      font-size: .72rem;
      color: var(--ink-muted);
      text-transform: uppercase;
      letter-spacing: .08em;
      font-weight: 600;
      margin-bottom: .55rem;
    }
    .h-tile .h-values {
      display: flex;
      align-items: baseline;
      gap: .35rem;
      font-family: "Charter", Georgia, serif;
      font-variant-numeric: tabular-nums;
    }
    .h-tile .h-from {
      font-size: 1.15rem;
      color: var(--ink-muted);
      text-decoration: line-through;
    }
    .h-tile .h-arrow {
      color: var(--accent);
      font-weight: 700;
      font-size: 1rem;
    }
    .h-tile .h-to {
      font-size: 1.55rem;
      font-weight: 700;
      color: var(--ink);
    }
    .h-tile .h-delta {
      font-size: .82rem;
      color: var(--green);
      margin-top: .35rem;
      font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
    }
    .h-tile .h-delta.bad { color: var(--accent); }

    /* Compact comparison table — used for per-theme stat groups */
    table.compare {
      width: 100%;
      border-collapse: collapse;
      font-size: .92rem;
      font-variant-numeric: tabular-nums;
      margin: .4rem 0 1.6rem;
    }
    table.compare th, table.compare td {
      padding: .5rem .65rem;
      text-align: right;
      border-bottom: 1px solid var(--rule-soft);
    }
    table.compare th.metric, table.compare td.metric { text-align: left; color: var(--ink); }
    table.compare thead th {
      border-bottom: 2px solid var(--ink);
      border-top: 1px solid var(--ink);
      color: var(--ink);
      font-weight: 600;
      font-size: .74rem;
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    table.compare td.delta {
      font-size: .82rem;
      width: 90px;
      font-feature-settings: "tnum";
    }
    table.compare td.delta.up { color: var(--green); font-weight: 600; }
    table.compare td.delta.down { color: var(--accent); font-weight: 600; }
    table.compare td.delta.neutral { color: var(--ink-muted); }
    table.compare tbody tr.theme-divider th {
      padding-top: 1.2rem;
      font-family: "Charter", Georgia, serif;
      font-size: 1rem;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      color: var(--accent);
      text-align: left;
      border-bottom: 1px solid var(--rule);
      border-top: none;
    }

    .theme-block { margin: 2rem 0; }
    .theme-block h3 {
      font-family: "Charter", Georgia, serif;
      font-size: 1.05rem;
      color: var(--ink);
      margin: 0 0 .25rem;
      padding-bottom: .25rem;
      border-bottom: 1px solid var(--rule);
      display: flex;
      align-items: baseline;
      gap: .5rem;
    }
    .theme-block h3 .badge {
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: .68rem;
      color: var(--accent);
      letter-spacing: .1em;
      text-transform: uppercase;
      font-weight: 600;
      flex-shrink: 0;
    }
    .theme-block p.caption {
      font-size: .85rem;
      color: var(--ink-muted);
      margin: .35rem 0 .6rem;
      font-style: italic;
    }

    /* First-goal panel — two columns (Arrasate, Demichelis) with horizontal bars */
    .firstgoal {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.4rem;
      margin: 1.2rem 0 1.8rem;
    }
    .fg-col {
      background: #fff;
      border: 1px solid var(--rule);
      padding: 1rem 1.1rem 1.2rem;
    }
    .fg-coach {
      font-family: "Charter", Georgia, serif;
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: .9rem;
      border-bottom: 1px solid var(--rule);
      padding-bottom: .45rem;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
    }
    .fg-coach-meta {
      font-size: .72rem;
      font-weight: 400;
      color: var(--ink-muted);
      letter-spacing: .04em;
      text-transform: uppercase;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }
    .fg-row {
      margin-bottom: .85rem;
      position: relative;
      display: grid;
      grid-template-columns: 1fr auto;
      column-gap: .8rem;
      align-items: center;
      padding: .4rem .6rem;
    }
    .fg-row:last-child { margin-bottom: 0; }
    .fg-bar {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: #efeae0;
      z-index: 0;
      transition: width .3s;
    }
    .fg-row.mll .fg-bar { background: #d8edd0; }
    .fg-row.opp .fg-bar { background: #f5dcdc; }
    .fg-row.none .fg-bar { background: #eee9da; }
    .fg-left {
      position: relative;
      z-index: 1;
    }
    .fg-meta {
      font-family: "Charter", Georgia, serif;
      font-variant-numeric: tabular-nums;
      font-size: .9rem;
      color: var(--ink);
      line-height: 1.25;
    }
    .fg-meta b { font-weight: 700; }
    .fg-label {
      font-size: .78rem;
      color: var(--ink-soft);
      line-height: 1.3;
    }
    .fg-ppg {
      position: relative;
      z-index: 1;
      background: rgba(255,255,255,.7);
      border: 1px solid var(--rule);
      padding: .25rem .55rem .3rem;
      font-family: "Charter", Georgia, serif;
      font-variant-numeric: tabular-nums;
      font-size: .82rem;
      color: var(--ink);
      text-align: right;
      min-width: 95px;
      line-height: 1.2;
    }
    .fg-ppg .ppg-num {
      display: block;
      font-size: 1.05rem;
      font-weight: 700;
    }
    .fg-ppg .ppg-cap {
      display: block;
      font-size: .65rem;
      color: var(--ink-muted);
      text-transform: uppercase;
      letter-spacing: .04em;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      margin-top: .1rem;
    }
    @media (max-width: 540px) {
      .firstgoal { grid-template-columns: 1fr; }
    }

    /* Legend */
    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem 1rem;
      margin: .6rem 0 1.2rem;
      font-size: .82rem;
      color: var(--ink-soft);
    }
    .legend .coach-pill { font-size: .72rem; }

    footer {
      margin-top: 3rem;
      padding: 1.8rem 0 2.2rem;
      border-top: 2px solid var(--ink);
      font-size: .82rem;
      color: var(--ink-muted);
      line-height: 1.5;
    }
    footer b { color: var(--ink); }

    @media (max-width: 540px) {
      body { font-size: 16px; }
      .keynums { grid-template-columns: 1fr; }
      .keynums > div { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
      .keynums > div:last-child { border-bottom: 0; }
      table { font-size: .88rem; }
      th, td { padding: .55rem .5rem; }
    }
    /* Sticky page nav */
    .topnav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(245, 241, 232, 0.96);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--rule);
      padding: .8rem 0;
    }
    .topnav .nav-inner {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 1.4rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .topnav .crest {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      border-radius: 50%;
      background: linear-gradient(180deg, var(--accent) 0 50%, var(--ink) 50% 100%);
      box-shadow: 0 0 0 1px var(--rule);
    }
    .topnav .brand {
      font-family: "Charter", Georgia, serif;
      font-style: italic;
      font-size: .92rem;
      color: var(--ink);
      margin-right: auto;
    }
    .topnav .brand b { color: var(--accent); font-weight: 600; font-style: normal; }
    .topnav .tabs {
      display: flex;
      gap: .3rem;
    }
    .topnav .tabs a {
      font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
      text-decoration: none;
      color: var(--ink-soft);
      font-size: .82rem;
      padding: .4rem .85rem;
      border-radius: 999px;
      letter-spacing: .03em;
      font-weight: 500;
      transition: background .12s, color .12s;
    }
    .topnav .tabs a:hover { color: var(--ink); background: rgba(160,19,35,.05); }
    .topnav .tabs a.active {
      background: var(--ink);
      color: var(--paper);
    }

    /* Player selector for jugadores page */
    .player-picker {
      background: #fff;
      border: 1px solid var(--rule);
      padding: 1.1rem 1.3rem;
      margin: 1.4rem 0 2rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center;
    }
    .player-picker label {
      font-family: "Charter", Georgia, serif;
      font-size: 1rem;
      color: var(--ink);
      font-weight: 600;
    }
    .player-picker select {
      font-family: inherit;
      font-size: 1rem;
      padding: .45rem .8rem;
      border: 1px solid var(--rule);
      border-radius: 4px;
      background: var(--paper);
      color: var(--ink);
      min-width: 260px;
    }
    .player-picker .pmeta {
      font-size: .85rem;
      color: var(--ink-muted);
      font-family: -apple-system, sans-serif;
    }
    .player-pane {
      background: #fff;
      border: 1px solid var(--rule);
      padding: 0.6rem;
      margin: 0 0 1.5rem;
    }
    .player-pane img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* Responsive grid for the per-player panels (jugadores page) */
    .player-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.2rem;
      margin: 1.4rem 0 2rem;
      grid-template-areas:
        "touches"
        "shots"
        "passes_out"
        "passes_in"
        "partners"
        "profile";
    }
    .player-grid .panel {
      background: #fff;
      border: 1px solid var(--rule);
      padding: .9rem 1rem 1.1rem;
    }
    .player-grid .panel h3 {
      font-family: "Charter", Georgia, serif;
      font-size: 1.05rem;
      color: var(--ink);
      margin: 0 0 .15rem;
      font-weight: 600;
      border: none;
      padding: 0;
    }
    .player-grid .panel h3::before { content: none; }
    .player-grid .panel .panel-caption {
      font-size: .82rem;
      color: var(--ink-muted);
      margin: 0 0 .65rem;
      font-style: italic;
    }
    .player-grid .panel img {
      display: block;
      width: 100%;
      height: auto;
    }
    .panel-touches    { grid-area: touches; }
    .panel-shots      { grid-area: shots; }
    .panel-passes-out { grid-area: passes_out; }
    .panel-passes-in  { grid-area: passes_in; }
    .panel-partners   { grid-area: partners; }
    .panel-profile    { grid-area: profile; }