style.css

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&display=swap');

/* FIFA style redesign, prompt 1: screens, cards and basic polish. The pitch
   floor and the fine detail land in prompt 3.

   Every rule above the page marker goes through Gradio's css=. Locally Gradio
   prefixes those with .contain and they win; on Spaces they are unprefixed and
   load before Gradio's own sheets, so ties lose. Each one is therefore scoped
   under #pvf, since an id outranks Gradio's class only rules in both places.
   See the Redesign rules in docs/gui_notes.md. */

/* Condensed face on everything that should read like a game menu */
#pvf .pvf-hero h1,
#pvf .pvf-kicker,
#pvf .pvf-h2,
#pvf button.pvf-big-btn,
#pvf .pc-name,
#pvf .pc-value,
#pvf .pc-pos,
#pvf .pvf-player-head h2,
#pvf .pvf-big,
#pvf .pvf-featured-label {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif !important;
}

/* Screens stack their own content; only one is ever visible */
#pvf .pvf-screen { gap: 18px !important; }
/* A short fade makes a screen change read as a change, not a flicker */
#pvf .pvf-screen { animation: pvf-fade 160ms ease-out both; }
@keyframes pvf-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #pvf .pvf-screen { animation: none; }
  #pvf button.pvf-card, #pvf button.pvf-big-btn, #pvf .pvf-chips label { transition: none; }
  #pvf button.pvf-card:hover, #pvf button.pvf-big-btn:active { transform: none; }
}

/* Big bold buttons on top of size="lg" */
#pvf button.pvf-big-btn {
  font-size: 1.5rem !important; font-weight: 800 !important; letter-spacing: 0.05em;
  text-transform: uppercase; min-height: 60px; padding: 12px 28px !important;
  border-radius: 6px !important;
}
#pvf button.pvf-big-btn.primary { box-shadow: 0 6px 24px rgba(212, 167, 44, 0.22); }
#pvf button.pvf-big-btn:focus-visible { outline: 3px solid #F2F3EC; outline-offset: 3px; }
#pvf button.pvf-big-btn { transition: transform 100ms ease, filter 120ms ease; }
#pvf button.pvf-big-btn:hover { filter: brightness(1.08); }
/* Pressed state, so a tap on a phone is acknowledged without a hover */
#pvf button.pvf-big-btn:active { transform: translateY(2px); filter: brightness(0.94); }
#pvf .pvf-actions { gap: 14px !important; }

/* Home hero */
#pvf .prose header.pvf-hero {
  background: rgba(8, 20, 14, 0.92); border: 1px solid #2C4D3D; border-radius: 10px;
  padding: 26px 26px 22px;
}
#pvf .prose header.pvf-hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem) !important; line-height: 0.92 !important;
  font-weight: 800; text-transform: uppercase; color: #F2F3EC !important;
  margin: 4px 0 12px !important;
}
#pvf .prose header.pvf-hero p.pvf-kicker {
  color: #D4A72C !important; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 700; font-size: 1rem !important; margin: 0;
}
#pvf .prose header.pvf-hero p.pvf-tagline {
  color: #B5C2BA !important; font-size: 1.05rem; max-width: 52ch; margin: 0;
}

/* One line lean warning, with its full text behind the Why button */
#pvf .pvf-lean { align-items: center !important; gap: 12px !important; }
#pvf .prose p.pvf-note-line {
  color: #F2F3EC !important; background: #3A3219; border-left: 4px solid #D4A72C;
  padding: 8px 12px; margin: 0; border-radius: 4px; font-weight: 600;
}
#pvf .pvf-why-panel .prose p { color: #F2F3EC; margin: 0; }
#pvf .pvf-why-panel, #pvf .pvf-how {
  background: #0C1D15; border: 1px solid #2C4D3D; border-radius: 10px;
  padding: 14px 18px !important;
}
#pvf .pvf-how .prose p { color: #F2F3EC; }

#pvf .prose h2.pvf-h2 {
  color: #F2F3EC !important; font-size: 2.1rem !important; font-weight: 800;
  margin: 0 !important; text-transform: uppercase; line-height: 1.1;
}
#pvf .pvf-bar { align-items: center !important; gap: 16px !important; }

