/* Player page, dashboard look (v1.44.0): a bento grid of cards with big numbers, badges, a gauge,
   rings and bars. Works with the classic and glass looks, light and dark. */
.pd { --pos:#15803d; --pos-bg:rgba(22,163,74,.14); --neg:#b91c1c; --neg-bg:rgba(220,38,38,.12);
      --trk:rgba(17,24,39,.08); --clubv:var(--club); --ink2:var(--ink,#111827); --mut:var(--muted,#6b7280); }
html.dark .pd { --pos:#4ade80; --pos-bg:rgba(74,222,128,.16); --neg:#f87171; --neg-bg:rgba(248,113,113,.16);
      --trk:rgba(255,255,255,.1); --clubv:color-mix(in srgb, var(--club) 60%, #fff); --ink2:var(--d-text,#ececec); --mut:var(--d-muted,#a3a3a3); }
.pd .card { position:relative; border-radius:20px; padding:16px 18px; margin:0; isolation:isolate; }
.pd .card h2 { font-size:.98rem; margin:0 0 12px; letter-spacing:-.01em; }
.pd-lbl { display:block; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); }
.pd-sub { font-size:.78rem; color:var(--mut); }
.pd-big { display:block; font-size:2.2rem; line-height:1.05; font-weight:800; letter-spacing:-.03em; margin:6px 0 8px;
          font-variant-numeric:tabular-nums; color:var(--ink2); }
.pd-big small { font-size:.95rem; font-weight:700; color:var(--mut); letter-spacing:0; margin-left:2px; }
.pd-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:999px; font-size:.74rem; font-weight:800;
            font-variant-numeric:tabular-nums; margin-right:4px; }
.pd-badge { color:var(--mut); background:var(--trk); }
.pd-badge.up { color:var(--pos); background:var(--pos-bg); } .pd-badge.down { color:var(--neg); background:var(--neg-bg); }
.pd-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:600;
           background:var(--trk); color:var(--ink2); white-space:nowrap; }
.pd-chip b { color:var(--clubv); } .pd-chip small { color:var(--mut); font-weight:500; }
.pd .flag.tiny { margin:0 4px 0 0; }

/* hero */
.pd-hero { margin-bottom:14px !important; overflow:hidden; }
.pd-hero::before { content:""; position:absolute; inset:0; z-index:-2; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--club) 22%, transparent), transparent 60%); }
.pd-hero.has-photo::before { inset:-40px; opacity:.5; filter:blur(30px) saturate(1.4);
  background:var(--photo) 50% 25% / cover no-repeat; }
.pd-hero .hero { margin:0 0 12px; }
.pd-hero h1 { font-size:1.55rem; }
.pd-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pd-hero .seasons { margin:0; }

/* grid */
.pd-grid { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:14px; margin-bottom:16px; }
.pd-grid > * { grid-column:span 12; }
.pd-kpi { grid-column:span 6 !important; display:block; overflow:hidden; }
.pd-chart { grid-column:span 12 !important; }
@media (min-width:760px) {
  .pd-kpi { grid-column:span 3 !important; }
  .pd-chart { grid-column:span 8 !important; } .pd-gauge { grid-column:span 4; }
  .pd-stats { grid-column:span 5; } .pd-seasons { grid-column:span 7; }
  .pd-mini { grid-column:span 4; }
  .pd-clubs { grid-column:span 5; } .pd-log { grid-column:span 7; }
}
.pd-stats:last-of-type { grid-column:span 12; }

