/* ============================================================
   Fantasy FID — "Rounded / Glass" redesign overrides
   Loaded AFTER each page's own stylesheet, so these rules win
   the cascade on equal specificity without touching a single
   existing class/id name. This file only ever ADDS or RE-STYLES
   selectors that already exist on the page -- nothing here
   renames or removes anything app.js / the page's own inline
   script depends on.

   Design system: soft rounded corners, glass (blurred,
   translucent) panels, a faded nostalgic photo wash behind
   everything, a gold nav pill (echoing the old FID matchday
   programme's own gold/green tab bar), and a dark theme that's
   the default until a visitor switches it off.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ---------- tokens: same variable names every page already
   uses, new values. Redefining :root here overrides every
   var(--x) reference on the page automatically. ---------- */
:root{
  --paper:#F5F7F1;
  --paper-2:rgba(255,255,255,0.60);
  --paper-3:rgba(255,255,255,0.85);
  --ink:#15231B;
  --ink-soft:#4C5C52;
  --muted:#8B9689;
  --line:#E6EBE0;
  --line-soft:#EEF2E9;
  --pitch:#1FA463;
  --pitch-deep:#147C49;
  --pitch-tint:#E5F7ED;
  --gold:#F3A93C;
  --gold-deep:#C77F14;
  --oxblood:#F0574A;       /* repurposed as the redesign's coral/danger accent */
  --oxblood-tint:#FDEBE9;
  --sky:#3E8FEF;
  --sky-deep:#1E63C4;
  --on-gold:#143C22;
  --pitch-ink:#F4F1E4;
  --surface:rgba(255,255,255,0.62);
  --glass-border:rgba(255,255,255,0.55);
  --cloud-rgb:245,247,241;
  --bg:var(--paper);
  --panel:var(--paper);
  --panel2:var(--paper-2);
  --accent:var(--pitch);
  --accent2:var(--gold-deep);
  --text:var(--ink);
  --danger:var(--oxblood);
}

html.theme-dark{
  --paper:#0F1712;
  --paper-2:rgba(30,42,35,0.55);
  --paper-3:rgba(255,255,255,0.06);
  --ink:#EDF3EC;
  --ink-soft:#B7C4B8;
  --muted:#7C8C7E;
  --line:rgba(255,255,255,0.10);
  --line-soft:rgba(255,255,255,0.14);
  --pitch:#3DD68C;
  --pitch-deep:#1FA463;
  --pitch-tint:rgba(61,214,140,0.16);
  --gold:#FFC369;
  --gold-deep:#F3A93C;
  --oxblood:#FF7A6E;
  --oxblood-tint:rgba(255,122,110,0.16);
  --sky:#6FB0FF;
  --sky-deep:#3E8FEF;
  --surface:rgba(24,34,28,0.60);
  --glass-border:rgba(255,255,255,0.14);
  --cloud-rgb:15,23,18;
}

html{background:var(--paper)}

/* ---------- typography: smooth humanist pair instead of the
   old programme's serif+typewriter combination ---------- */
body{font-family:'Plus Jakarta Sans',Arial,sans-serif;background:transparent!important;transition:background-color .25s ease}
h1,h2,h3{font-family:'Outfit',Arial,sans-serif!important}
.eyebrow,.day,.gw-pill,.gw-chip .gw-label,.top-stats span,.top-stats strong,.market-sticky-stat span,.market-sticky-stat strong,
.stat .value,.stat .label,.pts,.credits,.record,.rank,.code,.betting-thead,.betting-row,.thead,.row-ppg,.formation,.price,
table.points-table th,table.points-table td.num,.metric strong{font-family:'Outfit',Arial,sans-serif!important;font-variant-numeric:tabular-nums}

/* ---------- faded nostalgic photo wash ----------
   .photo-wash is a small markup addition (one wrapper div, one
   img, two overlay divs) inserted right after <body> on every
   page -- fixed behind everything else, never intercepting
   clicks. Page content keeps working exactly as before; this
   just paints behind it. */
