@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700&family=Inter:wght@400;500;600&family=Saira:wght@400;500;600&display=swap');
  :root{--base:#0e1419;--panel:#151d25;--panel-2:#1b252f;--line:#27323d;--line-soft:#1f2932;
    --ink:#eef2f5;--ink-soft:#9fb0bd;--ink-faint:#647585;--boro:#d8202f;--boro-soft:#ff5560;
    --gold:#e0b341;--green:#3ec07b;--green-soft:#5fd897;--squad:#6aa0e0;--squad-soft:#9cc1ee;
    --ring-track:#2a3540;--band-tint:#1d1216;--shadow:0 10px 40px rgba(0,0,0,.45);--r:14px;}
  *{box-sizing:border-box;margin:0;padding:0}
  a:focus-visible,button:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid var(--boro-soft);outline-offset:2px}
  html{scroll-behavior:smooth}
  body{background:var(--base);color:var(--ink);font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 22px}
  header.top{position:sticky;top:0;z-index:40;background:rgba(14,20,25,.82);
    backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
  .top-inner{display:flex;align-items:center;gap:18px;height:62px}
  .brand{display:flex;align-items:center;gap:13px;cursor:pointer}
  .crest{width:58px;height:58px;flex:none;border-radius:50%;display:grid;place-items:center;overflow:hidden;
    box-shadow:0 3px 12px rgba(216,32,47,.4)}
  .crest img{width:100%;height:100%;display:block;object-fit:cover}
  .brand b{font-family:'Saira Condensed';font-weight:700;font-size:26px;letter-spacing:.3px}
  .brand span{color:var(--ink-faint);font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:-3px}
  nav.top-nav{margin-left:auto;display:flex;gap:6px}
  nav.top-nav a{color:var(--ink-soft);text-decoration:none;font-size:13.5px;font-weight:500;
    padding:8px 13px;border-radius:8px;transition:.16s;cursor:pointer}
  nav.top-nav a:hover{color:var(--ink);background:var(--panel-2)}
  nav.top-nav a.on{color:#fff;background:var(--boro)}
  .unofficial{font-size:10px;font-weight:700;color:var(--boro-soft);border:2px solid var(--boro-soft);padding:3px 8px;
    border-radius:20px;letter-spacing:.08em;text-transform:uppercase}
  .window-strip{background:linear-gradient(90deg,#1a1115,#151d25);border-bottom:1px solid var(--line-soft)}
  /* Strip stays one line at every width: em-based gap/label scale with the font, and the clamp shrinks it to fit narrow screens (44px = the two-sided .wrap padding; /24.5 keeps the text within the inner width; 12px cap on normal screens). */
  .ws-inner{display:flex;align-items:center;gap:1.15em;height:34px;font-size:clamp(9.5px,calc((100vw - 44px)/24.5),12px);flex-wrap:nowrap;white-space:nowrap}
  .ws-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 2s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
  .ws-inner .lbl{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em;font-size:.84em}
  .ws-inner b{font-family:'Saira';font-weight:600;color:var(--ink)}
  .hero{padding:18px 0 26px}
  .eyebrow{color:var(--boro-soft);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
  .hero .eyebrow{color:var(--ink)}
  .hero .eyebrow .hl{color:var(--boro-soft)}
  .hero h1{font-family:'Saira Condensed';font-weight:700;font-size:clamp(34px,6vw,56px);line-height:.98;letter-spacing:.2px;max-width:760px}
  .hero h1 em{color:var(--boro-soft);font-style:normal}
  .hero p{color:var(--ink-soft);max-width:560px;margin-top:16px;font-size:15.5px}
  .hero .meta{display:flex;gap:26px;margin-top:24px;flex-wrap:wrap}
  .hero .meta .m b{font-family:'Saira Condensed';font-size:26px;font-weight:700;display:block}
  .hero .meta .m span{color:var(--ink-faint);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
  .section-head{display:flex;align-items:flex-end;gap:14px;margin:18px 0 16px;flex-wrap:wrap}
  .section-head h2{font-family:'Saira Condensed';font-weight:700;font-size:25px;letter-spacing:.3px}
  .section-head .note{color:var(--ink-faint);font-size:12.5px;margin-bottom:3px}
  .filters{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
  .chip{background:var(--panel);border:1px solid var(--line);color:var(--ink-soft);font-size:12.5px;
    font-weight:500;padding:7px 13px;border-radius:20px;cursor:pointer;transition:.15s;font-family:inherit}
  .chip:hover{border-color:var(--boro);color:var(--ink)}
  .chip.on{background:var(--boro);border-color:var(--boro);color:#fff}
  .board-search{position:relative;display:flex;align-items:center;margin:0 0 12px}
  .board-search .bs-ic{position:absolute;left:14px;width:16px;height:16px;color:var(--ink-faint);pointer-events:none}
  .bs-input{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--ink);
    font-family:inherit;font-size:13.5px;padding:11px 40px;border-radius:10px;transition:.15s;-webkit-appearance:none;appearance:none}
  .bs-input::placeholder{color:var(--ink-faint)}
  .bs-input:focus{outline:none;border-color:var(--boro);box-shadow:0 0 0 3px rgba(216,32,47,.14)}
  .bs-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
  .bs-clear{position:absolute;right:8px;background:none;border:none;color:var(--ink-faint);
    font-size:22px;line-height:1;cursor:pointer;padding:4px 9px;border-radius:8px;transition:.14s}
  .bs-clear:hover{color:var(--ink)}
  .bs-clear.hide{display:none}
  .board-empty{padding:22px 20px;text-align:center;color:var(--ink-faint);font-size:13px}
  .be-cta{margin-top:12px;background:var(--boro);border:1px solid var(--boro);color:#fff;
    font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 16px;border-radius:20px;cursor:pointer;transition:.14s}
  .be-cta:hover{background:#b81b28;border-color:#b81b28}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .board{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
  .board-row{display:grid;grid-template-columns:42px 1fr 90px 148px 190px 104px;align-items:center;gap:12px;
    padding:12px 20px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:.14s}
  .board-row:last-child{border-bottom:none}
  .board-row:hover{background:var(--panel-2)}
  .board-row.head{cursor:default;background:transparent;padding:12px 20px;border-bottom:1px solid var(--line)}
  .board-row.head span{color:var(--ink-faint);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;text-align:center}
  .board-row.head span:nth-child(2){text-align:left}
  .need-col{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
  .need-tag{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);background:var(--panel-2);border:1px solid var(--line-soft);border-radius:10px;padding:3px 9px;line-height:1.3;white-space:normal;text-align:center;max-width:92px}
  .need-stars{font-size:11px;gap:1px}
  .board-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 4px;flex-wrap:wrap}
  .board-pager.hide{display:none}
  .bp-btn{background:var(--panel-2);border:1px solid var(--line);color:var(--ink-soft);
    font-family:'Inter';font-size:12.5px;font-weight:600;letter-spacing:.02em;
    padding:8px 16px;border-radius:7px;cursor:pointer;transition:.14s}
  .bp-btn:hover:not(:disabled){border-color:var(--boro);color:#fff;background:rgba(216,32,47,.12)}
  .bp-btn:disabled{opacity:.32;cursor:default}
  .bp-info{font-size:11.5px;color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase;font-weight:600;min-width:128px;text-align:center}
  .rank{font-family:'Saira Condensed';font-weight:700;font-size:21px;color:var(--ink-faint);text-align:center}
  .rank.top3{color:var(--boro-soft)}
  .pl-name{display:flex;flex-direction:column}
  .pl-name b{font-family:'Saira';font-weight:600;font-size:16px;letter-spacing:.2px}
  .pl-name small{color:var(--ink-faint);font-size:12px;margin-top:1px}
  .pl-factors{display:flex;flex-direction:column;gap:3px;margin-top:6px}
  .pf{font-size:11.5px;line-height:1.3;color:var(--ink-soft);padding-left:15px;position:relative}
  .pf::before{content:"\25CF";position:absolute;left:0;top:.06em;font-size:9px}
  .pf.pro::before{color:#3fb950}
  .pf.con::before{color:#e84c3d}
  .cost{font-family:'Saira Condensed';font-weight:600;font-size:16px;color:var(--ink-soft);text-align:center}
  /* in-row vote */
  .rowvote{display:flex;flex-direction:column;gap:5px}
  .rowvote .rv-btns{display:flex;gap:6px}
  .rowvote .rv{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;
    font-weight:600;font-size:11.5px;padding:7px 4px;border-radius:7px;cursor:pointer;border:1px solid var(--line);
    background:var(--panel-2);color:var(--ink-soft);transition:.14s}
  .rowvote .rv .g{font-size:13px}
  .rowvote .rv.yes:hover{border-color:var(--green);color:var(--green-soft)}
  .rowvote .rv.no:hover{border-color:var(--boro);color:var(--boro-soft)}
  .rowvote .rv.yes.on{background:var(--green);border-color:var(--green);color:#06140c}
  .rowvote .rv.no.on{background:var(--boro);border-color:var(--boro);color:#fff}
  .rowvote .rv-split{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-faint)}
  .rowvote .rv-split b{font-family:'Saira Condensed';font-weight:600;font-size:11px}
  .rowvote .rv-split .sy{color:var(--green-soft)} .rowvote .rv-split .sn{color:var(--boro-soft)}
  .rowvote .rv-split .rv-thanks{color:var(--ink-faint);font-style:italic;font-size:10px}
  .pl-name .nm{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .pos-inline{font-family:'Saira Condensed';font-weight:600;font-size:11px;color:var(--ink-soft);border:1px solid var(--line);border-radius:5px;padding:2px 7px;letter-spacing:.04em;white-space:nowrap}
  /* Fan Scout Score as a conic ring gauge at every width; --ov is set inline
     per row by buildBoard and doubles as the percentage fill. The visible
     column label lives in the board header row; the in-box label stays in
     the accessibility tree (visually hidden, not display:none) so each row
     still announces what the bare number means - the header row is a div
     grid, not a table, so screen readers do not associate it per cell, and
     on phones the header is hidden entirely. */
  .score-box{position:relative;width:58px;height:58px;border-radius:50%;justify-self:center;display:flex;align-items:center;justify-content:center;
    background:conic-gradient(var(--boro) calc(var(--ov,0)*1%),var(--ring-track) 0)}
  .score-box::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--panel)}
  /* hover-capable pointers only: on touch, :hover sticks after a tap and
     would flip the ring centre against the unchanged mobile band */
  @media(hover:hover) and (min-width:681px){.board-row:hover .score-box::before{background:var(--panel-2)}}
  .score-box .sb-num{font-family:'Saira Condensed';font-weight:700;font-size:20px;line-height:1;color:var(--ink);position:relative}
  .score-box .sb-lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .rowvote .rv-split.hide{display:none}
  /* mobile-card-only elements: the inline Est. cost in the club line and the
     expand chevron; both stay hidden at desktop widths */
  .cost-inline{display:none}
  .bd-toggle{display:none}
  .depth-wrap{margin-top:0}
  .depth-grid{display:flex;flex-direction:column;gap:14px;margin-top:8px}
  .depth-grid .slot{width:auto}
  /* formation pitch (web only) */
  .formation-pitch{display:none;margin-top:10px}
  .formation-pitch.on{display:block}
  .fp-pitch{position:relative;display:flex;flex-direction:column;gap:16px;
    background:linear-gradient(180deg,#14391f,#0e2917);border:1px solid var(--line);border-radius:14px;
    padding:26px 20px;overflow:hidden}
  .fp-pitch:before{content:"";position:absolute;left:18px;right:18px;top:50%;height:1px;background:rgba(255,255,255,.10)}
  .fp-pitch:after{content:"";position:absolute;left:50%;top:50%;width:96px;height:96px;border:1px solid rgba(255,255,255,.10);border-radius:50%;transform:translate(-50%,-50%)}
  .fp-line{position:relative;z-index:1;display:flex;justify-content:space-around;align-items:flex-start;gap:10px}
  .fp-node{flex:0 1 130px;max-width:140px;text-align:center;background:rgba(8,14,18,.72);
    border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:8px 9px 9px}
  .fp-node .fp-pos{font-family:'Saira Condensed';font-weight:700;font-size:11px;letter-spacing:.06em;color:var(--boro-soft)}
  .fp-node .fp-name{font-weight:600;font-size:12.5px;color:#fff;margin-top:2px;line-height:1.18}
  .fp-node .fp-badge{margin-top:5px;display:inline-flex;gap:1px;font-size:12px;line-height:1}
  .fp-node .fp-badge i{font-style:normal;position:relative;color:rgba(255,255,255,.22)}
  .fp-node .fp-badge i:before{content:"\2605"}
  .fp-node .fp-badge i.f{color:var(--boro-soft)}
  .fp-node .fp-badge i.h:after{content:"\2605";position:absolute;left:0;top:0;width:50%;overflow:hidden;color:var(--boro-soft)}
  .fp-node .fp-flag{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.05em;margin-top:3px;color:var(--ink-faint)}
  .fp-node.empty .fp-name{color:var(--ink-faint)}
  .line{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
  /* position puck + stacked depth card */
  .slot{width:158px;position:relative}
  .slot .puck{font-family:'Saira Condensed';font-weight:700;font-size:12px;letter-spacing:.1em;color:#fff;
    text-transform:uppercase;text-align:center;padding:5px;border-radius:8px 8px 0 0;
    background:linear-gradient(90deg,var(--boro),#a3161f);border:1px solid var(--boro)}
  .slot .puck .puck-x{font-weight:600;font-size:10px;letter-spacing:0;opacity:.82;margin-left:4px}
  .slot .stack{background:var(--panel);border:1px solid var(--line);border-top:none;border-radius:0 0 8px 8px;overflow:hidden}
  .slot .dp{display:flex;align-items:center;gap:9px;padding:8px 11px;
    border-bottom:1px solid var(--line-soft);transition:background .12s}
  .slot .dp:last-child{border-bottom:none}
  .slot .dp:hover{background:var(--panel-2)}
  .slot .dp .dp-stars{display:inline-flex;gap:1px;flex-shrink:0;width:78px;font-size:13px;line-height:1}
  .slot .dp .dp-stars i{font-style:normal;position:relative;color:var(--line)}
  .slot .dp .dp-stars i:before{content:"\2605"}
  .slot .dp .dp-stars i.f{color:var(--boro)}
  .slot .dp .dp-stars i.h:after{content:"\2605";position:absolute;left:0;top:0;width:50%;overflow:hidden;color:var(--boro)}
  .slot .dp .nm{flex:1;font-family:'Saira';font-size:12.5px;font-weight:500;
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .slot .dp.first .nm{font-weight:600;color:var(--ink)}
  .slot .dp:not(.first) .nm{color:var(--ink-soft);font-size:12px}
  .slot .dp .tag{margin-left:auto}
  .tag{font-size:8.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    padding:2px 6px;border-radius:4px;white-space:nowrap;flex-shrink:0}
  .tag.injury{background:rgba(224,179,65,.16);color:var(--gold)}
  .tag.injured{background:rgba(230,90,60,.18);color:#f0947a}
  .tag.spec{background:rgba(120,160,210,.16);color:#8fb4e6}
  .tag.sale{background:rgba(216,32,47,.16);color:var(--boro-soft)}
  .tag.loan{background:rgba(62,192,123,.14);color:var(--green-soft)}
  .tag.ooc{background:rgba(180,140,220,.16);color:#c39fe6}
  .tag.oop{background:rgba(150,165,180,.16);color:#aab8c4}
  .slot .empty{padding:9px 10px;font-size:11px;color:var(--boro-soft);font-style:italic}
  /* hover highlight whole position */
  .slot{transition:transform .14s}
  .slot:hover{transform:translateY(-3px);z-index:5}
  .slot:hover .puck{box-shadow:0 4px 14px rgba(216,32,47,.5)}
  .slot:hover .stack{border-color:var(--boro);box-shadow:0 10px 26px rgba(0,0,0,.5)}
  .depth-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px;font-size:11.5px;color:var(--ink-soft)}
  .depth-legend .tag{font-size:8.5px}
  .xfer-wrap{margin-top:0}
  .xfer-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:760px){.xfer-grid{grid-template-columns:1fr}}
  .xfer-col{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
  .xfer-col .xh{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);
    font-family:'Saira Condensed';font-weight:700;font-size:16px;letter-spacing:.02em}
  .xfer-col.in .xh{color:var(--green-soft)} .xfer-col.out .xh{color:var(--boro-soft)}
  .xfer-col .xh .xh-title{display:flex;align-items:center;gap:9px}
  .xfer-col .xh .ar{font-size:15px}
  .xfer-col .xh .xh-fig{margin-left:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .xh-fig .xh-lab{font-family:'Saira Condensed';font-weight:700;font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft)}
  .xh-fig .xh-val{font-family:'Saira Condensed';font-weight:700;font-size:18px}
  .xh-fig .xh-sub{width:100%;color:var(--ink-faint);font-size:11px;text-align:right;font-weight:400;letter-spacing:0;text-transform:none}
  .xrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;padding:12px 18px;border-bottom:1px solid var(--line-soft)}
  .xrow:last-child{border-bottom:none}
  .xrow .xn{font-family:'Saira';font-weight:600;font-size:14px;white-space:nowrap}
  .xrow .xn small{display:block;color:var(--ink-faint);font-size:11.5px;font-weight:400;margin-top:1px;white-space:normal}
  .xrow .xn .xpos{font-family:'Saira Condensed';font-weight:600;font-size:11px;color:var(--ink-faint);
    border:1px solid var(--line);border-radius:5px;padding:1px 6px;margin-left:5px;letter-spacing:.04em;vertical-align:middle}
  .xrow .xmeta{text-align:right;font-size:11px;color:var(--ink-soft);align-self:center}
  .xrow .xmeta .xtype{display:block;font-family:'Saira Condensed';font-weight:600;font-size:12px}
  .xrow .xmeta .xfee{color:var(--ink-faint);font-size:10.5px}
  .xfer-empty{padding:16px 18px;color:var(--ink-faint);font-size:12.5px;font-style:italic}
  .xfer-tally{display:flex;align-items:baseline;justify-content:center;gap:11px;flex-wrap:wrap;margin-bottom:14px;padding:13px 18px;
    background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r)}
  .xfer-tally .xtl-lab{font-family:'Saira Condensed';font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft)}
  .xfer-tally .xtl-val{font-family:'Saira Condensed';font-weight:700;font-size:20px}
  .xfer-tally .xtl-val.pos{color:var(--green-soft)} .xfer-tally .xtl-val.neg{color:var(--boro-soft)}
  .xfer-tally .xtl-sub{color:var(--ink-faint);font-size:11.5px}
  .dep-wrap{margin-top:0}
  .dep-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:760px){.dep-grid{grid-template-columns:1fr}}
  .depcard{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);
    padding:18px 20px;transition:border-color .14s,transform .14s}
  .depcard:hover{border-color:var(--line);transform:translateY(-2px)}
  .depcard .dhead{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
  .depcard .dname{flex:1}
  .depcard .dname b{font-family:'Saira';font-weight:600;font-size:16px;display:block}
  .depcard .dname small{color:var(--ink-faint);font-size:12px}
  .depcard .dval{text-align:right}
  .depcard .dval b{font-family:'Saira Condensed';font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap}
  .depcard .dval small{display:block;color:var(--ink-faint);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
  .depcard .dreason{font-size:12.5px;color:var(--ink-soft);margin-bottom:14px;line-height:1.5}
  .vote4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:7px}
  .vote4 button{font-family:inherit;font-weight:600;font-size:11.5px;padding:9px 3px;border-radius:8px;
    cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--ink-soft);transition:.14s}
  .vote4 button:hover{color:var(--ink)}
  .vote4 button[data-k="start"]:hover{border-color:var(--green);color:var(--green-soft)}
  .vote4 button[data-k="squad"]:hover{border-color:var(--squad);color:var(--squad-soft)}
  .vote4 button[data-k="loan"]:hover{border-color:var(--gold);color:var(--gold)}
  .vote4 button[data-k="sell"]:hover{border-color:var(--boro);color:var(--boro-soft)}
  .vote4 button.on[data-k="start"]{background:var(--green);border-color:var(--green);color:#06140c}
  .vote4 button.on[data-k="squad"]{background:var(--squad);border-color:var(--squad);color:#06121f}
  .vote4 button.on[data-k="loan"]{background:var(--gold);border-color:var(--gold);color:#1a1206}
  .vote4 button.on[data-k="sell"]{background:var(--boro);border-color:var(--boro);color:#fff}
  .vote4 button[data-k="contract"]:hover{border-color:var(--green);color:var(--green-soft)}
  .vote4 button.on[data-k="contract"]{background:var(--green);border-color:var(--green);color:#06140c}
  .vote4 button[data-k="release"]:hover{border-color:var(--boro);color:var(--boro-soft)}
  .vote4 button.on[data-k="release"]{background:var(--boro);border-color:var(--boro);color:#fff}
  .vote4 button:disabled:not(.on){opacity:.4;cursor:default}
  .vhint{font-size:10.5px;color:var(--ink-faint);margin-top:9px;text-align:center;font-style:italic}
  .vresult{margin-top:11px}
  .vresult.hide{display:none}
  .vsplit{display:flex;height:6px;border-radius:4px;overflow:hidden;background:var(--line)}
  .vpct{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:10.5px;color:var(--ink-faint);margin-top:7px}
  .vcount{font-size:10.5px;color:var(--ink-faint);margin-top:8px;text-align:right;font-style:italic}
  footer{border-top:1px solid var(--line-soft);margin-top:60px;padding:30px 0;color:var(--ink-faint);font-size:12px;text-align:center}
  footer b{color:var(--ink-soft)}
  .report{position:fixed;inset:0;z-index:60;background:var(--base);overflow-y:auto;transform:translateY(20px);opacity:0;pointer-events:none;transition:.28s ease}
  .report.open{transform:none;opacity:1;pointer-events:auto}
  .rep-top{position:sticky;top:0;z-index:5;background:rgba(14,20,25,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
  .rep-top-inner{display:flex;align-items:center;height:58px;gap:14px}
  .back{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:13px;
    font-weight:500;padding:8px 14px;border-radius:8px;cursor:pointer}
  .back:hover{border-color:var(--boro)}
  .rep-top-inner .rt-name{font-family:'Saira Condensed';font-weight:700;font-size:18px}
  .rep-hero{padding:36px 0 28px;border-bottom:1px solid var(--line-soft)}
  .rep-hero .eyebrow{margin-bottom:10px}
  .rep-hero h1{font-family:'Saira Condensed';font-weight:700;font-size:clamp(32px,6vw,50px);line-height:1}
  .rep-id{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;color:var(--ink-soft);font-size:13.5px}
  .rep-need{display:flex;align-items:center;gap:8px;margin-top:12px}
  .rep-need .rn-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--ink-faint)}
  .rep-id b{color:var(--ink);font-weight:600}
  .rep-banner{display:inline-block;background:rgba(216,32,47,.14);border:1px solid var(--boro);color:var(--boro-soft);padding:6px 13px;border-radius:8px;font-size:12.5px;font-weight:600;margin-bottom:14px}
  .rep-updated{margin-top:14px;color:var(--ink-faint);font-size:11px;font-style:italic}
  .dash{display:grid;grid-template-columns:200px 1fr;gap:26px;margin:30px 0;background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);padding:26px}
  @media(max-width:680px){.dash{grid-template-columns:1fr;gap:18px}}
  .dash-overall{text-align:center;border-right:1px solid var(--line-soft);padding-right:24px}
  @media(max-width:680px){.dash-overall{border-right:none;border-bottom:1px solid var(--line-soft);padding-right:0;padding-bottom:18px}}
  .dash-overall .big{font-family:'Saira Condensed';font-weight:700;font-size:74px;line-height:.85;color:var(--boro-soft)}
  .dash-overall .slash{color:var(--ink-faint);font-size:20px;font-family:'Saira Condensed'}
  .dash-overall .lbl{color:var(--ink-faint);font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin-top:8px}
  .dash-overall .modelv{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-soft);
    background:var(--panel-2);border:1px solid var(--line);padding:6px 11px;border-radius:8px}
  .dash-overall .modelv .ic{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:11px}
  .ratings{display:flex;flex-direction:column;gap:13px;justify-content:center}
  .rrow{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:14px}
  .rrow .rl{font-size:13px;color:var(--ink-soft)}
  .stars{display:flex;gap:2px;font-size:16px;line-height:1}
  .stars i{font-style:normal;position:relative;color:var(--line)}
  .stars i:before{content:"\2605"}
  .stars i.f{color:var(--boro)}
  .stars i.h:after{content:"\2605";position:absolute;left:0;top:0;width:50%;overflow:hidden;color:var(--boro)}
  .rep-body{display:block;max-width:840px;padding:32px 0 60px}
  @media(max-width:880px){.rep-body{grid-template-columns:1fr}}
  .prose h3{font-family:'Saira Condensed';font-weight:700;font-size:20px;margin:26px 0 9px;padding-top:18px;border-top:1px solid var(--line-soft)}
  .prose h3:first-child{border-top:none;padding-top:0;margin-top:0}
  .prose .score-pill{display:inline-block;font-family:'Saira Condensed';font-weight:700;font-size:13px;color:var(--boro-soft);
    background:rgba(216,32,47,.12);padding:3px 10px;border-radius:6px;margin-bottom:10px}
  .prose .score-pill .pill-stars{display:inline-flex;gap:2px;font-size:13px;line-height:1;vertical-align:-2px;margin-left:6px}
  .prose p{color:var(--ink-soft);font-size:14.5px;margin-bottom:12px}
  .prose .verdict-block{background:var(--panel);border:1px solid var(--line-soft);border-left:3px solid var(--boro);border-radius:10px;padding:20px 22px;margin-top:8px}
  .prose .verdict-block .vb-num{font-family:'Saira Condensed';font-weight:700;font-size:30px;color:#fff}
  .prose a.rep-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 4px;padding:14px 18px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;font-weight:600;font-size:14.5px;transition:.15s}
  .prose a.rep-cta:hover,.prose a.rep-cta:focus-visible{border-color:var(--boro-soft);background:var(--panel);outline:none}
  .prose a.rep-cta .rep-cta-arr{color:var(--boro-soft);font-size:19px;flex:none}
  .chartbox{position:relative;background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;padding:18px;margin:14px 0 4px}
  .chartbox .ct{font-size:12px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
  svg.spark{width:100%;height:130px;display:block}
  svg.spark .sparkhit{cursor:pointer}
  svg.spark .sparkdot{transition:r .12s}
  .sparktip{position:absolute;display:none;pointer-events:none;z-index:5;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;white-space:nowrap;transform:translate(-50%,-150%)}
  .chartbox .cap{color:var(--ink-faint);font-size:11px;margin-top:8px}
  .statbox{background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;padding:16px 18px;margin:8px 0 4px}
  .statbox .ct{font-size:12px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
  .statscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .statgrid{width:100%;border-collapse:collapse;font-size:13.5px}
  .statgrid th,.statgrid td{white-space:nowrap}
  .statgrid th{color:var(--ink-faint);font-weight:600;text-align:right;padding:5px 8px;border-bottom:1px solid var(--line-soft);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
  .statgrid td{color:var(--ink-soft);text-align:right;padding:6px 8px;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
  .statgrid tbody tr:last-child td{border-bottom:none}
  .statgrid .sg-season{text-align:left;color:var(--ink);font-weight:600;white-space:nowrap}
  .careerbox{position:relative;background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;padding:18px;margin:8px 0 4px}
  .careerbox .ct{font-size:12px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
  .pizza{width:100%;height:auto;display:block;margin:2px auto 0}
  .pizza text{font-family:'Saira Condensed',system-ui,sans-serif}
  .pz-ring{fill:var(--ink-soft);font-size:9.5px;text-anchor:middle;paint-order:stroke;stroke:var(--panel);stroke-width:3.5px;stroke-linejoin:round}
  .pz-val{fill:var(--ink);font-size:14px;font-weight:700;text-anchor:middle;paint-order:stroke;stroke:var(--panel);stroke-width:3.5px;stroke-linejoin:round}
  .pz-yr{fill:var(--ink);font-size:14px;font-weight:700}
  .pz-club{fill:var(--ink-soft);font-size:12px}
  .pz-comp{fill:var(--ink-faint);font-size:10.5px}
  .cc-legend{display:flex;gap:18px;margin-top:6px;justify-content:center}
  .cc-k{font-size:11px;color:var(--ink-soft);position:relative;padding-left:17px;line-height:1.2}
  .cc-k::before{content:"";position:absolute;left:0;top:1px;width:12px;height:12px;border-radius:3px}
  .cc-kg::before{background:var(--boro-soft)}
  .cc-ka::before{background:var(--gold)}
  .careerbox .cap{color:var(--ink-faint);font-size:11px;margin-top:10px}
  .vsplit{display:flex;justify-content:space-between;font-size:11.5px;margin-top:7px;color:var(--ink-faint)}
  .vsplit b{color:var(--ink-soft)}
  @media(max-width:680px){
    /* collapsed card = header band (rank, name, club/age/cost line, score ring,
       chevron) plus the Sign/Pass row; the chevron (.xp on the row) reveals the
       scouted-role bar and the factor bullets. The name wrapper is flattened
       (display:contents) so its children take their own grid areas. */
    /* collapsed template omits the need/fact rows entirely: empty grid tracks
       would still contribute a row-gap each, padding the card by ~24px */
    .board-row{
      grid-template-columns:auto 1fr 46px 24px;
      grid-template-areas:"rank nm score chev" "club club score chev" "vote vote vote vote";
      row-gap:8px;column-gap:10px;padding:12px 16px;
    }
    .board-row.xp{grid-template-areas:"rank nm score chev" "club club score chev" "need need need need" "fact fact fact fact" "vote vote vote vote"}
    .board-row:not(.head){background:linear-gradient(150deg,var(--band-tint) 0%,var(--panel) 42%)}
    .board-row .rank{grid-area:rank;align-self:start;font-size:17px;line-height:22px;min-width:26px;text-align:left}
    .board-row .pl-name{display:contents}
    .board-row .pl-name .nm{grid-area:nm;align-self:start}
    .board-row .pl-name small{grid-area:club;align-self:start}
    .board-row .cost{display:none}
    .board-row .cost-inline{display:inline}
    /* the shared ring gauge (base .score-box rules) shrinks a step on phones */
    .board-row .score-box{grid-area:score;align-self:center;justify-self:end;width:46px;height:46px}
    .board-row .score-box::before{inset:4px}
    .board-row .score-box .sb-num{font-size:16px}
    /* 44px hit target in a 24px grid track: the negative margin cancels the
       overflow so the layout still sees a 24px column */
    .board-row .bd-toggle{display:flex;grid-area:chev;align-self:center;align-items:center;justify-content:center;
      width:44px;height:44px;margin:-10px;padding:0;background:none;border:0;color:var(--ink-faint);cursor:pointer}
    .board-row .bd-toggle svg{width:20px;height:20px;transition:transform .2s}
    .board-row.xp .bd-toggle svg{transform:rotate(180deg)}
    @media(prefers-reduced-motion:reduce){.board-row .bd-toggle svg{transition:none}}
    /* collapsed by default; .xp shows the role bar and factors */
    .board-row .need-col{display:none}
    .board-row .pl-factors{display:none}
    .board-row.xp .need-col{display:flex;grid-area:need;flex-direction:row;align-items:center;gap:8px;
      background:var(--panel-2);border:1px solid var(--line-soft);border-radius:9px;padding:7px 10px}
    .board-row.xp .need-col:empty{display:none}
    .board-row.xp .need-col::before{content:"Scouted role";font-size:11px;color:var(--ink-faint);letter-spacing:.02em;white-space:nowrap}
    .board-row.xp .need-col .need-tag{background:none;border:none;padding:0;max-width:none;text-align:left;font-size:12px;color:var(--ink)}
    .board-row.xp .need-col .need-stars{margin-left:auto}
    .board-row.xp .pl-factors{display:flex;grid-area:fact}
    .board-row .rowvote{grid-area:vote}
    /* header row: only #, player */
    .board-row.head{grid-template-columns:26px 1fr;grid-template-areas:"rank name";padding:12px 16px}
    .board-row.head span:nth-child(1){grid-area:rank;text-align:left}
    .board-row.head span:nth-child(2){grid-area:name}
    .board-row.head span:nth-child(3),.board-row.head span:nth-child(4),.board-row.head span:nth-child(5),.board-row.head span:nth-child(6){display:none}
    /* stack the home ticker: LIVE + See all news share the top row, and the
       scrolling text drops below them with the full panel width to itself
       (extra class raises specificity above the base .ticker rules below) */
    .ticker.home-ticker{flex-wrap:wrap;row-gap:9px}
    .ticker.home-ticker .tk-all{margin-left:auto;padding-left:0;border-left:none}
    .ticker.home-ticker .tk-wrap{flex:none;width:100%;order:2;border-top:1px solid var(--line-soft);padding-top:9px}
    nav.top-nav{display:none}
    .depth-grid{gap:10px}
    .formation-pitch.on{display:none}
  }
  /* ===== section router + bottom nav (added) ===== */
  .page{display:none}
  .page.on{display:block}
  nav.top-nav a{cursor:pointer}
  .bottom-nav{display:none}
  @media(max-width:680px){
    nav.top-nav{display:none}
    main.wrap{padding-bottom:20px}
    footer{margin-top:32px;padding-bottom:104px}
    /* translateZ(0) keeps the nav on its own compositing layer; without it
       iOS 26 Safari can paint the fixed bar at a stale position mid-scroll */
    .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
      background:rgba(13,17,23,.98);border-top:1px solid var(--line);
      padding:6px 4px calc(6px + env(safe-area-inset-bottom)) 4px;
      transform:translateZ(0)}
    .bottom-nav button{flex:1;background:none;border:0;color:var(--ink-faint);cursor:pointer;
      display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;
      font-family:inherit;font-size:9.5px;letter-spacing:.02em}
    .bottom-nav button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;
      stroke-linecap:round;stroke-linejoin:round}
    .bottom-nav button.on{color:var(--boro-soft)}
  }
  /* ===== fan zone ===== */
  .btn{background:var(--boro);color:#fff;border:0;border-radius:8px;padding:9px 16px;font-family:inherit;
    font-weight:600;font-size:13px;cursor:pointer}
  .btn:hover{background:var(--boro-soft)}
  .fan-login{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
  .fan-login p{color:var(--ink-soft);font-size:14px;margin-bottom:10px}
  .fan-compose{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:18px}
  .fan-compose .who{font-size:12px;color:var(--ink-faint);margin-bottom:8px}
  .fan-compose .who b{color:var(--ink)}
  .fan-compose textarea{width:100%;box-sizing:border-box;background:var(--panel-2);border:1px solid var(--line);
    border-radius:8px;color:var(--ink);font-family:inherit;font-size:14px;padding:10px;resize:vertical;min-height:64px}
  .fan-compose .row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
  .fan-compose select,.fan-compose input.player{background:var(--panel-2);border:1px solid var(--line);
    border-radius:8px;color:var(--ink);font-family:inherit;font-size:13px;padding:8px}
  .fan-filter{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
  .fan-sort{margin-left:auto;display:flex;gap:6px}
  .postcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;display:flex;gap:12px}
  .votecol{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:34px}
  .votecol button{background:none;border:0;color:var(--ink-faint);cursor:pointer;padding:2px;line-height:1}
  .votecol button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .votecol button.act-up{color:var(--green)}
  .votecol button.act-down{color:var(--boro-soft)}
  .votecol .score{font-family:'Saira Condensed';font-weight:700;font-size:16px;color:var(--ink)}
  .postbody{flex:1;min-width:0}
  .postmeta{font-size:12px;color:var(--ink-faint);margin-bottom:6px}
  .postmeta b{color:var(--ink)}
  .ptag{display:inline-block;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:20px;margin-left:6px}
  .ptag.sugg{background:rgba(232,76,61,.16);color:var(--boro-soft)}
  .ptag.disc{background:var(--panel-2);color:var(--ink-soft)}
  .posttext{font-size:14.5px;line-height:1.5;color:var(--ink);word-wrap:break-word}
  .posttext .pl{color:var(--boro-soft);font-weight:600}
  .postact{margin-top:8px}
  .postact button{background:none;border:0;color:var(--ink-faint);font-family:inherit;font-size:12.5px;cursor:pointer;padding:2px 0}
  .postact button:hover{color:var(--ink-soft)}
  .postact button:disabled{cursor:default;color:var(--ink-faint)}
  .privnote{color:var(--ink-faint);font-size:12.5px;margin-top:18px}
  .replybox{margin-top:10px;display:flex;gap:8px}
  .replybox textarea{flex:1;box-sizing:border-box;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-family:inherit;font-size:13px;padding:8px;min-height:38px}
  .reply{margin-top:10px;padding-left:12px;border-left:2px solid var(--line);display:flex;gap:10px}
  .reply .votecol{min-width:26px}
  .reply .votecol button svg{width:16px;height:16px}
  .reply .score{font-size:13px}
  /* ===== login modal ===== */
  .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80;display:none;align-items:center;justify-content:center;padding:20px}
  .modal-bg.on{display:flex}
  .modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;max-width:340px;width:100%}
  .modal h3{font-family:'Saira Condensed';font-weight:700;font-size:22px;margin-bottom:6px}
  .modal p{color:var(--ink-soft);font-size:13px;margin-bottom:14px}
  .modal input{width:100%;box-sizing:border-box;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-family:inherit;font-size:14px;padding:10px;margin-bottom:12px}
  .modal .mnote{font-size:11px;color:var(--ink-faint);margin-top:10px;margin-bottom:0}
  /* Turnstile captcha overlay: shown briefly during the first anonymous sign-in.
     A Managed widget usually auto-passes, so this just flashes and closes. */
  .cap-ov{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.6)}
  .cap-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;max-width:340px;width:100%;text-align:center}
  .cap-ttl{font-family:'Saira Condensed';font-weight:700;font-size:22px;margin-bottom:6px}
  .cap-sub{color:var(--ink-soft);font-size:13px;margin-bottom:16px}
  .cap-box{display:flex;justify-content:center;min-height:65px}
  /* ===== news ticker ===== */
  .ticker{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#1a1115,#151d25);border:1px solid var(--line-soft);border-radius:10px;padding:10px 12px;margin-bottom:16px;overflow:hidden}
  .ticker .live{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--boro-soft);white-space:nowrap}
  .ticker .live .ws-dot{position:static}
  .ticker .tk-wrap{flex:1;overflow:hidden;white-space:nowrap}
  .ticker .tk{display:inline-block;white-space:nowrap;animation:tkscroll 104s linear infinite;font-size:13px;color:var(--ink-soft)}
  @keyframes tkscroll{0%{transform:translateX(6%)}100%{transform:translateX(-100%)}}
  .ticker .tk-all{white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--boro-soft);cursor:pointer;padding-left:12px;margin-left:2px;border-left:1px solid var(--line-soft);transition:color .15s}
  .ticker .tk-all:hover{color:var(--boro)}
  .newsitem{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
  .newsitem:last-child{border-bottom:0}
  .news-src{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--boro-soft);flex:0 0 104px;line-height:1.35;padding-top:3px}
  .news-main{flex:1;min-width:0}
  .news-title{font-size:14.5px;line-height:1.45}
  .news-title a{color:var(--ink);text-decoration:none}
  .news-title a:hover{color:var(--boro-soft)}
  .news-time{font-size:11.5px;color:var(--ink-faint);margin-top:4px}


/* ---- Home page + centre nav button ---- */
.home-h{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin:30px 0 12px;font-weight:700}
.see-all{display:block;text-align:center;margin:14px 0 2px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--boro-soft);cursor:pointer;transition:color .15s}
.see-all:hover{color:var(--boro)}
.need-card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--boro);border-radius:var(--r);padding:14px 16px}
.need-card{cursor:pointer;transition:background .15s,border-left-color .15s}
.need-card:hover{background:var(--panel-2);border-left-color:var(--boro-soft)}
.need-card.rumour{border-left-color:var(--gold)}
.need-card.rumour:hover{border-left-color:var(--gold)}
.need-card.rumour .rum-tag{letter-spacing:.12em;font-size:11px;font-weight:700;text-transform:uppercase}
/* Rumour cards head with the squad need they map to; the player name carries no
   'Top target' eyebrow, and the estimated fee sits inline with the score. */
.need-card.rumour .nt-name::before{display:none}
/* Recently updated reports: blue accent, an 'Updated <date>' eyebrow, and no
   'Top target' prefix on the player name (it heads a report, not a need). */
.need-card.recent{border-left-color:var(--squad)}
.need-card.recent:hover{border-left-color:var(--squad)}
.need-card.recent .recent-tag{color:var(--squad);letter-spacing:.12em;font-size:11px;font-weight:700;text-transform:uppercase}
.need-card.recent .nt-name::before{display:none}
.rum-price{font-family:'Saira Condensed';font-weight:600;font-size:16px;color:var(--ink-soft);white-space:nowrap}
.nt-end{display:flex;align-items:center;gap:11px;flex:none}
.need-star{display:block;color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:6px}
/* Star-rating variant of the need eyebrow: real half stars (shared starsHTML
   markup) in the card's gold, rather than the literal glyph string. */
.need-star.stars{display:flex;gap:2px;letter-spacing:0;font-size:13px;line-height:1}
.need-star.stars i.f{color:var(--gold)}
.need-star.stars i.h:after{color:var(--gold)}
.need-role{display:block;font-weight:700;color:var(--ink);font-size:15px;margin-bottom:3px}
.need-note{display:block;color:var(--ink-soft);font-size:13px;line-height:1.45}
.need-target{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.nt-name{font-weight:700;color:var(--ink);font-size:14px}
.nt-name::before{content:'Top target';display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);font-weight:700;margin-bottom:2px}
.nt-main{display:flex;flex-direction:column;min-width:0}
.nt-meta{display:block;color:var(--ink-soft);font-size:12px;margin-top:3px}
.nt-na{color:var(--ink-faint);font-size:13px;font-style:italic}
.need-card.done{border-left-color:var(--green)}
.need-card.done:hover{border-left-color:var(--green);background:var(--panel-2)}
.need-card.done .nt-name::before{content:'Signed'}
.need-card.lower{border-left-color:var(--ink-faint)}
.need-card.lower:hover{border-left-color:var(--ink-soft)}
.needs-carousel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.needs-carousel::-webkit-scrollbar{display:none}
.needs-carousel>.need-card{flex:0 0 calc((100% - 20px) / 3);scroll-snap-align:start}
.needs-carousel>.needs-empty{flex:0 0 100%}
@media(max-width:760px){
  .needs-carousel>.need-card{flex:0 0 calc((100% - 10px) / 2)}
}
@media(max-width:520px){
  .needs-carousel>.need-card{flex:0 0 88%}
  .unofficial{display:none}
}
.carousel-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
.carousel-dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:var(--line);cursor:pointer;transition:background .15s,width .15s}
.carousel-dots button.active{background:var(--boro);width:18px;border-radius:4px}
.nt-tick{font-family:'Saira Condensed';font-weight:700;font-size:22px;line-height:1;color:var(--green)}
/* Done cards: the tick maps to the need (top row, beside role/stars); the Fan
   Scout Score stays at the player row below. */
.need-dhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.need-dhead-main{min-width:0}
.need-dhead .nt-tick{flex:none}
.needs-empty{grid-column:1/-1;background:var(--panel);border:1px dashed var(--line);border-radius:var(--r);padding:18px 20px;color:var(--ink-faint);font-size:13.5px;line-height:1.55;text-align:center}
.nt-ov{font-family:'Saira Condensed';font-weight:700;color:var(--gold);line-height:1}
.nt-score{display:flex;flex:none}
/* The Fan Scout Score is a conic ring gauge at every width, matching the
   shortlist card (PR #129). --ov is set inline per card and drives the fill. */
.need-target .nt-score{position:relative;width:46px;height:46px;padding:0;align-items:center;justify-content:center;
  border-radius:50%;background:conic-gradient(var(--boro) calc(var(--ov,0)*1%),var(--ring-track) 0)}
.need-target .nt-score::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--panel)}
.need-target .nt-ov{position:relative;font-size:16px;margin:0}
.home-top{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.home-pl{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:2px;transition:border-color .15s,transform .15s}
.home-pl:hover{border-color:var(--boro-soft);transform:translateY(-2px)}
.hp-ov{font-size:22px;font-weight:800;color:var(--boro-soft);line-height:1}
.hp-name{font-weight:700;color:var(--ink);font-size:14px}
.hp-pos{color:var(--ink-faint);font-size:12px}
.bottom-nav button.nav-home{justify-content:flex-end;position:relative;z-index:2}
.bottom-nav button.nav-home svg{width:26px;height:26px;box-sizing:content-box;padding:12px;margin-top:-30px;
  background:radial-gradient(circle at 32% 28%,var(--boro-soft),var(--boro));border:3px solid var(--base);
  border-radius:50%;stroke:#fff;color:#fff;position:relative;z-index:2;
  box-shadow:0 0 22px 2px rgba(216,32,47,.5), 0 6px 16px rgba(0,0,0,.45)}
.bottom-nav button.nav-home span{color:var(--boro-soft);font-weight:700}
.bottom-nav button.nav-home.on svg{box-shadow:0 0 30px 4px rgba(255,85,96,.6), 0 6px 18px rgba(0,0,0,.5)}

.report-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.rc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.rc-hmain{min-width:0}
.rc-klabel{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);font-weight:700;margin-bottom:5px}
.rc-verdict{color:var(--ink-soft);font-size:13.5px;line-height:1.5;margin:0}
.rc-grade{flex:none;font-family:'Saira Condensed';font-weight:700;font-size:34px;line-height:1;color:var(--boro-soft);background:rgba(216,32,47,.12);border:1px solid rgba(216,32,47,.35);border-radius:12px;padding:7px 15px}
.rc-rows{display:flex;flex-direction:column;gap:13px;border-top:1px solid var(--line);padding-top:14px}
.rc-row{display:flex;flex-direction:column;gap:5px}
.rc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rc-lab{font-weight:700;color:var(--ink);font-size:14px}
.rc-note{color:var(--ink-soft);font-size:12.5px;line-height:1.45}