/* Player cards, shared by the Featured row and the Results grid */
#pvf .pvf-grid, #pvf .pvf-featured {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px;
}
#pvf button.pvf-card {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 12px 14px !important; font: inherit; cursor: pointer; color: #F2F3EC;
  background: linear-gradient(160deg, #173A2A 0%, #0C1D15 70%) !important;
  border: 1px solid #2C4D3D !important; border-radius: 10px !important;
}
#pvf button.pvf-card {
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
#pvf button.pvf-card:hover {
  border-color: #D4A72C !important; transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
}
#pvf button.pvf-card:active { transform: translateY(-1px); }
/* Keyboard users get the same gold ring the mouse gets as a border */
#pvf button.pvf-card:focus-visible {
  outline: 3px solid #D4A72C; outline-offset: 3px; border-color: #D4A72C !important;
}
#pvf .pc-top { display: flex; justify-content: space-between; align-items: center; }
#pvf .pc-pos {
  color: #D4A72C; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  font-size: 0.95rem;
}
#pvf .pc-flag { color: #FFC857; font-weight: 700; }
#pvf .pc-name { font-size: 1.45rem; font-weight: 700; line-height: 1.05; margin-top: 2px; }
#pvf .pc-meta { font-size: 0.85rem; color: #B5C2BA; }
#pvf .pc-value { font-size: 1.9rem; font-weight: 800; line-height: 1; margin-top: 6px; }
#pvf .pc-change { font-weight: 700; font-size: 0.95rem; }
#pvf .pc-up { color: #6FD69A; }
#pvf .pc-down { color: #FF8A7A; }
#pvf .pc-flat { color: #B5C2BA; }
#pvf .pc-range { font-size: 0.8rem; color: #B5C2BA; }

/* Featured cards carry their rule label above the card */
#pvf .pvf-featured-item { display: flex; flex-direction: column; gap: 6px; }
#pvf .prose p.pvf-featured-label {
  color: #D4A72C !important; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; font-size: 0.85rem; margin: 0;
}

/* Search tiles */
#pvf .pvf-tile {
  background: #0C1D15; border: 1px solid #2C4D3D; border-radius: 10px;
  padding: 12px 14px !important;
}
#pvf .pvf-tile-row { gap: 12px !important; }
#pvf .pvf-age { align-items: flex-end !important; }

/* Sort chips are a bare row: no block border, no form label */
#pvf .block.pvf-chips {
  background: transparent !important; border: 0 !important; padding: 0 !important;
  box-shadow: none !important;
}
/* The only direct span child is the "Sort by" label; the info line stays */
#pvf .pvf-chips > span { display: none !important; }
/* Gradio wraps the Radio in div.form, which paints its own fill */
#pvf div.form:has(> .pvf-chips) {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
#pvf .pvf-chips .wrap { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
#pvf .pvf-chips label {
  border: 1px solid #2C4D3D !important; border-radius: 999px !important;
  padding: 8px 18px !important; background: #12291E !important; min-height: 44px;
  color: #B5C2BA !important; font-weight: 600; transition: background 120ms ease,
  border-color 120ms ease, color 120ms ease;
}
#pvf .pvf-chips label input { position: absolute; opacity: 0; }
#pvf .pvf-chips label:hover { border-color: #4C7A62 !important; }
/* The chosen chip reads as chosen without relying on the hidden radio dot */
#pvf .pvf-chips label:has(input:checked) {
  background: #D4A72C !important; border-color: #D4A72C !important;
  color: #0A140E !important; font-weight: 700;
}
#pvf .pvf-chips label:focus-within { outline: 3px solid #F2F3EC; outline-offset: 2px; }
/* The helper line sits under the chips, not inside a labelled block */
#pvf .pvf-chips .info, #pvf .pvf-chips div[data-testid="block-info"] {
  color: #B5C2BA !important; font-size: 0.85rem; margin: 0 0 8px !important;
}

#pvf .pvf-count .prose p { color: #F2F3EC; margin: 0; }
#pvf .pvf-note .prose p { color: #B5C2BA; font-size: 0.85rem; margin: 0; }

/* Player screen header */
#pvf .prose header.pvf-player-head {
  background: rgba(8, 20, 14, 0.92); border: 1px solid #2C4D3D; border-radius: 10px;
  padding: 18px 22px;
}
#pvf .prose header.pvf-player-head h2 {
  font-size: clamp(2.2rem, 6vw, 3.6rem) !important; font-weight: 800; text-transform: uppercase;
  line-height: 0.95 !important; margin: 6px 0 8px !important; color: #F2F3EC !important;
}
#pvf .prose header.pvf-player-head p { color: #B5C2BA !important; margin: 0; }
#pvf .prose header.pvf-player-head p.pvf-big {
  font-size: 2.2rem; font-weight: 800; color: #F2F3EC !important; margin-top: 8px;
}
#pvf .prose header.pvf-player-head .pc-flag { margin-left: 12px; }