.photo-wash{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.photo-wash-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:.16;filter:grayscale(1) contrast(1.15) brightness(1.2)}
.photo-wash-tint{position:absolute;inset:0;background:linear-gradient(160deg,var(--pitch-deep) 0%,var(--gold) 100%);mix-blend-mode:color}
.photo-wash-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--cloud-rgb),1) 0%,rgba(var(--cloud-rgb),.55) 20%,rgba(var(--cloud-rgb),.62) 55%,rgba(var(--cloud-rgb),1) 92%)}

/* ---------- glass headers/panels: bigger radius, blurred
   translucent fill instead of a flat paper background ---------- */
.topbar,.site-nav,.panel,.hero,.tm-modal,.faq-item,.bet-slip,.card,.stat,.balance-bar,.player,.team-controls,.xi-list,.squad-list{
  border-radius:22px;
  background:var(--surface);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--glass-border);
}
.site-nav{border-radius:0 0 22px 22px;position:sticky;top:0}
.topbar{border-radius:24px;border-bottom:1px solid var(--glass-border)}
/* Colored top accent bars belonged to the old programme look --
   switched off for the flatter glass-card aesthetic. */
.panel:before,.hero:before,.card:before,.faq-item:before{display:none}
.player{background:var(--paper-2);backdrop-filter:none;-webkit-backdrop-filter:none}
.squad-list,.xi-list{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-style:dashed}

/* ---------- everything else rounded: rows, chips, avatars,
   inputs, buttons ---------- */
.squad-row,.bench-player,.player-card,.xi-row,.gw-chip,.mybets-row,.betting-row,.row,.odd,.results .card,.match,
.captains div,.team-code-box,input,select,.stat,.badge,.crest,.team-badge-mini,.player-avatar,.squad-avatar,
.pitch-avatar,.identity-summary-logo,.balance-bar,.faq-item,table.points-table,.callout,.slot-fill-banner,.market-sticky-bar{
  border-radius:16px;
}
.player-avatar{border-radius:16px}
.squad-avatar,.badge,.crest,.team-badge-mini,.pitch-avatar,.identity-summary-logo{border-radius:12px}
.mini-star,.choice,.swap-btn,.bench-remove,.bench-xi,.tag,.you,.position-badge{border-radius:999px}
.market-sticky-bar{border-radius:22px 22px 0 0}
.shirt,.badge-c{border-radius:50%}
.pitch,.fantasy-pitch{border-radius:22px}

button,.fid-nav-link,.nav-links a,.mobile-menu a,.back,.faq-nav a,.view-tabs button,.toolbar button,
.filters button,.tm-close,.bet-btn,.bet-slip .actions button,.balance-bar button,.menu-toggle{
  border-radius:999px!important;
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  text-transform:none;
  letter-spacing:normal;
  font-weight:600;
  border:1px solid var(--line);
}
.add,.save,.filter.active,.bet-slip .confirm,.view-tabs button.active{border:none}
.tm-close{border-radius:50%!important}

/* ---------- gold nav pill ----------
   Recreates the old footballidentity.com gold-bar/green-tab
   pattern for real navigation, minus its cream background (the
   photo wash covers that now). The wrapping element already
   exists on every page (.top-stats on index.html, .nav-links on
   the other four) -- no markup change needed, just new styling. */
