:root{
  --ground:#080C13;
  --surface:#0F1621;
  --raised:#17202D;
  --hairline:#22303F;
  --hairline-soft:#18222E;
  --ink:#EAF1F8;
  --muted:#8EA1B6;
  --faint:#5D7086;
  --gold:#F0BC63;        /* always the player being searched */
  --blue:#57B4EC;        /* always the player being compared */
  --good:#4FC2A2;
  --green:#4FC2A2;
  --violet:#A98BEA;
  --coral:#EF8D72;
  --mint:#5FD0C0;
  --warm:rgba(240,188,99,.09);
  --cool:rgba(87,180,236,.10);
  --warn:#E0917A;
  --sans:"Barlow",system-ui,-apple-system,sans-serif;
  --cond:"Barlow Condensed","Barlow",system-ui,sans-serif;
  --radius:10px;
  --shell:1240px;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  position:relative;min-height:100vh;
  /* iOS counts the address bar in 100vh, leaving a gap once it retracts. */
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  font-family:var(--sans);font-size:15px;line-height:1.5;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-family:var(--cond);font-weight:600;letter-spacing:.005em;line-height:1.05}
p{margin:0}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}

.shell{width:min(var(--shell),100% - 2.5rem);margin-inline:auto;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--raised);padding:.5rem .8rem}

/* ── masthead ─────────────────────────────────────────── */
.top{border-bottom:1px solid var(--hairline);background:rgba(16,23,32,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  position:-webkit-sticky;position:sticky;top:0;z-index:30}
.top-inner{display:flex;align-items:center;gap:.9rem;flex-wrap:nowrap;
  padding:calc(.7rem + env(safe-area-inset-top)) 0 .7rem}
.brand{display:flex;align-items:center;gap:.5rem;flex:none}
.brand-mark{width:.7rem;height:1.15rem;background:var(--gold);
  clip-path:polygon(0 0,100% 18%,100% 82%,0 100%)}
.brand-name{font-family:var(--cond);font-weight:700;font-size:1.3rem;
  letter-spacing:.01em;white-space:nowrap}

.sports{display:flex;gap:.15rem;margin-left:.3rem;flex:none;
  overflow-x:auto;scrollbar-width:none;max-width:40vw}
.sports::-webkit-scrollbar{display:none}
.statuswrap{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex:none}
.sport{
  border:0;background:none;cursor:pointer;padding:.3rem .55rem;border-radius:6px;
  font-family:var(--cond);font-weight:600;font-size:.98rem;color:var(--faint);
  white-space:nowrap;
}
.sport[aria-current=true]{background:rgba(229,181,103,.12);color:var(--gold)}
.sport:disabled{cursor:default}
.sport:disabled{opacity:.42;cursor:default}
.top-note{margin-left:auto;font-size:.78rem;color:var(--faint);white-space:nowrap}

/* ── hero ─────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:2.4rem;align-items:start;margin:2.2rem 0 2.6rem}
.hero.searched{display:none}
.hero-left h1{font-size:clamp(2rem,4vw,2.85rem);font-weight:700;
  letter-spacing:-.008em;max-width:15ch;margin-bottom:1.6rem}

.finder{position:relative;max-width:520px}
.finder-field label{display:block;font-family:var(--cond);font-size:.95rem;
  font-weight:600;color:var(--muted);margin-bottom:.35rem}
.input-wrap{position:relative;display:flex;align-items:center}
.input-icon{position:absolute;left:.8rem;width:1.1rem;height:1.1rem;
  color:var(--faint);pointer-events:none}
#search{width:100%;padding:.72rem 2.4rem .72rem 2.5rem;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--radius);
  /* Below 16px iOS zooms the page when the field takes focus. */
  font-size:16px;-webkit-appearance:none;appearance:none}
#search::placeholder{color:var(--faint)}
#search:focus{border-color:var(--gold);outline:none}
.clear{position:absolute;right:.5rem;border:0;background:none;color:var(--faint);
  font-size:1.3rem;line-height:1;cursor:pointer;padding:.2rem .4rem}
@media (hover:hover){.clear:hover{color:var(--ink)}}
.suggestions{position:absolute;top:100%;left:0;right:0;z-index:25;margin:.35rem 0 0;
  padding:.25rem;list-style:none;background:var(--raised);border:1px solid var(--hairline);
  border-radius:var(--radius);max-height:20rem;overflow:auto;
  box-shadow:0 16px 40px rgba(0,0,0,.45)}
.suggestions li{display:grid;grid-template-columns:1.35rem 1fr auto;gap:.6rem;
  align-items:center;padding:.42rem .55rem;border-radius:6px;cursor:pointer}
.suggestions li[aria-selected=true]{background:rgba(229,181,103,.13)}
.sug-name{font-weight:500}
.sug-meta{font-size:.78rem;color:var(--muted);text-align:right;white-space:nowrap}

.intro-picks{margin-top:1.5rem}
.intro-picks-label{display:block;font-family:var(--cond);font-size:.9rem;
  color:var(--faint);margin-bottom:.5rem}
.intro-picks div{display:flex;flex-wrap:wrap;gap:.4rem}
.pick{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  border:1px solid var(--hairline);background:var(--surface);color:var(--ink);
  padding:.34rem .65rem .34rem .4rem;border-radius:99px;font-size:.88rem}
@media (hover:hover){.pick:hover{border-color:var(--gold);color:var(--gold)}}
.pick .flag{width:1.15rem;height:1.15rem}

.hero-right{display:grid;gap:.9rem}
.cover-card{background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:1.15rem 1.25rem}
.cover-card h2{font-size:1.1rem;margin-bottom:.9rem}
.bigstats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;
  padding-bottom:1rem;border-bottom:1px solid var(--hairline-soft)}
.bigstats b{display:block;font-family:var(--cond);font-weight:700;font-size:1.7rem;
  line-height:1;color:var(--gold)}
.bigstats span{display:block;font-size:.72rem;color:var(--muted);margin-top:.25rem}

.leaguelist{list-style:none;margin:.9rem 0;padding:0;display:grid;gap:.32rem}
.leaguelist li{display:grid;grid-template-columns:1.5rem 1fr auto;gap:.6rem;
  align-items:center;font-size:.85rem}
.lmark{width:1.5rem;height:1.5rem;border-radius:4px;object-fit:contain;
  filter:grayscale(1) brightness(1.7);opacity:.85}
.lmark.letters{display:flex;align-items:center;justify-content:center;
  background:var(--raised);border:1px solid var(--hairline);filter:none;
  font-family:var(--cond);font-weight:700;font-size:.68rem;color:var(--muted)}
.lname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcountry{font-size:.74rem;color:var(--faint)}

.posbars{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--hairline-soft)}
.posbars h3{font-family:var(--sans);font-size:.74rem;font-weight:600;
  color:var(--faint);margin-bottom:.5rem}
.posrow{display:grid;grid-template-columns:8.4rem 1fr 2.2rem;gap:.55rem;
  align-items:center;font-size:.78rem;color:var(--muted);padding:.1rem 0}
.posrow b{font-family:var(--cond);font-size:.88rem;color:var(--ink);text-align:right}
.postrack{height:.34rem;background:var(--ground);border-radius:99px;overflow:hidden}
.postrack span{display:block;height:100%;background:var(--blue);opacity:.6}

.notes{display:grid;gap:.55rem}
.note-row{display:flex;gap:.6rem;font-size:.82rem;color:var(--muted);line-height:1.45}
.dot{width:.45rem;height:.45rem;border-radius:50%;flex:none;margin-top:.45rem}
.dot.gold{background:var(--gold)}
.dot.blue{background:var(--blue)}

/* ── flags ────────────────────────────────────────────── */
.flag{
  display:inline-block;border-radius:50%;overflow:hidden;flex:none;
  background:var(--raised);border:1px solid var(--hairline);
  width:1.35rem;height:1.35rem;position:relative;
}
.flag img{width:100%;height:100%;object-fit:cover;display:block}
.flag .iso{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-family:var(--cond);font-weight:600;font-size:.58em;color:var(--muted);
}