/* Hero card: profile line, the two big numbers, then the range bar */
#pvf .prose p.pvf-profile { color: #B5C2BA !important; margin: 0 0 14px !important; }
#pvf .pvf-numbers { display: flex; flex-wrap: wrap; gap: 36px; margin-bottom: 18px; }
#pvf .pvf-number { display: flex; flex-direction: column; gap: 2px; }
#pvf .pvf-number-label {
  color: #B5C2BA; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
  font-size: 0.78rem;
}
#pvf .prose header.pvf-player-head span.pvf-big {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 800; line-height: 1;
  color: #F2F3EC;
}
#pvf .pvf-badge {
  display: inline-block; margin-left: 12px; padding: 3px 10px; border-radius: 999px;
  background: #3A3219; color: #FFC857; font-size: 0.82rem; font-weight: 700;
}

/* Range bar: the 10th to 90th band, today's value and the middle estimate */
#pvf .pvf-bar { margin-top: 6px; }
#pvf .pvf-bar-track {
  position: relative; height: 16px; border-radius: 999px; background: #081710;
  border: 1px solid #2C4D3D;
}
#pvf .pvf-bar-band {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(90deg, rgba(212,167,44,0.35), rgba(212,167,44,0.75));
}
#pvf .pvf-bar-mid {
  position: absolute; top: -5px; width: 4px; height: 26px; border-radius: 2px;
  background: #F2F3EC; transform: translateX(-2px);
}
#pvf .pvf-bar-now {
  position: absolute; top: -2px; width: 2px; height: 20px; background: #6FD69A;
  transform: translateX(-1px);
}
#pvf .pvf-bar-ends {
  display: flex; justify-content: space-between; margin-top: 6px;
  color: #B5C2BA; font-size: 0.82rem;
}
#pvf .prose p.pvf-bar-key {
  color: #B5C2BA !important; font-size: 0.8rem; margin: 4px 0 0 !important;
}
#pvf .pvf-key-mid, #pvf .pvf-key-now {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  vertical-align: middle; margin-right: 4px;
}
#pvf .pvf-key-mid { background: #F2F3EC; }
#pvf .pvf-key-now { background: #6FD69A; }

/* One panel open at a time, behind three big buttons */
#pvf .pvf-panel-buttons { gap: 12px !important; }
#pvf .pvf-panel {
  background: #0C1D15; border: 1px solid #2C4D3D; border-radius: 10px;
  padding: 14px 18px !important;
}
/* Every panel over the pitch is opaque, so contrast never depends on the backdrop */
#pvf .pvf-tile, #pvf .pvf-panel, #pvf .pvf-why-panel, #pvf .pvf-how,
#pvf .block.pvf-card-panel, #pvf .block.pvf-explain { background: #0C1D15 !important; }
#pvf .prose header.pvf-hero, #pvf .prose header.pvf-player-head {
  background: #081710 !important;
}
#pvf .pvf-panel .prose * { color: #F2F3EC; }
#pvf .pvf-panel .prose table { width: 100%; }
#pvf .pvf-panel .prose th, #pvf .pvf-panel .prose td { padding: 6px 8px; }

/* Markdown has no block fill of its own, so give it a panel over the dark page */
#pvf .block.pvf-card-panel, #pvf .block.pvf-explain {
  background: #0C1D15 !important; border: 1px solid #2C4D3D !important;
  border-radius: 10px; padding: 12px 16px !important;
}
#pvf .pvf-card-panel .prose *, #pvf .pvf-explain .prose * { color: #F2F3EC; }
#pvf .pvf-explain .prose blockquote {
  border-left: 4px solid #D4A72C; background: #3A3219; padding: 8px 12px;
  margin: 0 0 10px; border-radius: 4px; font-style: normal;
}
#pvf .pvf-explain .prose small { color: #B5C2BA; font-size: 0.82rem; }
/* The card table must not break Median as "Media n" on a phone */
#pvf .pvf-card-panel th, #pvf .pvf-card-panel td {
  white-space: nowrap; padding-left: 6px; padding-right: 6px;
}
#pvf .pvf-card-panel div:has(> table) { overflow-x: auto; }