.nav-links{
  display:flex;align-items:center;gap:4px;
  background:var(--gold);border-radius:999px;padding:5px;
  box-shadow:0 4px 12px rgba(199,127,20,.28);
}
.nav-links a{border:none!important;color:var(--on-gold)!important;background:transparent!important}
.nav-links a:hover{background:rgba(255,255,255,.35)!important}
.nav-links a.active{background:var(--pitch)!important;color:#fff!important}

/* index.html has no dedicated nav wrapper element -- .nav-pill is
   a small markup addition around its existing .fid-nav-link
   anchors + Recover Team button, same idea as .nav-links above. */
.nav-pill{
  display:flex;align-items:center;gap:2px;
  background:var(--gold);border-radius:999px;padding:5px;
  box-shadow:0 4px 12px rgba(199,127,20,.28);
}
.nav-pill .fid-nav-link{border:none;color:var(--on-gold);background:transparent}
.nav-pill .fid-nav-link:hover{background:rgba(255,255,255,.35)}

/* ---------- dark-mode toggle switch ---------- */
.theme-toggle{
  display:inline-flex;align-items:center;gap:8px;background:transparent;border:none!important;padding:2px;cursor:pointer;
}
.theme-toggle-track{position:relative;width:38px;height:22px;border-radius:999px;background:var(--line);transition:background .2s ease;flex-shrink:0}
html.theme-dark .theme-toggle-track{background:var(--pitch)}
.theme-toggle-knob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s ease}
html.theme-dark .theme-toggle-knob{left:19px}
.theme-toggle-label{font-size:12px;font-weight:600;color:var(--ink-soft)}

@media(max-width:700px){
  .topbar,.panel-head{flex-direction:column;align-items:stretch}
  .nav-pill{flex-wrap:wrap;justify-content:center;width:100%}
  .top-stats{width:100%}
}

/* ---------- specificity guard ----------
   The Pitch, its player cards, and a couple of confirmation popups
   (team name/badge, "are you sure") aren't written directly into the
   page -- app.js builds them at runtime and injects its OWN <style>
   tag for each one, and that happens AFTER this stylesheet has
   already loaded. So for any selector both files style (like
   .fantasy-pitch or .player-avatar), app.js's plain old styling was
   winning the tie and quietly overriding the redesign -- which is
   why the pitch looked untouched. Adding "html" in front of a
   selector doesn't change what it matches, it just makes our rule a
   hair more specific so it always wins that tie, whatever order
   things load in. */
html .fantasy-pitch-panel{border-radius:22px;background:var(--surface);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid var(--glass-border)}
html .fantasy-pitch{border-radius:22px}
html .fantasy-pitch:before,html .fantasy-pitch:after,html .pitch-line-circle,html .pitch-box,html .pitch-goal{border-color:var(--glass-border)}
html .pitch-formation-control select{border-radius:999px}
html .player-avatar{border-radius:16px}

/* The captain/vice-captain markers on the pitch used a hard-edged
   rectangular outline left over from the old design -- it clashed
   against the new rounded/glass look, which is the "awful" box around
   the C/VC picks. Softened to a rounded ring in the new gold/sky
   colours instead. */
html .pitch-player .pitch-avatar{border-radius:16px}
html .pitch-player.captain .pitch-avatar{outline:3px solid var(--gold);outline-offset:2px;border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
html .pitch-player.vice .pitch-avatar{outline:3px solid var(--sky);outline-offset:2px;border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.35)}

/* Team name/badge editor and the "are you sure" confirmation popups
   -- separate from the Squad Builder's own .tm-modal, so they'd been
   missed entirely and were still the old flat cream style. */
html .team-modal{border-radius:22px;background:var(--surface);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid var(--glass-border)}
html .team-modal button{border-radius:999px!important}
html .team-modal input[type=text],html .team-modal input[type=file],html .team-badge-preview{border-radius:16px}

/* The name/fixture/position labels on the pitch, and the C/VC badge,
   were built assuming --paper and --ink always mean "light" and
   "dark" respectively -- true in the old single-theme design, but
   --paper flips to near-black and --ink flips to near-white in dark
   mode (since elsewhere they mean "page background" and "page text").
   That made these specific labels render as near-black text on a
   near-black tag, and near-white text on a light gold badge --
   invisible either way. Pinned to dedicated tokens that stay light
   (--pitch-ink) or stay dark (--on-gold) in both themes instead. */
html .pitch-name,html .pitch-fixture{color:var(--pitch-ink)}
html .pitch-position{color:rgba(244,241,228,.75)}
html .badge-c{color:var(--on-gold)}