/* ── panels ───────────────────────────────────────────── */
.panel{padding:1.2rem 1.3rem}
.panel-head{margin-bottom:1rem}
.panel-head h2{font-size:1.2rem}
.panel-sub{font-size:.82rem;color:var(--muted);margin-top:.2rem}

/* ── radar ────────────────────────────────────────────── */
.radar-wrap{display:flex;justify-content:center}
.radar-wrap svg{width:100%;max-width:420px;height:auto;overflow:visible}
.radar-ring{fill:none;stroke:var(--hairline-soft);stroke-width:1}
.radar-ring.outer{stroke:var(--muted);stroke-width:1.2;opacity:.55}
.radar-tick{font-family:var(--sans);font-size:8.5px;fill:var(--faint)}
.radar-ring.median{stroke:var(--hairline);stroke-dasharray:3 3}
.radar-spoke{stroke:var(--hairline-soft);stroke-width:1}
.radar-area{fill:rgba(229,181,103,.18);stroke:var(--gold);stroke-width:1.8;stroke-linejoin:round}
.radar-dot{fill:var(--gold)}
.radar-label{font-family:var(--sans);font-size:9.5px;fill:var(--muted)}
.radar-value{font-family:var(--cond);font-size:12px;font-weight:600;fill:var(--ink)}

.scale-help{font-size:.78rem;color:var(--muted);margin:.9rem 0 0;padding-top:.8rem;
  border-top:1px solid var(--hairline-soft);line-height:1.5}
.scale-help b{color:var(--ink);font-weight:600}

.radar-key{margin-top:.8rem;display:grid;gap:0}
.keyhead,.keyrow{display:grid;grid-template-columns:minmax(0,1fr) 3.2rem 5.4rem;
  gap:.7rem;align-items:center}
.keyhead{font-size:.68rem;color:var(--faint);padding-bottom:.3rem;
  border-bottom:1px solid var(--hairline)}
.keyhead span:nth-child(2),.keyhead span:nth-child(3){text-align:right}
.keyrow{padding:.32rem 0;border-bottom:1px solid var(--hairline-soft);font-size:.82rem}
.keyrow:last-child{border-bottom:0}
.keyrow .k{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.keyrow .v{font-family:var(--cond);font-weight:600;font-size:.98rem;text-align:right}
.keyrow .p{display:grid;grid-template-columns:1fr 1.5rem;gap:.45rem;align-items:center}
.keyrow .p b{font-family:var(--cond);font-weight:600;font-size:.9rem;text-align:right}
.pbar{height:.3rem;background:var(--ground);border-radius:99px;overflow:hidden}
.pbar span{display:block;height:100%;background:var(--gold);opacity:.75}

/* ── season history ───────────────────────────────────── */
.hlegend{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin-bottom:.9rem;
  font-size:.78rem;color:var(--muted)}
.lg{display:inline-flex;align-items:center;gap:.4rem}
.sw{width:.85rem;height:.5rem;border-radius:2px;background:var(--gold);display:inline-block}
.sw.alt{background:var(--blue)}
.tick{width:0;height:.75rem;border-left:1px dashed var(--faint);display:inline-block}
.tick.upper{border-left-style:solid;border-left-color:var(--muted)}

.history{display:grid;gap:.1rem}
.hrow{
  display:grid;grid-template-columns:4.1rem minmax(0,10.5rem) 1fr 3.1rem 3.9rem;
  gap:.85rem;align-items:center;padding:.52rem .1rem;
  border-bottom:1px solid var(--hairline-soft);
}
.hrow:last-child{border-bottom:0}
.hhead{font-size:.72rem;color:var(--faint);padding-bottom:.3rem;border-bottom:1px solid var(--hairline)}
.hhead .hnum,.hhead .hmins{font-family:var(--sans);font-weight:400;font-size:.72rem;color:var(--faint)}
.htrackhead{display:flex;justify-content:space-between}
.htrackhead em{font-style:normal}

.hseason{font-family:var(--cond);font-weight:600;font-size:1rem}
.hclub{font-size:.84rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hclub b{color:var(--ink);font-weight:500}

.htrack{position:relative;height:1.1rem;background:var(--ground);
  border-radius:3px;border:1px solid var(--hairline-soft);overflow:hidden}
.hfill{position:absolute;inset:2px;display:flex;gap:1px}
.hbar{height:100%;border-radius:2px;background:var(--gold);min-width:1px}
.hbar.alt{background:var(--blue)}
.hmark{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--faint);opacity:.75}
.hmark.upper{border-left:1px solid var(--muted);opacity:.5}

.hnum{font-family:var(--cond);font-weight:600;font-size:.95rem;text-align:right}
.hmins{font-size:.78rem;color:var(--faint);text-align:right}

/* ── percentile bars (goalkeepers) ────────────────────── */
.pctbars{display:grid;gap:.55rem;width:100%}
.pctrow{display:grid;grid-template-columns:minmax(0,9.5rem) 1fr 3.2rem 2.4rem;
  gap:.7rem;align-items:center}
.pctlabel{font-size:.84rem;color:var(--muted)}
.pcttrack{position:relative;height:.62rem;background:var(--ground);border-radius:99px;
  border:1px solid var(--hairline-soft);overflow:hidden}
.pctfill{position:absolute;inset:0 auto 0 0;background:var(--gold);border-radius:99px;opacity:.85}
.pctmid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--faint);opacity:.6}
.pctval{font-family:var(--cond);font-weight:600;font-size:.95rem;text-align:right}
.pctrank{font-size:.76rem;color:var(--faint);text-align:right}
.caveat{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--hairline-soft);
  font-size:.82rem;color:var(--muted);max-width:52ch}

/* ── footer / method ──────────────────────────────────── */
.foot{margin:2.5rem auto 4rem;border-top:1px solid var(--hairline);padding-top:1.2rem}
.foot summary{cursor:pointer;font-family:var(--cond);font-weight:600;
  font-size:1.05rem;color:var(--muted);list-style:none}
.foot summary::-webkit-details-marker{display:none}
.foot summary::before{content:"+";display:inline-block;width:1rem;color:var(--gold)}
.foot[open] summary::before,details[open] summary::before{content:"–"}
@media (hover:hover){.foot summary:hover{color:var(--gold)}}
.method{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;
  margin-top:1.3rem}
.mcol h3{font-size:.98rem;margin-bottom:.45rem;min-height:2.2rem}
.mcol p{font-size:.79rem;color:var(--muted);line-height:1.48;margin-bottom:.7rem}
.mcol p b{color:var(--ink);font-weight:600}
.fine{font-size:.76rem!important;color:var(--faint)!important;margin-bottom:.5rem!important}

.dvchart,.vchart{display:grid;gap:.35rem;margin-bottom:.8rem}
.dvrow{display:grid;grid-template-columns:6.6rem 1fr 2.6rem;gap:.55rem;align-items:center;
  font-size:.78rem;color:var(--muted)}
.dvtrack{position:relative;height:.85rem}
.dvmid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--hairline)}
.dvbar{position:absolute;top:50%;height:.4rem;transform:translateY(-50%);border-radius:2px}
.dvbar.right{left:50%;background:var(--blue);opacity:.75}
.dvbar.left{right:50%;background:var(--warn);opacity:.75}
.dvval{font-family:var(--cond);font-size:.88rem;color:var(--ink);text-align:right}

.vrow{display:grid;grid-template-columns:7.4rem 1fr 4.6rem;gap:.5rem;align-items:center;
  font-size:.78rem;color:var(--muted)}
.vtrack{height:.4rem;background:var(--ground);border-radius:99px;overflow:hidden}
.vtrack span{display:block;height:100%;background:var(--good);opacity:.8}
.vval{font-family:var(--cond);font-size:.85rem;color:var(--ink);text-align:right}
.vchance{display:none}