/* KPI cards */
.pd .card.k-main, html.glass .pd .card.k-main, html.dark .pd .card.k-main { color:#fff;
  background:radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--club2) 35%, transparent), transparent 60%),
             linear-gradient(150deg, var(--club), color-mix(in srgb, var(--club) 65%, #000)) !important;
  border-color:transparent !important; }
.k-main .pd-lbl, .k-main .pd-sub, .k-main .pd-big { color:#fff; } .k-main .pd-lbl, .k-main .pd-sub { opacity:.8; }
.k-main .pd-badge { background:rgba(255,255,255,.22) !important; color:#fff !important; }
.k-main::after { display:none; }
.pd-link { text-decoration:none; color:inherit; }
.pd-link:hover { transform:translateY(-2px); } .pd-link { transition:transform .2s; }
.pd-go { position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
         background:var(--trk); color:var(--ink2); font-size:.85rem; }
.pd-link .pd-sub { display:block; line-height:1.4; }
.pd-spark { display:block; width:100%; height:26px; margin-top:10px; overflow:visible; }
.pd-spark polyline { fill:none; stroke:var(--clubv); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.pd-ringcard { display:flex !important; align-items:center; justify-content:space-between; gap:6px; }
.pd-ring { width:50px; height:50px; flex:none; transform:rotate(-90deg); }
.pd-ring circle { fill:none; stroke-width:5; } .pd-ring .trk { stroke:var(--trk); }
.pd-ring .val { stroke:var(--clubv); stroke-linecap:round; }

/* chart */
.pd-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.pd-key { font-size:.72rem; color:var(--mut); display:inline-flex; align-items:center; gap:5px; }
.pd-key i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-left:6px; }
.pd-key i.hi { background:var(--clubv); } .pd-key i.lo { background:repeating-linear-gradient(135deg, var(--trk) 0 2px, transparent 2px 5px), var(--trk); }
.pd-tip { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding:8px 12px; border-radius:14px; background:var(--trk);
          font-size:.84rem; color:var(--ink2); margin-bottom:12px; min-height:38px; }
.pd-tip b { font-size:1.2rem; color:var(--clubv); font-variant-numeric:tabular-nums; }
.pd-tip a { margin-left:auto; font-weight:700; text-decoration:none; color:var(--clubv); }
.pd-plot { overflow-x:auto; -webkit-overflow-scrolling:touch; padding:26px 0 0 26px; margin-right:-4px; }
.pd-bars { position:relative; height:170px; display:flex; align-items:flex-end; justify-content:center; gap:3px; margin-bottom:30px;
           min-width:calc(var(--n) * 9px); }
.pd-bars .gl, .pd-bars .av { position:absolute; left:0; right:0; height:0; border-top:1px dashed var(--trk); pointer-events:none; }
.pd-bars .gl em, .pd-bars .av em { position:absolute; left:-26px; top:-7px; font:600 .62rem/1 inherit; font-style:normal; color:var(--mut); }
.pd-bars .av { border-top:1.5px dashed color-mix(in srgb, var(--ink2) 55%, transparent); z-index:2; }
.pd-bars .av em { left:auto; right:0; top:-15px; background:var(--ink2); color:var(--bg,#fff); padding:3px 7px; border-radius:999px; font-weight:800; }
html.dark .pd-bars .av em { color:#111; }
.pd-bars .bar { position:relative; flex:1 1 0; height:100%; display:flex; align-items:flex-end; min-width:6px; max-width:34px; -webkit-tap-highlight-color:transparent; }
.pd-bars .bar i { display:block; width:100%; height:var(--h); border-radius:6px 6px 3px 3px; transition:filter .2s, transform .2s;
  background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink2) 14%, transparent) 0 2px, transparent 2px 5px), var(--trk); }
.pd-bars .bar.ton i { background:linear-gradient(180deg, var(--clubv), color-mix(in srgb, var(--clubv) 55%, transparent)); }
.pd-bars .bar.on i { background:linear-gradient(180deg, var(--clubv), var(--clubv)); box-shadow:0 6px 16px -4px color-mix(in srgb, var(--club) 70%, transparent);
  outline:2px solid color-mix(in srgb, var(--clubv) 40%, transparent); outline-offset:2px; }
.pd-bars .bar.on::before { content:attr(data-pts); position:absolute; left:50%; bottom:calc(var(--h) + 8px); transform:translateX(-50%);
  background:var(--ink2); color:var(--bg,#fff); font:800 .7rem/1 inherit; padding:4px 7px; border-radius:999px; white-space:nowrap; z-index:3; }
html.dark .pd-bars .bar.on::before { color:#111; }
.pd-bars .bar:hover i { filter:brightness(1.12); }
.pd-bars .fl { position:absolute; left:50%; bottom:-12px; width:7px; height:7px; border-radius:50%; transform:translateX(-50%);
               box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.pd-hint { margin:0 !important; }
.pd-bars .xl { position:absolute; left:50%; bottom:-27px; transform:translateX(-50%); font-size:.6rem; font-weight:700; color:var(--mut);
               white-space:nowrap; font-variant-numeric:tabular-nums; }
.pd-bars .bar.on .xl { color:var(--ink2); }

/* centre bounce attendances */
.pd-cba { grid-column:span 12 !important; }
.pd-cbanums { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-bottom:6px; }
@media (min-width:760px) { .pd-cbanums { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.pd-cbanums > * { display:block; padding:10px 12px; border-radius:14px; background:var(--trk); text-decoration:none; color:var(--ink2); }
.pd-cbanums b { display:block; font-size:1.5rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin:2px 0 4px; }
.pd-cbabars { height:110px; }
.pd-cbabars .bar i { background:linear-gradient(180deg, color-mix(in srgb, var(--clubv) 75%, transparent), color-mix(in srgb, var(--clubv) 30%, transparent)) !important; }
.pd-cbabars .bar .v { position:absolute; left:50%; bottom:calc(var(--h) + 3px); transform:translateX(-50%); font-size:.6rem; font-weight:800;
                      color:var(--ink2); font-variant-numeric:tabular-nums; }

/* gauge */
.pd-gauge { text-align:center; }
.pd-gauge h2 { text-align:left; }
.pd-g { width:100%; max-width:260px; display:block; margin:0 auto; overflow:visible; }
.pd-g path { fill:none; stroke-width:16; stroke-linecap:round; }
.pd-g .trk { stroke:var(--trk); } .pd-g .rng { stroke:color-mix(in srgb, var(--clubv) 28%, transparent); stroke-linecap:butt; }
.pd-g .val { stroke:url(#pdgr); }
.pd-g .s1 { stop-color:color-mix(in srgb, var(--clubv) 45%, #fff); } .pd-g .s2 { stop-color:var(--clubv); }
html.dark .pd-g .s1 { stop-color:color-mix(in srgb, var(--clubv) 50%, #000); }
.pd-g .ndl { stroke:var(--ink2); stroke-width:4; stroke-linecap:round; } .pd-g .hub { fill:var(--ink2); }
.pd-g text { font-size:9px; font-weight:600; fill:var(--mut); }
.pd-gnum { margin:-6px 0 12px; } .pd-gnum b { display:block; font-size:1.9rem; font-weight:800; letter-spacing:-.03em; color:var(--ink2); }
.pd-gnum span { font-size:.75rem; color:var(--mut); }
.pd-lohi { display:grid; grid-template-columns:1fr 1fr; gap:10px; text-align:left; }
.pd-lohi a { display:block; padding:10px 12px; border-radius:14px; background:var(--trk); text-decoration:none; color:var(--ink2); }
.pd-lohi b { display:block; font-size:1.25rem; font-weight:800; font-variant-numeric:tabular-nums; }
.pd-lohi small { font-size:.72rem; color:var(--mut); }

/* bars in rows */
.trkbar { position:relative; display:block; height:10px; border-radius:999px; background:var(--trk); overflow:visible; }
.trkbar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, color-mix(in srgb, var(--clubv) 55%, transparent), var(--clubv)); }
.trkbar em { position:absolute; top:-3px; width:2px; height:16px; margin-left:-1px; border-radius:2px; background:var(--ink2); opacity:.7; }
.pd-srow { display:grid; grid-template-columns:5.6em 1fr 2.8em 3em; align-items:center; gap:10px; padding:7px 0; font-size:.88rem; }
.pd-srow .nm { color:var(--mut); font-weight:600; } .pd-srow b { text-align:right; font-variant-numeric:tabular-nums; }
.df { font-size:.75rem; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; color:var(--mut); }
.df.up { color:var(--pos); } .df.down { color:var(--neg); }
.pd-multi { display:flex; flex-wrap:wrap; gap:6px; margin:-4px 0 10px; }
.pd-yr { display:grid; grid-template-columns:3em 4em 1fr 3.2em; grid-template-rows:auto auto; align-items:center; column-gap:10px; row-gap:3px;
         padding:9px 10px; margin:0 -10px; border-radius:14px; text-decoration:none; color:var(--ink2); }
.pd-yr:hover { background:var(--trk); } .pd-yr.cur { background:color-mix(in srgb, var(--clubv) 14%, transparent); }
.pd-yr .yr { font-weight:800; } .pd-yr .cl { font-size:.8rem; color:var(--mut); display:inline-flex; align-items:center; }
.pd-yr b { text-align:right; color:var(--clubv); font-variant-numeric:tabular-nums; }
.pd-yr small { grid-column:3 / 5; font-size:.72rem; color:var(--mut); }

/* mini cards (Kryptonite, Bunnies, Tagged) */
.pd-mnum { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin:6px 0 4px; }
.pd-mnum b { font-size:1.8rem; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.pd-vs2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0; }
.pd-vs2 > div { padding:8px 10px; border-radius:12px; background:var(--trk); } .pd-vs2 b { font-size:1.15rem; }

/* clubs: diverging bars around the usual average */
.pd-crow { display:grid; grid-template-columns:auto minmax(0, 1fr) 2em minmax(70px, 1.1fr) 2.8em 3.2em; align-items:center; gap:8px;
           padding:5px 0; font-size:.85rem; }
.pd-crow .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.pd-crow .gm { font-size:.72rem; color:var(--mut); text-align:right; }
.pd-crow b { text-align:right; font-variant-numeric:tabular-nums; }
.pd-crow .div { position:relative; height:10px; border-radius:999px; background:var(--trk); }
.pd-crow .div::after { content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:2px; margin-left:-1px; background:var(--mut); opacity:.5; }
.pd-crow .div i { position:absolute; top:0; bottom:0; }
.pd-crow .div i.up { left:50%; border-radius:0 999px 999px 0; background:var(--pos); }
.pd-crow .div i.down { right:50%; border-radius:999px 0 0 999px; background:var(--neg); }

/* game log */
.pd-log table.t td, .pd-log table.t th { background:transparent !important; }
.pd-log .fp { display:inline-block; min-width:2.6em; padding:2px 6px; border-radius:8px; }
.pd-log .heat3 { background:var(--clubv); color:#fff !important; }
.pd-log .heat2 { background:color-mix(in srgb, var(--clubv) 30%, transparent); }
.pd-log .heat1 { background:color-mix(in srgb, var(--clubv) 12%, transparent); }
.pd-log:not(.open) tr.more { display:none; }
.pd-more { margin-top:10px; width:100%; }
.pd-log.open .pd-more { display:none; }

@media (max-width:560px) {
  .pd-bars .xl { font-size:.55rem; }
  .pd-bars[style*="--n:2"] .bar:nth-of-type(even) .xl, .pd-bars[style*="--n:3"] .bar:nth-of-type(even) .xl { visibility:hidden; }
}
@media (max-width:420px) {
  .pd .card { padding:14px; border-radius:18px; }
  .pd-big { font-size:1.9rem; }
  .pd-crow { grid-template-columns:auto minmax(0, 1fr) minmax(56px, 1fr) 2.6em 3em; }
  .pd-crow .gm { display:none; }
}
@media (prefers-reduced-motion: reduce) { .pd-link, .pd-bars .bar i { transition:none; } }

/* Players page, dashboard look (v1.45.0) */
.ph { --club:var(--brand,#1F3A93); --club2:#3654c4; }
.ph-hero { position:relative; z-index:5; overflow:visible !important; }
.ph-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.ph-top h1 { margin:0; font-size:1.8rem; letter-spacing:-.02em; }
.ph-top p { margin:2px 0 0; font-size:.88rem; }
.ph-top .comptabs { margin:0; }
.ph .search { position:relative; margin:0 0 12px; }
.ph .search input { padding-left:42px; border-radius:999px; background:var(--trk) !important; border-color:transparent; }
.ph-sic { position:absolute; left:15px; top:50%; width:18px; height:18px; margin-top:-9px; fill:none; stroke:var(--mut); stroke-width:2.2;
          stroke-linecap:round; pointer-events:none; z-index:1; }
.ph .search .results { z-index:30; border-radius:18px; }
.ph .filters { margin:0; }
.ph .filters select { border-radius:999px; padding:8px 14px; }
.ph .filters .btn { border-radius:999px; padding:10px 18px; }
.ph-who { display:flex; align-items:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
@media (min-width:760px) { .ph-list { grid-column:span 6 !important; } }

.ph-board { grid-column:span 12 !important; }

/* quick lists */
.ph-list { --tone:#ea580c; }
.ph-list.t-up { --tone:#16a34a; } .ph-list.t-rel { --tone:#2563eb; } .ph-list.t-ton { --tone:#9333ea; }
html.dark .ph-list { --tone:#fb923c; } html.dark .ph-list.t-up { --tone:#4ade80; } html.dark .ph-list.t-rel { --tone:#60a5fa; } html.dark .ph-list.t-ton { --tone:#c084fc; }
.ph-list h2 { display:flex; align-items:center; gap:8px; }
.ph-ic { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:color-mix(in srgb, var(--tone) 16%, transparent); }
.ph-list ol { list-style:none; margin:0 0 8px; padding:0; }
.ph-list li { display:grid; grid-template-columns:1.6em minmax(0, 1fr) auto; grid-template-rows:auto auto; column-gap:8px; row-gap:4px;
              align-items:center; padding:7px 0; }
.ph-list li .rk { grid-row:1 / 3; }
.ph-list li a { display:flex; align-items:center; min-width:0; color:var(--ink2); text-decoration:none; font-weight:600; font-size:.9rem; }
.ph-list li a:hover .nm { text-decoration:underline; }
.ph-list li .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-list li .cl { margin-left:6px; font-size:.7rem; font-weight:600; color:var(--mut); }
.ph-list li b { font-variant-numeric:tabular-nums; color:var(--tone); }
.ph-list li .trkbar { grid-column:2 / 4; height:6px; }
.ph-list li .trkbar i { background:linear-gradient(90deg, color-mix(in srgb, var(--tone) 45%, transparent), var(--tone)); }
.ph-list li.first a { font-size:1rem; } .ph-list li.first b { font-size:1.15rem; }
.rk { display:inline-grid; place-items:center; width:1.6em; height:1.6em; border-radius:50%; font-size:.72rem; font-weight:800;
      background:var(--trk); color:var(--mut); font-variant-numeric:tabular-nums; }
.ph-list li.first .rk { background:var(--tone); color:#fff; }

/* leaderboard */
.ph-board .pd-head { margin-bottom:8px; } .ph-board .pd-head h2 { margin:0; }
.ph-board table.t td, .ph-board table.t th { background:transparent !important; }
.ph-board table.t tbody tr:hover td { background:var(--trk) !important; }
.ph-board tbody tr:nth-child(1) .rk { background:#eab308; color:#fff; }
.ph-board tbody tr:nth-child(2) .rk { background:#94a3b8; color:#fff; }
.ph-board tbody tr:nth-child(3) .rk { background:#b45309; color:#fff; }
.ph-board td.avgc { min-width:84px; }
.ph-board .mbar { display:block; height:4px; margin:3px auto 0; width:56px; border-radius:999px; background:var(--trk); overflow:hidden; }
.ph-board .mbar i { display:block; height:100%; border-radius:inherit; background:var(--clubv); }
.ph-board table.t a { color:var(--ink2); }
@media (max-width:420px) { .ph-top h1 { font-size:1.5rem; } }
.ph-board:not(.open) tbody tr:nth-child(n+21) { display:none; }
.ph-board.open .ph-more { display:none; }