/* Phone: two cards per row and full width buttons */
@media (max-width: 640px) {
  #pvf .pvf-grid, #pvf .pvf-featured {
    grid-template-columns: 1fr 1fr !important; gap: 8px !important;
  }
  #pvf .pc-name { font-size: 1.15rem; }
  #pvf .pc-value { font-size: 1.45rem; }
  #pvf button.pvf-big-btn { font-size: 1.25rem !important; padding: 10px 16px !important; }
  #pvf .prose header.pvf-hero { padding: 20px 18px; }
  #pvf .pvf-tile-row { flex-direction: column; }
  /* Plotly's 22px toolbar icons are too small to tap, so hide them */
  #pvf div.modebar-container { display: none !important; }
}

/* PAGE LEVEL RULES */
/* Everything below goes into <head> unprefixed, because it styles html and body */
/* Spaces SSR puts background: var(--body-background-fill) inline on html,
   so only !important beats it */
html { background: #05100A !important; }
body, gradio-app, .gradio-container { background: transparent !important; }
body { min-height: 100vh; }
/* The hidden target for the browser Back hook must stay in the DOM */
button.pvf-pop, .pvf-pop { display: none !important; }
/* Pitch floor: a lit plane of mowed stripes and chalk lines, CSS only.
   It is fixed and sits behind everything, so page height never moves it. */
body::before {
  content: ""; position: fixed; z-index: -2; pointer-events: none;
  left: -45vw; right: -45vw; bottom: 0; height: 150vh;
  background:
    /* Halfway line across the plane */
    linear-gradient(to bottom, transparent calc(62% - 2px),
      rgba(242, 243, 236, 0.20) calc(62% - 2px), rgba(242, 243, 236, 0.20) calc(62% + 2px),
      transparent calc(62% + 2px)),
    /* Centre spot and the circle around it */
    radial-gradient(circle at 50% 62%, rgba(242, 243, 236, 0.22) 0 5px,
      transparent 6px 15vh, rgba(242, 243, 236, 0.18) calc(15vh + 1px) calc(15vh + 4px),
      transparent calc(15vh + 5px)),
    /* Penalty box at the near end */
    linear-gradient(to right, transparent 36%, rgba(242, 243, 236, 0.14) 36% calc(36% + 3px),
      transparent calc(36% + 3px) calc(64% - 3px),
      rgba(242, 243, 236, 0.14) calc(64% - 3px) 64%, transparent 64%)
      top / 100% 20% no-repeat,
    /* Mowed stripes, two greens alternating */
    repeating-linear-gradient(90deg, #1C5A3B 0 5%, #14452B 5% 10%);
  transform: perspective(72vh) rotateX(64deg);
  transform-origin: 50% 100%;
  /* Fade to nothing at the far edge, so it never reaches the content */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%,
    rgba(0, 0, 0, 0.42) 45%, rgba(0, 0, 0, 0.88) 100%);
  mask-image: linear-gradient(to bottom, transparent 0%,
    rgba(0, 0, 0, 0.42) 45%, rgba(0, 0, 0, 0.88) 100%);
}
/* A soft floodlight glow just above the pitch */
body::after {
  content: ""; position: fixed; z-index: -2; pointer-events: none;
  left: 0; right: 0; bottom: 0; height: 62vh;
  background: radial-gradient(ellipse 60% 55% at 50% 100%,
    rgba(111, 214, 154, 0.14), transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { transition: none; }
}

/* Gradio's loader is white by default, which flashes on a near black page */
.gradio-container .wrap.default,
.gradio-container div[data-testid="status-tracker"] {
  background: rgba(5, 16, 10, 0.72) !important; color: #B5C2BA !important;
}
.gradio-container .wrap.default svg, .gradio-container .progress-text {
  color: #D4A72C !important; fill: #D4A72C !important;
}

/* Gradio's native footer sits straight on the pitch, which brightens as the
   window grows, so give it its own solid strip rather than trusting the backdrop */
.gradio-container footer {
  background: #0C1D15 !important; border-top: 1px solid #2C4D3D;
  border-radius: 10px; padding: 10px 16px !important; margin-top: 10px;
}
.gradio-container footer a, .gradio-container footer button,
.gradio-container footer .divider { color: #B5C2BA !important; }

/* Gradio's own footer sits on the dark page, so give it a panel to stand on */
.gradio-container .pvf-foot-dark {
  background: #0C1D15; border-top: 1px solid #2C4D3D; border-radius: 10px;
  padding: 12px 16px; margin-top: 22px;
}
.gradio-container .pvf-foot-dark p { color: #B5C2BA; font-size: 0.82rem; margin: 3px 0; }
.gradio-container .pvf-foot-dark a { color: #D4A72C; text-decoration: none; }
.gradio-container .pvf-foot-dark a:hover { text-decoration: underline; }