.missing{display:grid;gap:.7rem;margin-bottom:.8rem}
.have{display:flex;align-items:baseline;gap:.6rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--hairline-soft)}
.have b{font-family:var(--cond);font-weight:700;font-size:2rem;line-height:1;color:var(--gold)}
.have span{font-size:.78rem;color:var(--muted);max-width:14ch}
.gaps{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.gaps li{font-size:.79rem;color:var(--faint);padding-left:1.1rem;position:relative}
.gaps li::before{content:"×";position:absolute;left:0;color:var(--warn);opacity:.8}

/* ── responsive ───────────────────────────────────────── */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:1.6rem}
  .hero-left h1{max-width:none}
  .method{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .profile{grid-template-columns:1fr}
  /* superseded: the masthead now stays on one line at every width */
  .pool{width:100%;text-align:left;margin-left:0;order:3}
  .sports{margin-left:auto}
}
@media (max-width:560px){
  .shell{width:calc(100% - 1.6rem)}
  .hrow{grid-template-columns:3.6rem 1fr 2.9rem;gap:.3rem .6rem}
  .hhead{display:none}
  .htrack{grid-column:1/-1;margin-top:.3rem}
  .hmins{display:none}
  .pctrow{grid-template-columns:1fr 2.9rem 2.2rem}
  .pcttrack{grid-column:1/-1;order:3;margin-top:.2rem}
  .facts{grid-template-columns:repeat(2,1fr)}
  .dossier-head{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ── workspace ────────────────────────────────────────── */
.workspace{margin:1.4rem 0 2rem}

.playerbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.9rem 1.6rem;
  align-items:center;background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:1rem 1.2rem}
.pb-id{display:flex;align-items:center;gap:.75rem;min-width:0}
.pb-id .flag{width:2.3rem;height:2.3rem}
.pb-id h1{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;letter-spacing:-.01em}
.pb-role{font-size:.84rem;color:var(--muted);margin-top:.1rem}
.availability{font-size:.72rem;padding:.2rem .5rem;border-radius:5px;white-space:nowrap;
  border:1px solid transparent;margin-left:.4rem}
.availability.active{color:var(--good);border-color:rgba(91,184,155,.35);background:rgba(91,184,155,.1)}
.availability.gone{color:var(--warn);border-color:rgba(208,138,114,.32);background:rgba(208,138,114,.09)}
.pb-facts{display:flex;flex-wrap:wrap;gap:.2rem 1.6rem;margin:0;grid-column:1/-1;
  padding-top:.9rem;border-top:1px solid var(--hairline-soft)}
.pb-facts dt{font-size:.7rem;color:var(--faint)}
.pb-facts dd{margin:.05rem 0 0;font-family:var(--cond);font-weight:600;font-size:1.15rem;line-height:1.1}
.pb-facts dd small{display:block;font-family:var(--sans);font-size:.68rem;font-weight:400;
  color:var(--muted);margin-top:.1rem}
.pb-actions{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.srclink{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  border:1px solid var(--hairline);background:var(--raised);color:var(--ink);
  padding:.4rem .7rem;border-radius:7px;font-size:.82rem}
@media (hover:hover){.srclink:hover{border-color:var(--gold);color:var(--gold)}}
.srclink img,.srclink .monogram{width:1.05rem;height:1.05rem;border-radius:3px;flex:none}
.srclink .monogram{display:flex;align-items:center;justify-content:center;
  background:var(--hairline);font-family:var(--cond);font-weight:700;font-size:.64rem;color:var(--muted)}
.ghost{border:1px solid var(--hairline);background:var(--ground);color:var(--muted);
  padding:.4rem .7rem;border-radius:7px;font-size:.82rem;cursor:pointer}
@media (hover:hover){.ghost:hover{border-color:var(--gold);color:var(--gold)}}

.tabs{display:flex;gap:.15rem;border-bottom:1px solid var(--hairline);margin:1.3rem 0 1.1rem}
.tabs button{border:0;background:none;color:var(--muted);cursor:pointer;padding:.5rem .9rem;
  font-family:var(--cond);font-weight:600;font-size:1.05rem;border-bottom:2px solid transparent;
  margin-bottom:-1px}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--gold)}
@media (hover:hover){.tabs button:hover{color:var(--ink)}}

.panel{background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:1.15rem 1.25rem}
.panel-head{margin-bottom:.9rem}
.panel-head h2{font-size:1.15rem}
.panel-sub{font-size:.81rem;color:var(--muted);margin-top:.2rem}

/* Both columns run to the same height, and the slack goes to the one panel in
   each that can absorb it gracefully: the radar recentres, the career figures
   space out. Nothing is left hanging in a half-empty box. */
.profile-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:.9rem;align-items:stretch}
.profile-left,.profile-main{display:flex;flex-direction:column;gap:.9rem}
.profile-left > .panel,.profile-main > .panel{flex:0 0 auto}
.profile-left > .radar-panel{flex:1 1 auto}
.profile-main > .panel:last-child{flex:1 1 auto}
.history-panel{grid-column:1/-1}
.career{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem .6rem}
.career dt{font-size:.7rem;color:var(--faint);margin-bottom:.1rem}
.career dd{margin:0;font-family:var(--cond);font-weight:600;font-size:1.25rem;line-height:1.1}
.clubs{grid-column:1/-1;padding-top:.75rem;border-top:1px solid var(--hairline-soft);
  font-size:.79rem;color:var(--muted);line-height:1.55}
.clubs b{color:var(--ink);font-weight:500}

/* ── results ──────────────────────────────────────────── */
.results-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:.9rem}
.results-head h2{font-size:1.35rem}
.results-note{font-size:.84rem;color:var(--muted);margin-top:.25rem;max-width:68ch}
.results-count{font-size:.8rem;color:var(--faint);white-space:nowrap}
.results-count b{color:var(--ink);font-weight:600}

.filters{display:flex;flex-wrap:wrap;gap:.8rem 1.3rem;align-items:center;padding:.8rem 1rem;
  margin-bottom:.9rem;background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--radius)}
.filter{display:flex;align-items:center;gap:.55rem}
.filter-label{font-size:.74rem;color:var(--faint);white-space:nowrap}
.segmented{display:flex;background:var(--ground);border:1px solid var(--hairline);
  border-radius:7px;padding:2px;gap:2px}
.segmented button{border:0;background:none;color:var(--muted);cursor:pointer;
  padding:.26rem .55rem;border-radius:5px;font-size:.8rem;white-space:nowrap}
.segmented button[aria-pressed=true]{background:var(--raised);color:var(--gold)}
.segmented button:disabled{opacity:.4;cursor:not-allowed}
.switch{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--muted);cursor:pointer}
.switch input{accent-color:var(--gold);width:.95rem;height:.95rem}

.tagkey{font-size:.77rem;color:var(--faint);margin-bottom:.6rem;display:flex;
  align-items:center;gap:.35rem;flex-wrap:wrap}
.tagkey b{color:var(--ink);font-weight:600}
.tagkey-add{margin-left:.4rem}
.tagkey-full{color:var(--warn);border:1px solid rgba(208,138,114,.35);border-radius:4px;
  padding:.05rem .4rem;margin-right:.3rem}
.addbtn:disabled{opacity:.28;cursor:not-allowed;border-color:var(--hairline-soft)}
@media (hover:hover){.addbtn:disabled:hover{border-color:var(--hairline-soft);color:var(--muted)}}

.matches{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.match{position:relative;display:grid;grid-template-columns:1fr auto;gap:.4rem;align-items:stretch}
.match-btn{width:100%;text-align:left;cursor:pointer;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--radius);padding:.65rem .85rem;
  display:grid;align-items:center;gap:.85rem;min-height:3.8rem;
  grid-template-columns:1.3rem 3.2rem minmax(0,1fr) 2.8rem 6.2rem 4.2rem minmax(9rem,14rem)}
