/* A compact, read-only performance XI. Component colours are explicitly paired
   so the blue/gold identity stays legible in both site themes. */
.tpc-group-stage-xi { --xi-surface:#fff;--xi-ink:#15233b;--xi-muted:#536279;--xi-rule:#dce3ef;--xi-soft:#f5f7fc;margin-block:2rem;border:1px solid var(--xi-rule);border-radius:24px;overflow:hidden;background:var(--xi-surface);color:var(--xi-ink);min-width:0; }
.tpc-group-stage-xi *, .tpc-group-stage-xi *::before, .tpc-group-stage-xi *::after { box-sizing:border-box; }
body.tpc-site-dark-mode .tpc-group-stage-xi { --xi-surface:#14243a;--xi-ink:#f5f7fc;--xi-muted:#b8c7dc;--xi-rule:#34475f;--xi-soft:#1a2e48; }
.tpc-group-stage-xi .tpc-xi-header { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;background:var(--cup-blue,#001e8e);color:#fff; }
.tpc-group-stage-xi .tpc-xi-header > div:first-child { min-width:0; }
.tpc-group-stage-xi .tpc-xi-kicker { display:block;color:var(--cup-yellow,#f1c30b);font-size:11px;font-weight:800;line-height:1.5;letter-spacing:.11em;text-transform:uppercase;overflow-wrap:anywhere; }
.tpc-group-stage-xi .tpc-xi-header h2 { margin:7px 0;color:#fff;font-size:clamp(23px,3vw,34px);line-height:1.1;font-weight:900;letter-spacing:-.025em; }
.tpc-group-stage-xi .tpc-xi-header p { margin:8px 0 0;max-width:560px;color:#e3e9ff;font-size:13px;line-height:1.5; }
.tpc-group-stage-xi .tpc-xi-state { display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none; }
.tpc-group-stage-xi .tpc-xi-state span { color:#fff;font-size:11px;font-weight:700;text-align:right; }
.tpc-group-stage-xi .tpc-xi-state b { border:1px solid #ffffff45;border-radius:30px;padding:6px 14px;color:var(--cup-yellow,#f1c30b);font-size:18px;letter-spacing:.08em; }
.tpc-group-stage-xi .tpc-xi-meta { display:flex;flex-wrap:wrap;align-items:center;gap:5px 18px;padding:12px 28px;background:var(--xi-soft);border-bottom:1px solid var(--xi-rule);color:var(--xi-muted);font-size:11px;font-weight:650; }
.tpc-group-stage-xi .tpc-xi-body { display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:24px;padding:24px;align-items:start; }
.tpc-group-stage-xi .tpc-xi-pitch { position:relative;isolation:isolate;min-width:0;overflow:hidden;border:1px solid #3f8770;border-radius:18px;background:repeating-linear-gradient(0deg,#0d594b 0,#0d594b 12.5%,#105e50 12.5%,#105e50 25%);padding:20px 12px; }
.tpc-group-stage-xi .tpc-xi-pitch-lines { position:absolute;inset:7px;z-index:-1;width:calc(100% - 14px);height:calc(100% - 14px);fill:none;stroke:#c2e6cf66;stroke-width:1.5; }
.tpc-group-stage-xi .tpc-xi-pitch-dot { fill:#c2e6cf66;stroke:none; }
.tpc-group-stage-xi .tpc-xi-pitch-players { display:grid;gap:30px;min-width:0; }
.tpc-group-stage-xi .tpc-xi-line { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none;min-width:0; }
.tpc-group-stage-xi .tpc-xi-line-defenders { grid-template-columns:repeat(4,minmax(0,1fr)); }
.tpc-group-stage-xi .tpc-xi-line-goalkeepers { grid-template-columns:minmax(0,1fr);max-width:125px;width:100%;margin-inline:auto; }
.tpc-group-stage-xi .tpc-xi-slot { min-width:0;text-align:center; }
.tpc-group-stage-xi .tpc-xi-slot > :is(a,div) { display:flex;flex-direction:column;align-items:center;min-width:0;border-radius:8px;text-decoration:none;color:#fff;padding:2px; }
.tpc-group-stage-xi .tpc-xi-slot a:hover { background:#001e8e55; }
.tpc-group-stage-xi .tpc-xi-slot a:focus-visible, .tpc-group-stage-xi .tpc-xi-details summary:focus-visible, .tpc-group-stage-xi .tpc-xi-detail-person a:focus-visible { outline:3px solid var(--cup-yellow,#f1c30b);outline-offset:3px; }
.tpc-group-stage-xi .tpc-xi-shirt { display:block;width:48px;height:46px;margin:0 auto 5px;flex:none; }
.tpc-group-stage-xi .tpc-xi-shirt svg { display:block;width:100%;height:100%;fill:var(--cup-yellow,#f1c30b);stroke:#ffefae;stroke-width:1.5;stroke-linejoin:round; }
.tpc-group-stage-xi .tpc-xi-shirt .tpc-xi-shirt-collar { fill:none;stroke:#00145f;stroke-width:3; }
.tpc-group-stage-xi .tpc-xi-shirt text { fill:#00145f;stroke:none;font:800 18px Arial,sans-serif; }
.tpc-group-stage-xi .tpc-xi-line-goalkeepers .tpc-xi-shirt svg { fill:#dce2f8;stroke:#fff; }
.tpc-group-stage-xi .tpc-xi-name { display:block;max-width:100%;font-size:var(--xi-name-size,12px);line-height:1.2;font-weight:800;color:#fff;min-height:2.4em; }
.tpc-group-stage-xi .tpc-xi-name span { display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.tpc-group-stage-xi .tpc-xi-club { max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d0e7dd;font-size:9px;line-height:1.5;margin-top:2px; }
.tpc-group-stage-xi .tpc-xi-points { display:inline-flex;align-items:baseline;gap:3px;margin-top:4px;border-radius:12px;padding:2px 7px;background:#00145f;color:#fff;font-size:10px;line-height:1.3; }
.tpc-group-stage-xi .tpc-xi-points b { color:var(--cup-yellow,#f1c30b);font-size:13px; }
.tpc-group-stage-xi .tpc-xi-slot-open { display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2px; }
.tpc-group-stage-xi .tpc-xi-slot-open .tpc-xi-shirt { opacity:.38; }
.tpc-group-stage-xi .tpc-xi-slot-open > strong { color:#d0e7dd;font-size:11px;line-height:1.4; }
.tpc-group-stage-xi .tpc-xi-slot-note { color:#b8d6ca;font-size:9px; }
.tpc-group-stage-xi .tpc-xi-roster { min-width:0; }
.tpc-group-stage-xi .tpc-xi-roster > h3 { margin:0 0 13px;color:var(--xi-ink);font-weight:800;font-size:14px; }
.tpc-group-stage-xi .tpc-xi-details { display:none;min-width:0;border:0;border-radius:12px; }
.tpc-group-stage-xi .tpc-xi-details summary { cursor:pointer;display:list-item;padding:0 0 12px;margin-left:18px;color:var(--xi-ink);font-weight:800;font-size:14px; }
.tpc-group-stage-xi .tpc-xi-details-hint { display:block;padding-top:3px;font-size:11px;font-weight:500;color:var(--xi-muted); }
.tpc-group-stage-xi .tpc-xi-detail-group { margin:0 0 16px; }
.tpc-group-stage-xi .tpc-xi-detail-group:last-child { margin:0; }
.tpc-group-stage-xi .tpc-xi-detail-group h3 { display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:6px 0;color:var(--xi-muted);font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--xi-rule); }
.tpc-group-stage-xi .tpc-xi-detail-group h3 span { font-weight:500;letter-spacing:0; }
.tpc-group-stage-xi .tpc-xi-detail-group ul { list-style:none;margin:0;padding:0; }
.tpc-group-stage-xi .tpc-xi-detail-group li { display:flex;align-items:center;gap:10px;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--xi-rule); }
.tpc-group-stage-xi .tpc-xi-detail-group li:last-child { border-bottom:0; }
.tpc-group-stage-xi .tpc-xi-detail-person { min-width:0; }
.tpc-group-stage-xi .tpc-xi-detail-person :is(a,strong) { color:var(--xi-ink);font-size:12px;line-height:1.3;font-weight:800;text-decoration:none;overflow-wrap:anywhere; }
.tpc-group-stage-xi .tpc-xi-detail-person a:hover { text-decoration:underline; }
.tpc-group-stage-xi .tpc-xi-detail-person > span { display:block;color:var(--xi-muted);font-size:10px;line-height:1.4;margin-top:1px;overflow-wrap:anywhere; }
.tpc-group-stage-xi .tpc-xi-detail-person > small { display:block;margin-top:3px;color:var(--xi-muted);font-size:10px;line-height:1.4; }
.tpc-group-stage-xi .tpc-xi-detail-points { min-width:38px;flex:none;display:flex;flex-direction:column;align-items:flex-end; }
.tpc-group-stage-xi .tpc-xi-detail-points b { color:var(--xi-ink);font-size:19px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums; }
.tpc-group-stage-xi .tpc-xi-detail-points span { color:var(--xi-muted);font-size:9px; }
.tpc-group-stage-xi .tpc-xi-no-selection { color:var(--xi-muted);font-size:12px; }
.tpc-group-stage-xi .tpc-xi-footnote { padding:13px 24px;background:var(--xi-soft);border-top:1px solid var(--xi-rule); }
.tpc-group-stage-xi .tpc-xi-footnote p { margin:0;color:var(--xi-muted);font-size:11px;line-height:1.5; }
.tpc-group-stage-xi .tpc-xi-footnote p + p { margin-top:5px; }
.tpc-group-stage-xi .tpc-xi-empty { padding:28px;color:var(--xi-ink); }
.tpc-group-stage-xi .tpc-xi-empty strong { display:block;font-size:17px; }
.tpc-group-stage-xi .tpc-xi-empty p { margin:8px 0 0;color:var(--xi-muted);font-size:13px;line-height:1.6;max-width:670px; }
@media (max-width:899px) {
  .tpc-group-stage-xi .tpc-xi-body { grid-template-columns:minmax(0,1fr);padding:18px;gap:16px; }
  .tpc-group-stage-xi .tpc-xi-pitch { max-width:590px;width:100%;margin-inline:auto; }
  .tpc-group-stage-xi .tpc-xi-roster { display:none; }
  .tpc-group-stage-xi .tpc-xi-details { display:block;background:var(--xi-soft);border:1px solid var(--xi-rule);padding:14px; }
  .tpc-group-stage-xi .tpc-xi-details summary { padding:0; }
  .tpc-group-stage-xi .tpc-xi-details[open] summary { padding-bottom:16px; }
  .tpc-group-stage-xi .tpc-xi-details:not([open]) .tpc-xi-detail-groups { display:none; }
  .tpc-group-stage-xi .tpc-xi-pitch-players { gap:25px; }
}
@media (max-width:480px) {
  .tpc-group-stage-xi { border-radius:20px; }
  .tpc-group-stage-xi .tpc-xi-header { padding:19px 16px;align-items:flex-start;gap:12px; }
  .tpc-group-stage-xi .tpc-xi-header h2 { font-size:25px; }
  .tpc-group-stage-xi .tpc-xi-header p { font-size:11px; }
  .tpc-group-stage-xi .tpc-xi-kicker { font-size:9px; }
  .tpc-group-stage-xi .tpc-xi-state { max-width:80px; }
  .tpc-group-stage-xi .tpc-xi-state span { font-size:9px; }
  .tpc-group-stage-xi .tpc-xi-state b { font-size:13px;padding:5px 10px; }
  .tpc-group-stage-xi .tpc-xi-meta { padding:10px 16px;font-size:10px;gap:3px 13px; }
  .tpc-group-stage-xi .tpc-xi-body { padding:12px;gap:12px; }
  .tpc-group-stage-xi .tpc-xi-pitch { padding:17px 6px; }
  .tpc-group-stage-xi .tpc-xi-pitch-players { gap:22px; }
  .tpc-group-stage-xi .tpc-xi-line { gap:2px; }
  .tpc-group-stage-xi .tpc-xi-shirt { width:41px;height:40px; }
  .tpc-group-stage-xi .tpc-xi-name { font-size:min(var(--xi-name-size,12px),11px); }
  .tpc-group-stage-xi .tpc-xi-club { font-size:8px; }
  .tpc-group-stage-xi .tpc-xi-points { font-size:9px;padding:2px 6px; }
  .tpc-group-stage-xi .tpc-xi-points b { font-size:12px; }
  .tpc-group-stage-xi .tpc-xi-footnote { padding:12px 16px; }
  .tpc-group-stage-xi .tpc-xi-footnote p { font-size:10px; }
  .tpc-group-stage-xi .tpc-xi-empty { padding:20px 16px; }
}
@media (max-width:360px) {
  /* Give the four-player line its available width before reducing longer
     names. Ordinary short names retain 11px; names stay on two lines. */
  .tpc-group-stage-xi .tpc-xi-body { padding:8px; }
  .tpc-group-stage-xi .tpc-xi-pitch { padding-inline:2px; }
  .tpc-group-stage-xi .tpc-xi-line-defenders { gap:0; }
  .tpc-group-stage-xi .tpc-xi-line-defenders .tpc-xi-slot > :is(a,div) { padding-inline:0; }
  .tpc-group-stage-xi .tpc-xi-line-defenders .tpc-xi-name { font-size:var(--xi-name-narrow-size,9px); }
}