@media (hover:hover){.match-btn:hover{border-color:var(--gold);background:var(--raised)}}
.match.is-open .match-btn{border-color:var(--blue)}
.addbtn{border:1px solid var(--hairline);background:var(--surface);color:var(--muted);
  border-radius:var(--radius);cursor:pointer;font-size:1.2rem;line-height:1;
  display:grid;place-items:center}
@media (hover:hover){.addbtn:hover{border-color:var(--gold);color:var(--gold)}}
.addbtn.on{background:rgba(95,168,211,.14);border-color:var(--blue);color:var(--blue)}
.rank{font-family:var(--cond);font-weight:600;color:var(--faint);font-size:.92rem}
.score{display:grid;gap:.2rem}
.score-num{font-family:var(--cond);font-weight:700;font-size:1.3rem;line-height:1;color:var(--blue)}
.score-track{height:.2rem;background:var(--ground);border-radius:99px;overflow:hidden}
.score-track span{display:block;height:100%;background:var(--blue);opacity:.8}
.who{min-width:0}
.facts{display:contents}
.who-top{display:flex;align-items:center;gap:.4rem;min-width:0}
.who-top b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-top .flag{width:1.1rem;height:1.1rem}
.gone-tag{font-style:normal;font-size:.64rem;color:var(--warn);
  border:1px solid rgba(208,138,114,.4);border-radius:3px;padding:0 .25rem}
.who-sub{display:block;font-size:.76rem;color:var(--muted);margin-top:.12rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta-cell{font-family:var(--cond);font-weight:600;font-size:.95rem}
.meta-cell i{display:block;font-style:normal;font-family:var(--sans);font-size:.66rem;
  font-weight:400;color:var(--faint);margin-bottom:.08rem}
.reads{display:flex;gap:.22rem;justify-content:flex-end;flex-wrap:wrap}
.tag{font-style:normal;font-size:.69rem;padding:.1rem .38rem;border-radius:3px;
  border:1px solid var(--hairline);color:var(--muted);white-space:nowrap}
.tag.same{border-color:rgba(91,184,155,.32);color:var(--good);background:rgba(91,184,155,.08)}
.tag.more{border-color:rgba(95,168,211,.32);color:var(--blue);background:rgba(95,168,211,.08)}
.tag.less{border-color:rgba(208,138,114,.32);color:var(--warn);background:rgba(208,138,114,.08)}
.thin{margin-top:.8rem;padding:.75rem .9rem;border:1px dashed var(--hairline);
  border-radius:var(--radius);font-size:.84rem;color:var(--muted);max-width:72ch}
.linkish{border:0;background:none;color:var(--gold);cursor:pointer;
  text-decoration:underline;font:inherit;padding:0}

/* ── compare ──────────────────────────────────────────── */
.tray{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-bottom:.9rem;
  padding:.7rem .85rem;background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--radius)}
.trayitem{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--hairline);
  background:var(--ground);border-radius:99px;padding:.25rem .55rem .25rem .45rem;font-size:.82rem}
.trayitem .flag{width:1.1rem;height:1.1rem}
.trayitem b{font-weight:500}
.trayitem em{font-style:normal;font-size:.72rem;color:var(--faint)}
.swatch{width:.5rem;height:.5rem;border-radius:50%;flex:none}
.trayitem.gold .swatch{background:var(--gold)}
.trayitem.blue .swatch{background:var(--blue)}
.trayitem.green .swatch{background:var(--green)}
.trayitem.violet .swatch{background:var(--violet)}
.trayitem.coral .swatch{background:var(--coral)}
.trayitem.mint .swatch{background:var(--mint)}
.base-tag{font-size:.66rem;color:var(--gold);border:1px solid rgba(229,181,103,.35);
  border-radius:3px;padding:0 .25rem}
.dropbtn{border:0;background:none;color:var(--faint);cursor:pointer;font-size:1rem;
  line-height:1;padding:0 .1rem}
@media (hover:hover){.dropbtn:hover{color:var(--warn)}}
.trayhint{font-size:.78rem;color:var(--faint);margin-left:.3rem}

.compare-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:.9rem;align-items:start}
.cmp-metrics-panel{grid-column:1/-1}
.radar-area.gold{fill:rgba(229,181,103,.16);stroke:var(--gold);stroke-width:1.8}
.radar-area.blue{fill:rgba(95,168,211,.13);stroke:var(--blue);stroke-width:1.8}
.radar-area.green{fill:rgba(91,184,155,.12);stroke:var(--green);stroke-width:1.8}
.radar-area.violet{fill:rgba(169,139,214,.12);stroke:var(--violet);stroke-width:1.8}
.radar-area.coral{fill:rgba(222,138,118,.12);stroke:var(--coral);stroke-width:1.8}
.radar-area.mint{fill:rgba(95,208,192,.12);stroke:var(--mint);stroke-width:1.8}
.radar-area.line{fill:none}
.radar-pair{font-family:var(--cond);font-size:11px;font-weight:600}
.radar-pair .p-gold{fill:var(--gold)}
.radar-pair .p-blue{fill:var(--blue)}
.radar-pair .p-green{fill:var(--green)}
.radar-pair .p-violet{fill:var(--violet)}
.radar-pair .p-coral{fill:var(--coral)}
.radar-pair .p-mint{fill:var(--mint)}
.radar-pair .ps{fill:var(--faint)}

.mgroup{margin-bottom:1rem}
.mgroup:last-child{margin-bottom:0}
.mgroup h3{font-size:.78rem;font-family:var(--sans);font-weight:600;color:var(--faint);
  margin-bottom:.35rem;padding-bottom:.22rem;border-bottom:1px solid var(--hairline-soft)}
.cmp-metrics{--cols:2}
.mrow{display:grid;
  grid-template-columns:minmax(9.5rem,13rem) minmax(6rem,1fr) repeat(var(--cols),4.2rem);
  gap:.5rem .7rem;align-items:center;padding:.26rem 0}
.mhead{padding-bottom:.3rem;margin-bottom:.2rem;border-bottom:1px solid var(--hairline)}
.mv.name{font-family:var(--sans);font-size:.7rem;font-weight:500;opacity:1}
.mlabel{font-size:.79rem;color:var(--muted);line-height:1.25}
.mtrack{position:relative;height:1rem}
.mtrack::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--hairline);transform:translateY(-50%)}
.mmid{position:absolute;left:50%;top:.1rem;bottom:.1rem;width:1px;background:var(--hairline-soft)}
.mspan{position:absolute;top:50%;height:2px;background:var(--hairline);transform:translateY(-50%)}
.mdot{position:absolute;top:50%;width:.58rem;height:.58rem;border-radius:50%;
  transform:translate(-50%,-50%);border:1px solid var(--surface)}
.mdot.gold{background:var(--gold)}
.mdot.blue{background:var(--blue)}
.mdot.green{background:var(--green)}
.mdot.violet{background:var(--violet)}
.mdot.coral{background:var(--coral)}
.mdot.mint{background:var(--mint)}
.mv{font-style:normal;font-family:var(--cond);font-weight:600;font-size:.92rem;
  opacity:.6;text-align:right}
.mv.lead{opacity:1}
.mv.gold{color:var(--gold)}
.mv.blue{color:var(--blue)}
.mv.green{color:var(--green)}
.mv.violet{color:var(--violet)}
.mv.coral{color:var(--coral)}
.mv.mint{color:var(--mint)}

.trend{width:100%;height:auto}
.tgrid{stroke:var(--hairline-soft);stroke-width:1}
.tmed{stroke:var(--faint);stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.taxis{font-family:var(--sans);font-size:10px;fill:var(--faint)}
.taxis.title{font-size:9.5px;fill:var(--muted)}
.taxis.med{font-size:9px}
.tline polyline{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tline.gold polyline{stroke:var(--gold)}
.tline.blue polyline{stroke:var(--blue)}
.tline.green polyline{stroke:var(--green)}
.tline.violet polyline{stroke:var(--violet)}
.tline.coral polyline{stroke:var(--coral)}
.tline.mint polyline{stroke:var(--mint)}
.tdot.gold{fill:var(--gold)}
.tdot.blue{fill:var(--blue)}
.tdot.green{fill:var(--green)}
.tdot.violet{fill:var(--violet)}
.tdot.coral{fill:var(--coral)}
.tdot.mint{fill:var(--mint)}
.tlegend{display:flex;gap:1.1rem;margin-top:.5rem;font-size:.79rem;color:var(--muted);flex-wrap:wrap}
.tlegend .sw{width:.85rem;height:.5rem;border-radius:2px;display:inline-block}
.tlegend .sw.gold{background:var(--gold)}
.tlegend .sw.blue{background:var(--blue)}
.tlegend .sw.green{background:var(--green)}
.tlegend .sw.violet{background:var(--violet)}
.tlegend .sw.coral{background:var(--coral)}
.tlegend .sw.mint{background:var(--mint)}






.have{display:grid;grid-template-columns:2.6rem 1fr;gap:.6rem;align-items:center;
  padding-bottom:.7rem;margin-bottom:.7rem;border-bottom:1px solid var(--hairline-soft)}
.have b{font-family:var(--cond);font-weight:700;font-size:2.1rem;line-height:.9;
  color:var(--gold);text-align:right}
.have span{font-size:.77rem;color:var(--muted);line-height:1.3}

@media (max-width:980px){
  .profile-grid,.compare-grid{grid-template-columns:1fr}
  /* Stacked, there is no second column to match, so nothing should stretch. */
  .profile-left > .radar-panel,.profile-main > .panel:last-child{flex:0 0 auto}
  .profile-main > .panel:last-child .career{align-content:start}
  .playerbar{grid-template-columns:1fr}
}
@media (max-width:1100px){
  .match-btn{grid-template-columns:1.2rem 3rem minmax(0,1fr) 2.6rem 5.8rem 4rem}
  .reads{grid-column:3/-1;justify-content:flex-start;margin-top:.1rem}
}
@media (max-width:680px){
  .match-btn{grid-template-columns:2.8rem minmax(0,1fr) auto;gap:.5rem .6rem}
  .rank{display:none}
  .meta-cell i{display:inline;margin-right:.25rem}
  .reads{grid-column:1/-1}
  .career{grid-template-columns:repeat(2,1fr)}
  .mrow{grid-template-columns:1fr repeat(var(--cols),3.3rem);gap:.3rem .5rem}
  .mrow .mtrack{grid-column:1/-1;order:9}
  .mhead .mtrack,.mhead span:nth-child(2){display:none}
}

/* PCA component table */
.pctable{width:100%;border-collapse:collapse;margin:.1rem 0 .7rem;font-size:.74rem}
.pctable th{color:var(--faint);font-weight:500;text-align:left;padding:0 .4rem .3rem 0;
  border-bottom:1px solid var(--hairline)}
.pctable td{padding:.3rem .4rem .3rem 0;border-bottom:1px solid var(--hairline-soft);
  color:var(--muted);vertical-align:middle}
.pctable tfoot td{border-bottom:0;border-top:1px solid var(--hairline);color:var(--faint)}
.pctable .ax{width:2.2rem;font-family:var(--cond);font-weight:600;color:var(--ink);font-size:.86rem}
.pctable .sh{width:4.6rem;white-space:nowrap}
.pctable .sh b{font-family:var(--cond);font-weight:600;color:var(--ink);font-size:.84rem;
  margin-left:.3rem}
.pcbar{display:inline-block;width:1.6rem;height:.32rem;background:var(--ground);
  border-radius:99px;overflow:hidden;vertical-align:middle}
.pcbar span{display:block;height:100%;background:var(--gold);opacity:.75}
.pctable .dr{color:var(--faint);line-height:1.3}

/* method: league direction key and validation table */
.dvhead{display:flex;justify-content:space-between;font-size:.66rem;color:var(--faint);
  margin:.1rem 0 .3rem;padding:0 2.8rem 0 6.8rem}
.vtable{width:100%;border-collapse:collapse;font-size:.74rem;margin:.1rem 0 .7rem}
.vtable th{color:var(--faint);font-weight:500;text-align:left;padding:0 .35rem .3rem 0;
  border-bottom:1px solid var(--hairline)}
.vtable th:last-child{text-align:right}
.vtable td{padding:.28rem .35rem .28rem 0;border-bottom:1px solid var(--hairline-soft);
  color:var(--muted)}
.vtable .vpos{white-space:nowrap}
.vtable .vbar{width:3.4rem}
.vtable .vnum{text-align:right;width:1.9rem}
.vtable .vnum b{font-family:var(--cond);font-weight:600;color:var(--ink);font-size:.85rem}
.vtable .vof{text-align:right;color:var(--faint);white-space:nowrap;width:3rem}
.pctable .sh{width:5rem}

/* brand is a way home */
.brand{cursor:pointer;border-radius:5px;padding:.1rem .2rem}
@media (hover:hover){.brand:hover .brand-name{color:var(--gold)}}

/* club now differs from club then */
.nowat{font-style:normal;color:var(--faint);border:1px solid var(--hairline);
  border-radius:3px;padding:0 .3rem;margin-left:.35rem;font-size:.92em;white-space:nowrap}

/* a season too short to produce a rate */
.thin-season .hclub,.thin-season .hseason{opacity:.55}
.htrack.empty{border-style:dashed;display:flex;align-items:center;justify-content:center}
.htrack.empty em{font-style:normal;font-size:.7rem;color:var(--faint)}
.thin-season .hnum{color:var(--faint)}

/* compare tray */
.tray-score{font-family:var(--cond);font-weight:700;font-size:1rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--hairline);border-radius:4px;
  padding:0 .3rem;line-height:1.35}
.traybtn{border:1px solid var(--hairline);background:transparent;color:var(--faint);
  border-radius:4px;font-size:.7rem;padding:.1rem .35rem;cursor:pointer}
@media (hover:hover){.traybtn:hover{border-color:var(--gold);color:var(--gold)}}

/* the two profile columns end level */
.radar-panel{display:flex;flex-direction:column}
.radar-panel .radar-wrap{flex:1;display:flex;align-items:center;justify-content:center}
.scale-help{margin-top:auto}

/* the career panel takes the right column's slack */
.profile-main > .panel:last-child{display:flex;flex-direction:column}
.profile-main > .panel:last-child .career{flex:1;align-content:space-evenly}

/* rules between the method columns */
.method{column-gap:0}
.mcol{padding:0 1.25rem;border-left:1px solid var(--hairline)}
.mcol:first-child{padding-left:0;border-left:0}
.mcol:last-child{padding-right:0}
@media (max-width:980px){
  .mcol:nth-child(odd){padding-left:0;border-left:0}
  .mcol{padding-bottom:1.2rem}
}
@media (max-width:720px){
  .mcol{padding:0 0 1.2rem;border-left:0;border-bottom:1px solid var(--hairline)}
  .mcol:last-child{border-bottom:0}
}

/* the radar and the trend chart end level, as the profile columns do */
.compare-grid{align-items:stretch}
.compare-grid > .panel{display:flex;flex-direction:column}
.compare-grid > .panel > .panel-head{flex:none}
.compare-grid #cmp-radar,.compare-grid #cmp-trend{flex:1;display:flex;
  flex-direction:column;justify-content:center}
.compare-grid #cmp-trend .trend{margin-block:auto}
.compare-grid #cmp-trend .tlegend{flex:none}
.cmp-metrics-panel{display:block!important}

/* ── narrow screens ───────────────────────────────────── */
@media (max-width:680px){
  .shortlist-wrap{display:none}
  .top-inner{gap:.4rem;flex-wrap:nowrap}
  .brand-name{font-size:1.05rem}
  .sports{gap:.05rem;margin-left:.1rem;max-width:none;overflow:visible}
  .sport{padding:.24rem .3rem;font-size:.8rem}
  .statuswrap{gap:.3rem}
  .fresh-btn{padding:.22rem .45rem;font-size:0}
  .fresh-dot{margin-right:0}
  #short-count{font-size:0}
  .fresh-btn .fresh-word{display:none}
  /* Both dropdowns sized from the viewport, anchored under the header, with
     their own scroll so long content never runs off the bottom of the screen. */
  .fresh-panel,.short-panel{
    position:fixed !important;
    top:calc(3.2rem + env(safe-area-inset-top)) !important;
    left:.6rem !important;right:.6rem !important;
    width:auto !important;max-width:none !important;
    max-height:calc(100dvh - 4.4rem - env(safe-area-inset-top)) !important;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }

.hero{margin:1.4rem 0 2rem}
  .hero-left h1{font-size:1.75rem;margin-bottom:1.1rem}
  .bigstats b{font-size:1.4rem}
  .posrow{grid-template-columns:6.8rem 1fr 1.9rem;font-size:.74rem}

  /* tabs stay on one line and scroll if they must */
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{white-space:nowrap;padding:.45rem .65rem;font-size:.98rem}

  .playerbar{padding:.85rem .9rem;gap:.7rem}
  .pb-id h1{font-size:1.45rem}
  .pb-facts{gap:.5rem 1.1rem}
  .pb-facts dd{font-size:1rem}
  .pb-actions{width:100%}
  .pb-actions .ghost,.pb-actions .srclink{flex:1;justify-content:center}

  .panel{padding:.95rem 1rem}
  .filters{padding:.7rem .8rem}
  .filter{width:100%}
  .segmented{width:100%;overflow-x:auto;scrollbar-width:none}
  .segmented::-webkit-scrollbar{display:none}

  /* The original two-column card, just tightened: less padding, smaller gaps,
     age/contract/value on one wrapped line so the card is short. */
  .match{grid-template-columns:1fr 2.2rem;gap:.3rem}
  .match-btn{
    grid-template-columns:2.6rem minmax(0,1fr);
    gap:.15rem .55rem;padding:.5rem .65rem;min-height:0;align-items:start;
  }
  .rank{display:none}
  .score{grid-row:1;grid-column:1}
  .score-num{font-size:1.15rem}
  .score-track{width:1.9rem}
  .who{grid-row:1;grid-column:2;min-width:0}
  .who-sub{white-space:normal;font-size:.74rem;line-height:1.3}
  .nowat{display:inline-block;margin:0 0 0 .2rem}

  /* age/contract/value on one wrapping line, under the name */
  .facts{display:flex!important;flex-wrap:wrap;gap:.1rem .9rem;
    grid-column:2;margin-top:.15rem}
  .meta-cell{font-size:.78rem;font-family:var(--sans);font-weight:500;
    display:inline-flex;align-items:baseline;gap:.3rem}
  .meta-cell i{display:inline;font-size:.72rem;margin:0}

  .reads{grid-column:2;margin-top:.2rem;justify-content:flex-start}
  .why{grid-column:2;margin-top:.1rem}

  /* comparison table drops the track and keeps the columns legible */
  .mrow{grid-template-columns:1fr repeat(var(--cols),2.7rem);gap:.25rem .4rem}
  .mrow .mtrack{display:none}
  .mhead span:nth-child(2){display:none}
  .mv{font-size:.82rem}
  .mv.name{font-size:.62rem}
  .mlabel{font-size:.74rem}

  /* SVG text is in user units, so it shrinks with the viewBox */
  .taxis{font-size:14px}
  .taxis.title{font-size:13px}
  .radar-label{font-size:11px}
  .radar-value,.radar-pair{font-size:13px}
  .radar-tick{font-size:11px}

  .tray{padding:.6rem .65rem;gap:.35rem}
  .trayitem{font-size:.78rem;padding:.22rem .45rem .22rem .4rem}
  .traybtn{display:none}
  .trayhint{width:100%;margin-left:0}

  .hrow{grid-template-columns:3.4rem 1fr 2.7rem;gap:.3rem .5rem}
  .hhead{display:none}
  .htrack{grid-column:1/-1;margin-top:.25rem}
  .hmins{display:none}
  .hlegend{font-size:.72rem;gap:.25rem .7rem}

  .keyhead,.keyrow{grid-template-columns:minmax(0,1fr) 2.8rem 4.4rem;gap:.5rem}
  .career{grid-template-columns:repeat(2,1fr)}
  .pctable,.vtable{font-size:.72rem}
}

@media (max-width:420px){
  .mrow{grid-template-columns:1fr repeat(var(--cols),2.4rem)}
  .mv{font-size:.76rem}
  .career{grid-template-columns:repeat(2,1fr)}
  .pb-facts{gap:.45rem .9rem}
}

/* ── first-time steps ─────────────────────────────────── */
.howto{list-style:none;margin:1.8rem 0 0;padding:1.1rem 0 0;display:grid;gap:.7rem;
  border-top:1px solid var(--hairline)}
.howto li{display:grid;grid-template-columns:1.5rem 1fr;gap:.7rem;align-items:start;
  font-size:.83rem;color:var(--muted);line-height:1.45}
.howto b{font-family:var(--cond);font-weight:700;font-size:.9rem;color:var(--gold);
  background:rgba(229,181,103,.1);border:1px solid rgba(229,181,103,.28);
  border-radius:50%;width:1.5rem;height:1.5rem;display:grid;place-items:center}
.howto strong{color:var(--ink);font-weight:600}

/* ── shortcut to the comparison ───────────────────────── */
.results-right{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
.ghost.primary{border-color:rgba(95,168,211,.45);color:var(--blue);
  background:rgba(95,168,211,.1);font-weight:500}
@media (hover:hover){.ghost.primary:hover{border-color:var(--blue);color:var(--ink);background:rgba(95,168,211,.18)}}

/* ── comparison legend ────────────────────────────────── */
.mlegend{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin-bottom:.8rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--hairline-soft);
  font-size:.79rem;color:var(--muted)}
.mlegend .sw{width:.85rem;height:.5rem;border-radius:2px;display:inline-block;margin-right:.4rem}
.mlegend .sw.gold{background:var(--gold)}
.mlegend .sw.blue{background:var(--blue)}
.mlegend .sw.green{background:var(--green)}
.mlegend .sw.violet{background:var(--violet)}
.mlegend .sw.coral{background:var(--coral)}
.mlegend .sw.mint{background:var(--mint)}
.mv.name{display:flex;justify-content:flex-end}
.mv.name .sw{width:1.5rem;height:.28rem;border-radius:2px;display:block}
.mv.name .sw.gold{background:var(--gold)}
.mv.name .sw.blue{background:var(--blue)}
.mv.name .sw.green{background:var(--green)}
.mv.name .sw.violet{background:var(--violet)}
.mv.name .sw.coral{background:var(--coral)}
.mv.name .sw.mint{background:var(--mint)}

/* ── method columns as accordions ─────────────────────── */
.method .mcol > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:.6rem}
.method .mcol > summary::-webkit-details-marker{display:none}
.method .mcol > summary h3{min-height:0;margin:0}
.method .mcol > summary::after{content:"+";font-family:var(--cond);font-weight:600;
  color:var(--gold);font-size:1.1rem;display:none}
.method .mcol[open] > summary::after{content:"–"}
@media (min-width:981px){
  .method .mcol > summary{cursor:default;pointer-events:none;margin-bottom:.45rem;
    display:block;min-height:2.2rem}
}
@media (max-width:980px){
  .method .mcol > summary::after{display:block}
  .method .mcol > summary{padding:.7rem 0}
  .method .mcol{padding-bottom:0}
  .method .mcol[open]{padding-bottom:1rem}
}

@media (max-width:680px){
  .howto{margin-top:1.4rem}
  .results-right{width:100%;justify-content:space-between}
  .pb-actions .ghost.primary{flex-basis:100%}
  .mlegend{gap:.3rem .8rem;font-size:.75rem}
}


/* ── ambient light ────────────────────────────────────────
   Three wide, very low-opacity pools of colour, fixed behind the page. Fixed
   rather than scrolling so panels move across the light instead of dragging it
   along, which is what makes it read as depth rather than as a texture. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58rem 34rem at 8% -8%, var(--warm), transparent 62%),
    radial-gradient(52rem 34rem at 92% 4%, var(--cool), transparent 64%),
    radial-gradient(64rem 44rem at 50% 104%, rgba(87,180,236,.055), transparent 66%);
}
/* A slow vignette keeps the edges from feeling lit. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(3,6,11,.55) 100%);
}

/* ── panels catch the light ───────────────────────────── */
.panel,.dossier,.cover-card,.playerbar,.filters,.tray,.match-btn,.suggestions{
  background:
    linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,0) 46%),
    var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 1px 2px rgba(0,0,0,.35);
}
.panel,.cover-card,.playerbar{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),
  0 10px 26px -18px rgba(0,0,0,.9)}
@media (hover:hover){.match-btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),
  0 8px 20px -14px rgba(0,0,0,.9)}}

/* Panel headings get a hairline rule, the way a broadcast card does. */
.panel-head{position:relative;padding-bottom:.7rem;
  border-bottom:1px solid var(--hairline-soft)}
.panel-head::after{content:"";position:absolute;left:0;bottom:-1px;width:2.2rem;height:1px;
  background:var(--gold);opacity:.8}
.panel-head h2{letter-spacing:.002em}

.top{background:linear-gradient(180deg, rgba(8,12,19,.94), rgba(8,12,19,.78));
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%)}
@media (max-width:680px){.top{position:-webkit-sticky;position:sticky}
  .top-inner{position:relative}}
.brand-mark{box-shadow:0 0 14px rgba(240,188,99,.45)}
.tabs button[aria-selected=true]{text-shadow:0 0 18px rgba(240,188,99,.25)}
.score-num{text-shadow:0 0 16px rgba(87,180,236,.28)}
.bigstats b{text-shadow:0 0 20px rgba(240,188,99,.22)}

/* ── method: four columns, or a swipeable strip ───────── */
.method-nav{display:none}
@media (max-width:980px){
  .method-nav{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none;
    margin:1rem 0 .8rem;padding-bottom:.2rem}
  .method-nav::-webkit-scrollbar{display:none}
  .method-nav button{display:flex;align-items:center;gap:.4rem;white-space:nowrap;
    border:1px solid var(--hairline);background:var(--surface);color:var(--muted);
    border-radius:99px;padding:.35rem .7rem;font-size:.8rem;cursor:pointer}
  .method-nav button[aria-selected=true]{border-color:rgba(240,188,99,.45);
    color:var(--gold);background:rgba(240,188,99,.1)}
  .method-nav button i{font-style:normal;font-family:var(--cond);font-weight:700;
    font-size:.72rem;opacity:.65}

  .method{display:flex!important;grid-template-columns:none!important;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    gap:0;margin-top:0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .method::-webkit-scrollbar{display:none}
  .mcol{flex:0 0 100%;scroll-snap-align:start;padding:0 .1rem;border-left:0;
    border-bottom:0;min-width:0}
  .mcol h3{min-height:0;margin-bottom:.5rem}
}

/* the way back to the search must be findable at a glance */
.ghost.accent{border-color:rgba(240,188,99,.5);color:var(--gold);
  background:rgba(240,188,99,.12);font-weight:500;display:inline-flex;
  align-items:center;gap:.45rem}
@media (hover:hover){.ghost.accent:hover{border-color:var(--gold);background:rgba(240,188,99,.2);color:var(--ink)}}
.btn-icon{width:.95rem;height:.95rem;flex:none}
@media (max-width:680px){
  .pb-actions{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
  .pb-actions .ghost.accent{grid-column:1/-1;justify-content:center;order:-1}
  .pb-actions .ghost.primary{grid-column:1/-1;justify-content:center;order:-2}
}

/* the side a player turned out for — context, never a rating */
.teamctx{display:grid;gap:.1rem}
.tcrow{display:grid;grid-template-columns:1fr 3.2rem minmax(0,6.4rem);gap:.6rem;
  align-items:center;padding:.36rem 0;border-bottom:1px solid var(--hairline-soft);
  font-size:.8rem;color:var(--muted)}
.tcrow:last-child{border-bottom:0}
.tcval{font-family:var(--cond);font-weight:600;font-size:1rem;color:var(--ink);text-align:right}
.tcnote{font-size:.72rem;color:var(--faint)}
.clubnow{font-weight:600;color:var(--ink)}

/* league coefficients, one per metric per league */
.lgtable{width:100%;border-collapse:collapse;font-size:.71rem;margin:.1rem 0 .7rem}
.lgtable th{color:var(--faint);font-weight:500;text-align:right;padding:0 0 .3rem .35rem;
  border-bottom:1px solid var(--hairline)}
.lgtable th:first-child{text-align:left}
.lgtable td{padding:.26rem 0 .26rem .35rem;border-bottom:1px solid var(--hairline-soft);
  text-align:right;color:var(--muted);font-family:var(--cond);font-size:.82rem}
.lgname{text-align:left!important;font-family:var(--sans)!important;font-size:.73rem!important}
.lgval.up{color:var(--blue)}
.lgval.down{color:var(--warn)}

/* ── when this was last updated ───────────────────────── */
.freshness{position:relative}
.fresh-btn{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  border:1px solid var(--hairline);background:var(--surface);color:var(--muted);
  border-radius:99px;padding:.26rem .6rem;font-size:.73rem;white-space:nowrap;flex:none}
@media (hover:hover){.fresh-btn:hover{border-color:var(--gold);color:var(--gold)}}
.fresh-dot{width:.42rem;height:.42rem;border-radius:50%;background:var(--good);
  box-shadow:0 0 8px rgba(79,194,162,.7);flex:none}
.fresh-panel{position:absolute;right:0;top:calc(100% + .5rem);z-index:60;width:min(23rem,86vw);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 46%),var(--raised);
  border:1px solid var(--hairline);border-radius:var(--radius);padding:.9rem 1rem;
  box-shadow:0 18px 44px rgba(0,0,0,.55)}
.fresh-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  margin-bottom:.7rem}
.fresh-head h2{font-size:.95rem}
.tzswitch{display:flex;background:var(--ground);border:1px solid var(--hairline);
  border-radius:6px;padding:2px;gap:2px}
.tzswitch button{border:0;background:none;color:var(--muted);cursor:pointer;
  padding:.14rem .45rem;border-radius:4px;font-size:.7rem}
.tzswitch button[aria-pressed=true]{background:var(--surface);color:var(--gold)}

.fresh-list{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.fresh-list li{display:grid;grid-template-columns:1fr auto;gap:.15rem .6rem;
  padding:.5rem 0;border-bottom:1px solid var(--hairline-soft)}
.fresh-list li:last-child{border-bottom:0}
.fresh-list li.never{opacity:.6}
.fl-title{font-size:.82rem;color:var(--ink);font-weight:500}
.fl-when{font-family:var(--cond);font-weight:600;font-size:.82rem;color:var(--ink);
  text-align:right;white-space:nowrap}
.fl-since{grid-column:2;font-size:.68rem;color:var(--faint);text-align:right}
.fl-note{grid-column:1;font-size:.72rem;color:var(--muted);line-height:1.35}
.fresh-foot{margin-top:.7rem;padding-top:.65rem;border-top:1px solid var(--hairline-soft);
  font-size:.72rem;color:var(--faint);line-height:1.45}

@media (max-width:680px){
  /* A sticky header on a phone should not grow a second row, so the chip stays
     inline and sheds the word, leaving the dot and "3 days ago". */
  .freshness{position:static}
  .fresh-word{display:none}
  .fresh-btn{padding:.24rem .55rem;font-size:.72rem}
  .fresh-panel{left:.8rem;right:.8rem;width:auto;top:calc(100% + .35rem)}
  .fresh-head h2{font-size:.9rem}
  .fresh-list li{grid-template-columns:1fr auto}
  .fl-when{font-size:.78rem}
}


/* ── iOS ──────────────────────────────────────────────────
   Momentum scrolling inside the horizontal strips, and room for the home
   indicator at the foot of the page. */
.method,.tabs,.method-nav,.segmented,.suggestions{-webkit-overflow-scrolling:touch}
.foot{padding-bottom:calc(1.2rem + env(safe-area-inset-bottom))}
button,a{-webkit-tap-highlight-color:transparent}
input,button{border-radius:inherit}
.fresh-btn,.ghost,.pick,.sport,.segmented button,.tabs button,.addbtn,.match-btn{
  -webkit-appearance:none;appearance:none;touch-action:manipulation}
@supports (-webkit-touch-callout:none){
  /* Fixed backgrounds repaint badly during momentum scroll on iOS. */
  body::before,body::after{position:absolute;height:100%}
}

/* ── two routes on the landing page ───────────────────── */
.routes{display:grid;gap:1.4rem;margin-top:1.6rem;padding-top:1.2rem;
  border-top:1px solid var(--hairline)}
.route-tag{display:inline-block;font-family:var(--cond);font-weight:600;font-size:.82rem;
  color:var(--gold);border:1px solid rgba(240,188,99,.32);background:rgba(240,188,99,.08);
  border-radius:99px;padding:.14rem .6rem;margin-bottom:.6rem}
.route-tag.alt{color:var(--blue);border-color:rgba(87,180,236,.32);background:rgba(87,180,236,.08)}
.routes .howto{margin:0;padding:0;border:0;gap:.55rem}
.inline-plus{color:var(--gold);font-weight:700}

/* ── shortlist ────────────────────────────────────────── */
.shortlist-wrap{position:relative;flex:none}
.freshness{flex:none;position:relative}
#short-btn.has{border-color:rgba(240,188,99,.45);color:var(--gold);background:rgba(240,188,99,.1)}
/* Its own anchor and its own dimensions - it was inheriting .fresh-panel's
   right:0 against the wrong parent and rendering as a clipped sliver. */
.short-panel{
  position:absolute;top:calc(100% + .5rem);right:0;left:auto;z-index:60;
  width:min(25rem,88vw);max-width:90vw;
}
.short-actions{display:flex;gap:.35rem}
.short-actions .ghost{padding:.24rem .5rem;font-size:.72rem}
.short-list{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;
  max-height:20rem;overflow:auto}
.short-list li{display:grid;grid-template-columns:1fr auto;gap:.4rem;align-items:center;
  border-bottom:1px solid var(--hairline-soft)}
.short-list li:last-child{border-bottom:0}
.short-empty{padding:.9rem 0;font-size:.8rem;color:var(--faint);line-height:1.45;
  border-bottom:0!important}
.short-open{display:flex;align-items:center;gap:.55rem;background:none;border:0;
  cursor:pointer;text-align:left;padding:.45rem 0;color:var(--ink);width:100%}
.short-open .flag{width:1.3rem;height:1.3rem}
.short-open b{font-weight:500;font-size:.85rem;display:block}
.short-open em{font-style:normal;font-size:.72rem;color:var(--muted)}

.rowacts{display:flex;flex-direction:column;gap:.3rem;justify-content:center}
.savebtn,.addbtn{flex:none;width:2.4rem;height:1.7rem}
.savebtn{border:1px solid var(--hairline);background:var(--surface);color:var(--faint);
  border-radius:var(--radius);cursor:pointer;display:grid;place-items:center;padding:.2rem}
.savebtn svg{width:.95rem;height:.95rem}
.savebtn.on{color:var(--gold);border-color:rgba(240,188,99,.45);background:rgba(240,188,99,.1)}
.ghost.save.on{color:var(--gold);border-color:rgba(240,188,99,.45);background:rgba(240,188,99,.1)}
.ghost.save{display:inline-flex;align-items:center;gap:.35rem}

/* ── why two players matched ──────────────────────────── */
.why{grid-column:3/-1;font-size:.74rem;color:var(--faint);margin-top:.15rem;
  font-style:normal}

/* ── add anyone to a comparison ───────────────────────── */
.cmp-add{position:relative;margin-bottom:.8rem;max-width:34rem}
.cmp-add label{display:block;font-family:var(--cond);font-weight:600;font-size:.88rem;
  color:var(--muted);margin-bottom:.3rem}
#cmp-search{width:100%;padding:.55rem 1rem .55rem 2.3rem;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--radius);font-size:16px;
  -webkit-appearance:none;appearance:none}
#cmp-search:focus{border-color:var(--blue);outline:none}
#cmp-search:disabled{opacity:.5}
.cmp-add .input-icon{width:1rem;height:1rem;left:.7rem}
.cmp-add-note{font-size:.74rem;color:var(--faint);margin-top:.3rem}

/* ── repo link ────────────────────────────────────────── */
.repo-line{margin-bottom:1rem}
.repo-line a{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);
  text-decoration:none;font-size:.82rem;border:1px solid var(--hairline);
  background:var(--surface);border-radius:99px;padding:.32rem .75rem}

@media (max-width:680px){
  .shortlist-wrap{margin-left:auto}
  .freshness{margin-left:.3rem}
  #short-count{font-size:0}
  #short-btn.has #short-count{font-size:.72rem}
  .short-panel{left:.8rem;right:.8rem;width:auto}
  /* the scout shortcut has to exist on a phone too */
  .traybtn{display:inline-block;font-size:.65rem;padding:.08rem .3rem}
  .trayitem{flex-wrap:wrap}
  .rowacts{grid-auto-flow:column;gap:.25rem}
  .why{grid-column:1/-1}
  .routes{gap:1.1rem}
}
@media (min-width:981px){
  .routes{grid-template-columns:1fr 1fr;gap:2rem}
}

/* shortlist toggle inside the compare tray */
.traysave{border:0;background:none;color:var(--faint);cursor:pointer;
  display:inline-flex;align-items:center;padding:0 .1rem}
.traysave svg{width:.95rem;height:.95rem}
.traysave.on{color:var(--gold)}
.traysave:hover{color:var(--gold)}

/* ── shortlist: desktop only ──────────────────────────────────────────
   Placed last on purpose. Earlier attempts to hide these controls under
   680px kept losing to unrelated rules that happened to come after them in
   the file and redeclared display on the same selectors. Being last in
   source order, with matching specificity, means this always wins. */
@media (max-width:680px){
  .shortlist-wrap,
  .savebtn,
  .traysave,
  #save-player,
  .rowacts .savebtn {
    display:none !important;
  }
  /* .rowacts held the bookmark and the +/- side by side; with the bookmark
     gone it should not leave a gap where that column used to be. */
  .rowacts{gap:0}
  /* Same for the comparison tray - it had score, "Scout instead", bookmark,
     remove in a row. Losing the bookmark should tighten the gap, not leave a
     hole between "Scout instead" and the remove button. */
  .trayitem{gap:.3rem}
}

/* A live sport other than the current one renders as a link, not a button.
   Both must look the same. */
a.sport{text-decoration:none;display:inline-flex;align-items:center}

.staging-banner{background:#F0BC63;color:#101720;font:600 13px/1.4 system-ui,sans-serif;
  text-align:center;padding:.35rem .8rem;letter-spacing:.01em}