html{--sikit-header-height:60px;}.mid-stat{border-block:0px !important;}.grecaptcha-badge{visibility:hidden;}.fx-scroll-top-btn{background-color:#d60027;border-radius:5px;width:40px;height:40px;&::before{content:'\e807';font:16px / 1 "wf";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}}.fx-scroll-top-btn svg{display:none;}dialog[open]{pointer-events:none;}dialog[open] > *{pointer-events:auto;}dialog::backdrop{background:rgba(0,0,0,.3);pointer-events:none;}#main-content{overflow-x:hidden;}.desktop-only{display:none;}@media (min-width:768px){.desktop-only{display:block;}.mobile-only{display:none;}html{--sikit-header-height:100px}}.team-sponsor-logo{padding-inline:20px;}.team-sponsor > div:nth-child(2) > div:first-child,.team-sponsor > div:nth-child(2) > div:nth-child(3){border-right:1px solid #E1E1E6;}@container parent (min-width:500px){.team-sponsor > div:nth-child(2) > div:nth-child(2){border-right:1px solid #E1E1E6;}}@container parent (min-width:800px){.team-sponsor > div:nth-child(2) > div:not(:last-child){border-right:1px solid #E1E1E6;}}.footer-bottom-menu:not(:last-child)::after{content:"|";padding-left:4px;scale:1.3;}.team-sponsor-logo{position:relative;}.wf-breadcrumb-bg{position:relative;overflow:visible;}.wf-breadcrumb-bg::before{content:"";position:absolute;top:0;left:50%;width:100vw;height:300px;transform:translateX(-50%);background-image:url('/static-assets/images/misc/wfbreadcrumbbg.png?w=1366&h=300');background-repeat:no-repeat;background-position:center;background-size:cover;z-index:-1;}.wf-breadcrumb-bg::after{content:"";background:url("/static-assets/images/misc/ball-pattern.webp?v=1.01") center/contain no-repeat;width:60px;left:calc(var(--container-offset) * -1 + -8px);aspect-ratio:1;top:300px;position:absolute;}@media (min-width:768px){.wf-breadcrumb-bg::after{width:150px;}}.swiper-pagination-bullet-active{width:40px;}.si::after{content:"";display:inline-block;width:71px;height:27px;background:url(https://wf.surface.fan-os.net/static-assets/images/misc/powered-logo.svg) no-repeat center / contain;}.header [data-frame-name="frame_top_row"]{border-bottom:1px solid hsl(var(--border_main_default));}.header [data-frame-name="frame_navigation_1"],.header [data-frame-name="frame_navigation_4"],.header [data-frame-name="frame_navigation_7"]{position:relative;margin-right:16px;}.header [data-frame-name="frame_navigation_1"]::after,.header [data-frame-name="frame_navigation_4"]::after,.header [data-frame-name="frame_navigation_7"]::after{width:2px;height:20px;background-color:hsl(var(--border_main_default));content:"";display:block;position:absolute;top:50%;transform:translateY(-50%);right:0;z-index:1000;}.header [data-frame-name="frame_logo_mobile"]{position:relative;isolation:isolate;}.header [data-frame-name="frame_logo_mobile"]::after{width:calc(100% + var(--container-offset));height:100%;background-color:hsl(var(--background_main_card_2)/0.2);content:"";display:block;position:absolute;top:0;left:calc(-16px);z-index:-1;opacity:0;}.m-header-link{border-bottom:2px solid hsl(var(--border_main_default));}.header [data-frame-name="frame_navigation_7"]{width:max-content;}.header [data-frame-name="frame_navigation_7"] a{width:max-content;}.tickets-signup{flex-direction:row-reverse;}.tickets-signup:not(:last-child){background-color:hsl(var(--background_button_sec_default)) !important;}.wac-icon.icon_wf_icon_insta::before{color:transparent !important;background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);--webkit-background-clip:text;--webkit-text-fill-color:transparent;background-clip:text;}.wac-icon.icon_wf_icon_linkedin::before{color:hsl(201,100%,36%);}.wac-icon.icon_wf_icon_x{color:hsl(240,4%,17%)}.wac-icon.icon_wf_icon_facebook::before{color:#3E6DC1;}.wac-icon.icon_wf_icon_youtube::before{color:hsl(357,100%,53%);}@media (min-width:640px){.header [data-frame-name="frame_logo_mobile"]::after{display:none;}.header .header-wrapper{position:relative;isolation:isolate;}.header .header-wrapper::after{width:calc(100px + var(--container-offset));height:100%;background-color:hsl(var(--background_main_card_2)/0.2);content:"";display:block;position:absolute;top:0;left:calc(-16px);z-index:-1;border-right:1px solid hsl(var(--border_main_default))}}@media (min-width:768px){.header .header-wrapper::after{width:calc(150px + var(--container-offset));}.desktop-link{position:relative;}.desktop-link::after{content:"";display:block;width:0%;height:2px;background-color:hsl(var(--border_main_prim));position:absolute;bottom:0;left:0;z-index:1000;transition:width 0.3s ease-in-out;}.desktop-link:hover::after{width:100%;}[data-frame-name="frame_navigation_6"] .desktop-link[data-active="true"]{font-weight:700;}[data-frame-name="frame_navigation_6"] .desktop-link[data-active="true"]::after{content:"";display:block;width:50%;height:2px;background-color:hsl(var(--border_main_prim));position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:1000;}[data-frame-name="frame_large_devices"]{margin-left:60px;}}.cardLink:hover .hoverText{color:var(--background_prim_container-hex);}.hoverIcon{transition:transform 0.2s ease;}.cardLink:hover .hoverIcon{transform:translate(4px,-4px);}.detailBorder{position:relative;}.detailBorder::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:85vw;border-bottom:1px solid #E1E1E6;}@media (max-width:767px){.detailBorder::after{width:90vw;}}.cms-article-body em{font-style:normal !important;}.waf-newsletter-banner{position:relative;width:100%;overflow:hidden;background-color:#0d1d41;background-image:url("https://wf.surface.fan-os.net/static-assets/images/misc/newsletter-pattern-m.png");background-size:cover;background-position:center;background-repeat:no-repeat;box-sizing:border-box;padding:48px 20px;isolation:isolate;}.waf-newsletter-banner::before{content:"NEWSLETTER";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:"Poppins",sans-serif;font-weight:800;font-size:48px;line-height:1;letter-spacing:0.04em;color:rgba(255,255,255,0.07);white-space:nowrap;pointer-events:none;z-index:0;}.newsletter-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;max-width:520px;margin:0 auto;}.newsletter-plane{position:absolute;z-index:-1;pointer-events:none;}.newsletter-plane img{display:none;}.newsletter-plane-left{top:0;left:0;width:80px;height:62px;background-image:url("https://wf.surface.fan-os.net/static-assets/images/misc/plane-top.png");background-size:contain;background-position:center;background-repeat:no-repeat;}.newsletter-plane-right{right:12px;bottom:8px;width:80px;height:78px;background-image:url("https://wf.surface.fan-os.net/static-assets/images/misc/plane-bottom.png");background-size:contain;background-position:center;background-repeat:no-repeat;}.newsletter-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background-color:#bd0010;flex-shrink:0;}.newsletter-icon .icon{font-size:24px;color:#ffffff;line-height:1;}.newsletter-head{width:100%;}.newsletter-title{margin:0;text-align:center;color:#ffffff;font-family:"Poppins",sans-serif;font-weight:700;font-size:28px;line-height:34px;}.newsletter-body{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;}.newsletter-form{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;}.newsletter-input-group{display:flex;align-items:center;justify-content:space-between;width:100%;height:48px;box-sizing:border-box;background-color:#ffffff;border:1px solid #ffffff;padding:0 4px 0 16px;overflow:hidden;}.newsletter-input-group .newsletter-input{flex:1 1 auto;min-width:0;height:100%;padding:0;border:none;border-radius:0;background:transparent;font-family:"Poppins",sans-serif;font-weight:500;font-size:12px;color:#333333;outline:none;}.newsletter-input-group .newsletter-input::placeholder{color:#aaaaae;}.newsletter-input-group .newsletter-input[aria-invalid="true"]{color:#bd0010;}.newsletter-divider{display:none;}.newsletter-input-group .newsletter-btn{display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;height:40px;padding:0 16px;border:none;border-radius:0;background-color:#ea0a2c;color:#ffe9ed;font-family:"Poppins",sans-serif;font-weight:700;font-size:12px;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap;cursor:pointer;}.newsletter-input-group .newsletter-btn:disabled{opacity:0.6;cursor:not-allowed;}.newsletter-input-group .newsletter-btn .icon{font-size:14px;color:#ffffff;line-height:1;}.newsletter-input-group .newsletter-btn-icon{width:16px;height:16px;object-fit:contain;}.newsletter-field-row{display:flex;flex-direction:column;gap:6px;width:100%;}.newsletter-field-label{font-family:"Poppins",sans-serif;font-weight:500;font-size:12px;color:#ffffff;}.newsletter-input,.newsletter-textarea,.newsletter-select{width:100%;box-sizing:border-box;height:48px;padding:0 16px;border:1px solid #ffffff;border-radius:0;background-color:#ffffff;font-family:"Poppins",sans-serif;font-weight:500;font-size:12px;color:#333333;}.newsletter-textarea{height:96px;padding:12px 16px;resize:vertical;}.newsletter-input::placeholder,.newsletter-textarea::placeholder{color:#aaaaae;}.newsletter-input[aria-invalid="true"],.newsletter-textarea[aria-invalid="true"],.newsletter-select[aria-invalid="true"]{border-color:#bd0010;}.newsletter-radio-group{display:flex;flex-direction:column;gap:8px;width:100%;border:none;padding:0;margin:0;color:#ffffff;font-family:"Poppins",sans-serif;font-size:12px;}.newsletter-radio-group legend{font-weight:500;padding:0;margin:0 0 4px;}.newsletter-radio-group label{display:flex;align-items:center;gap:8px;cursor:pointer;}.newsletter-button-wrapper{display:flex;align-items:center;justify-content:center;width:100%;}.newsletter-button-wrapper .newsletter-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border:none;border-radius:0;background-color:#bd0010;color:#ffffff;font-family:"Poppins",sans-serif;font-weight:700;font-size:12px;letter-spacing:0.04em;text-transform:uppercase;cursor:pointer;}.newsletter-button-wrapper .newsletter-btn:disabled{opacity:0.6;cursor:not-allowed;}.newsletter-button-wrapper .newsletter-btn .icon{font-size:14px;color:#ffffff;line-height:1;}.newsletter-button-wrapper .newsletter-btn-icon{width:16px;height:16px;object-fit:contain;}.newsletter-consent{display:flex;flex-direction:column;gap:4px;width:100%;max-width:480px;}.newsletter-consent label{display:flex;align-items:flex-start;justify-content:center;gap:8px;cursor:pointer;}.newsletter-consent input[type="checkbox"]{width:20px;height:20px;margin-top:1px;flex-shrink:0;appearance:none;-webkit-appearance:none;border:1.5px solid #ffffff;border-radius:4px;background:transparent;cursor:pointer;}.newsletter-consent input[type="checkbox"]:checked{background-color:transparent;border-color:#ffffff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M1 5l3.5 3.5L11 1'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:10px 8px;}.newsletter-consent span{font-family:"Poppins",sans-serif;font-weight:400;font-size:10px;line-height:14px;color:#ffffff;text-align:left;}.newsletter-consent a,.newsletter-consent .newsletter-privacy-link{color:#ea0a2c;text-decoration:underline;font-weight:500;}.newsletter-consent a:hover,.newsletter-consent .newsletter-privacy-link:hover{opacity:0.85;}.newsletter-field-error{display:block;margin-left:28px;font-family:"Poppins",sans-serif;font-size:11px;color:#ff8a94;}.newsletter-message{font-family:"Poppins",sans-serif;font-size:12px;color:#ffffff;text-align:center;}.newsletter-message-success{color:#7fe0a0;}.newsletter-message-error{color:#ff8a94;}@media (min-width:1024px){.waf-newsletter-banner{padding:56px 24px;background-image:url("https://wf.surface.fan-os.net/static-assets/images/misc/newsletter-pattern.png");}.waf-newsletter-banner::before{content:"Newsletter";font-size:88px;letter-spacing:0;text-transform:none;}.newsletter-wrapper{max-width:486px;gap:20px;}.newsletter-plane-left{top:-12px;left:24px;width:140px;height:110px;}.newsletter-plane-right{right:32px;bottom:16px;width:120px;height:116px;}.newsletter-title{font-size:32px;line-height:38px;}.newsletter-input-group .newsletter-btn{font-size:14px;}.newsletter-consent span{font-size:12px;line-height:16px;}}@media (min-width:768px){.h1_bold_custom{font:var(--h1_bold-font-weight,700) var(--h1_bold-font-size,1.75rem) / var(--h1_bold-line-height,2.125rem) var(--h1_bold-font-family,Poppins,system-ui,-apple-system,sans-serif);letter-spacing:var(--h1_bold-letter-spacing,normal);}}.fanos-cookie-consent-dialog{--cc-bg:#fff;--cc-fg:#1a1a1a;--cc-accent:#e21a2c;--cc-accent-hover:#c2121f;--cc-accent-fg:#fff;--cc-radius:4px;--cc-gutter:24px;position:fixed;inset:auto 0 0 0;z-index:9999;display:block;width:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--cc-bg);color:var(--cc-fg);box-shadow:0 -1px 12px rgb(0 0 0 / 8%);}.fanos-cookie-consent-dialog:not([open]){display:none;}.fanos-cookie-consent-container{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px var(--cc-gutter);min-height:56px;}.fanos-cookie-consent-title,.fanos-cookie-consent-reject-btn{display:none;}.fanos-cookie-consent-desc{margin:0;text-align:left;font-size:15px;line-height:1.45;font-weight:400;color:var(--cc-fg);}.fanos-cookie-consent-actions{display:flex;flex-shrink:0;gap:8px;}.fanos-cookie-consent-btn{appearance:none;border:0;border-radius:var(--cc-radius);padding:13px 26px;font:inherit;font-size:15px;font-weight:500;line-height:1;cursor:pointer;transition:background-color 0.2s ease;}.fanos-cookie-consent-accept-btn{background:var(--cc-accent);color:var(--cc-accent-fg);}.fanos-cookie-consent-accept-btn:hover{background:var(--cc-accent-hover);}.fanos-cookie-consent-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px;}@media (max-width:640px){.fanos-cookie-consent-container{flex-direction:column;align-items:stretch;gap:12px;padding:16px;}.fanos-cookie-consent-actions{justify-content:center;}.fanos-cookie-consent-accept-btn{width:100%;}}.socialIconLink .wac-icon{padding-top:15%;}[data-component-id="4608230b-3951-4180-80dd-bc9fc51e24e9"]{position:relative;}[data-component-id="4608230b-3951-4180-80dd-bc9fc51e24e9"]::after{content:"";display:block;width:90vw;border-bottom:1px solid #E1E1E6;margin:0 auto;}@media (min-width:768px){[data-molecule-id="699b286f-08d6-44b9-8ef4-cefff72ade8d"] .large-devices{position:relative;}[data-molecule-id="699b286f-08d6-44b9-8ef4-cefff72ade8d"] .large-devices [data-frame-name="frame_text"]{position:absolute;left:50%;transform:translateX(-50%);width:max-content;}[data-molecule-id="699b286f-08d6-44b9-8ef4-cefff72ade8d"] .large-devices [data-frame-name="frame_navigation_2"]{justify-content:flex-end;margin-left:auto;}}@media (max-width:767px){.waf-newsletter-banner{padding:100px 20px;}}.fltr-sidepanel.fltr-sidepanel--closed{visibility:hidden;pointer-events:none;opacity:0;}.fltr-sidepanel.fltr-sidepanel--open{visibility:visible;pointer-events:auto;opacity:1;}.fltr-sidepanel__backdrop:not(.fltr-sidepanel__backdrop--open){display:none;}.player-profile.pps-root{display:flex;flex-direction:column;width:100%;}.player-profile .pps-formatSection{width:100%;clear:both;float:none;}@media (max-width:1023px){.logo-mobile img{max-height:3.2rem;width:auto;height:auto;object-fit:contain;}}.mc-scorecard-tab__fow .mc-table__cell{white-space:nowrap !important;}.mc-scorecard-tab__fow .mc-scorecard-tab__fow-score,.mc-scorecard-tab__fow .mc-scorecard-tab__fow-wicket,.mc-scorecard-tab__fow .mc-scorecard-tab__fow-player{display:inline !important;white-space:nowrap !important;}@media (max-width:1023px){.home-photo-content .icon_wf_icon_photo,.photos-template .icon_wf_icon_photo.wac-icon{width:1rem;height:1rem;font-size:1rem;line-height:1;}}
/* stats plugin css started */ /* team-stats — the /stats leaderboard. * * Ported 1:1 from the revised Figma build at * `figma/scripts/wf_stats/stats-page` (index.html + styles.css): page header * 1366×300 / 375×220, the content column overlapping the hero, the * POS · TEAMS | 10-stat-column table, and the right-hand filter drawer (377px). * * Delivery: this file is NOT imported by the TSX. `plugins/scripts/generate-plugin-styles.ts` * concatenates it into PLUGIN_STYLES and `PluginStyleHost` injects it into <head> * only on pages that render this plugin. Run `pnpm generate:plugin-styles` after * editing (or `pnpm generate:plugin-styles:watch` while iterating). * * Three deliberate departures from the export, because it is injected globally * into a host page rather than served as a standalone document: * 1. Every rule is scoped under `.player-stats` / `.player-stats-filter`. The export's bare * `*`, `body`, `img` and `button` resets would reset the whole page. * 2. `:root` custom properties moved onto those two roots. * 3. The export's ranked-column wash is one absolutely-positioned `::after` * pinned to column 3 of 10. This board's column COUNT and ranked column * both change with the selected stat (4 columns for Highest Score, 11 for * Most Wickets), so the wash is painted on the ranked cells instead — * geometrically identical for the 10-column batting board the export was * cut from, and correct for every other board. * * Base rules are the mobile design (375);
`min-width: 768px` is desktop, which * is where the export's own breakpoint sits. */ .player-stats,
.player-stats-filter {
  /* Colours are design tokens, consumed as `hsl(var(--<token>))` — the generator emits each backend token key as HSL components (plus a `--<key>-hex` twin), so the bare var is not a usable colour on its own. Nothing colour-shaped is declared locally any more. */ --player-stats-font:
    "Poppins", -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
    "Helvetica Neue", arial, "Noto Sans", sans-serif;
  /* 1366 − 1170 = 196 → 98 per side (7.174vw). Fluid, so the content column grows with the viewport and hits exactly 1170px at 1366px. */ /* The content column comes from the HOST, not from this plugin. `--container-offset` is published by the app's `.px-container-offset` via `@container parent` queries and inherits down here, stepping 1rem → 610 → 750 → 1000 → 1200 → 1500 as the viewport grows. Consuming it puts this plugin on exactly the same column as the breadcrumb and every other template. The old fixed 1170px was the 1366 Figma width and drifted 330px narrow at >=1536. NOTE: the `100%` inside that calc resolves against the element USING it, so the gutter may only be applied to full-width elements (it is — see the two `padding` call sites). 16px is the mobile fallback for any host that does not publish the variable. */ --player-stats-gutter: var(
    --container-offset,
    16px
  );
  /* The gutter now positions the column, so the inner blocks just fill it. */ --player-stats-content-max: none;
}
.player-stats {
  position: relative;
  width: 100%;
  overflow-x: clip;
  /* Transparent on purpose: the breadcrumb template above bleeds its background ~230px down behind this plugin. A white root would paint straight over it. Any surface colour belongs on the table, not on the plugin root. */ background: transparent;
  color: hsl(var(--core_neu_900));
  font-family: var(--player-stats-font);
  font-size: 10px;
  line-height: 12px;
  -webkit-font-smoothing: antialiased;
}
.player-stats *,
.player-stats *::before,
.player-stats *::after,
.player-stats-filter *,
.player-stats-filter *::before,
.player-stats-filter *::after {
  box-sizing: border-box;
}
.player-stats img,
.player-stats-filter img {
  display: block;
  max-width: 100%;
}
/* `:where()` so the reset contributes NO extra specificity. Scoping it as `.player-stats button` would make it (0,1,1) and silently beat every single-class button rule below — the FILTER outline, the LOAD MORE outline and the close button's red plate all set `border`/`color`/`background`. */ .player-stats
:where(button),
.player-stats-filter :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  /* Chrome's UA default is 1px 6px — it silently eats the content box and shrinks flex children inside. */ padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.player-stats-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* ============================== PAGE HEADER ============================== */ /* Figma "Page Header" 1366×300;
"Header Image" 1366×585.43 anchored at top 0 and cropped. `cover` + `center top` reproduces that crop at every width. */ /* Plain block in normal flow. It paints nothing and positions nothing — the navy comes from the breadcrumb template above, whose `::before` is 300px tall against a ~70px breadcrumb and so bleeds down behind this header. 32px is the gap from the header to the table. */ .player-stats-header {
  padding-bottom: 32px;
}
.player-stats-header__inner {
  padding: 0 var(--player-stats-gutter);
}
.player-stats-header__row {
  width: 100%;
  max-width: var(--player-stats-content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
/* Upper-case at every width — STATS, matching PHOTOS / SCHEDULE. */ .player-stats-title {
  margin: 0;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  color: hsl(var(--core_neu_00));
  text-align: center;
  text-transform: uppercase;
}
/* ================================ BUTTONS =============================== */ /* Figma models the hover as a 250px ellipse (opacity 0 → 1) sweeping over the button in 300ms;
reproduced here as a clipped, scaling circle. Figma strokes are drawn INSIDE the box, so the 1px border is subtracted from the declared padding to land on the exact Figma box size. */ .player-stats-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  isolation: isolate;
  text-transform: uppercase;
  transition:
    color 0.3s ease-in,
    border-color 0.3s ease-in;
}
.player-stats-button::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  /* Figma draws this as a fixed 250px ellipse, which is fine for the 110px desktop pill it was measured on. But the FILTER button is `width: 100%` below the hero's row breakpoint — ~343px on a phone, ~720px on a tablet — and a 250px circle then covers only the middle of it, so hovering painted a red blob between the label and the icon instead of filling the button. `max()` keeps the export's 250px wherever the button is narrower than that, and grows the circle to cover anything wider. */ width: max(
    250px,
    105%
  );
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition:
    transform 0.3s ease-in,
    opacity 0.3s ease-in;
}
.player-stats-button > * {
  position: relative;
  z-index: 1;
}
.player-stats-button:hover::before,
.player-stats-button:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.player-stats-button:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}
/* Button labels never wrap. The export relies on Poppins' exact metrics — "RESET FILTER" needs 100.1px in a 105px slot, i.e. 4.9px of slack — so the moment Poppins is substituted (it 502s in local dev) or a tenant configures a longer label, the label breaks onto a second line and the 48px button grows. See `.player-stats-filter-button` for how the row buys that width back. */ .player-stats-button__label {
  white-space: nowrap;
}
.player-stats-button__icon {
  display: flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
.player-stats-button__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* --- FILTER: outline / style 3 — 110×48 (full width on mweb) ------------- */ .player-stats-button--filter {
  width: 100%;
  justify-content: space-between;
  padding: 11px 15px;
  /* 1 + 11 + 24 + 11 + 1 = 48 tall */ border: 1px solid hsl(var(--core_neu_00));
  color: hsl(var(--core_neu_00));
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
}
.player-stats-button--filter::before {
  background: hsl(var(--background_prim_container));
}
.player-stats-button--filter:hover {
  border-color: hsl(var(--background_prim_container));
}
/* --- LOAD MORE: outline / style 2 — 114×32 on mweb, 126×48 on desktop ---- */ .player-stats-button--load {
  min-width: 114px;
  padding: 5px 15px;
  /* 1 + 5 + 20 + 5 + 1 = 32 */ border: 1px solid
    hsl(var(--background_sec_surface));
  color: hsl(var(--background_sec_surface));
  font-size: 10px;
  line-height: 20px;
  font-weight: 700;
}
.player-stats-button--load::before {
  background: hsl(var(--background_sec_surface));
}
.player-stats-button--load:hover,
.player-stats-button--load:focus-visible {
  color: hsl(var(--core_neu_00));
}
/* ============================ CONTENT / TABLE =========================== */ /* Figma: content starts at y 250 while the header spans 101–401, so the table overlaps the hero by 151px (60px on mweb). */ /* No negative pull: the header no longer overlaps anything, it just precedes the table. */ .player-stats-content {
  position: relative;
  z-index: 1;
}
/* The bottom padding stops the table butting into whatever follows on /stats. Mirrors team-standings' `.standings-container`, so the two pages end the same way;
it replaces a 10px `margin-bottom` that sat on `.player-stats-content`, which left the spacing owned by a different element than the one holding the table. */ .player-stats-section {
  /* 28px below the table on mobile, 40px from 768px up — matching `.standings-container` on /standings. */ padding: 0
    var(--player-stats-gutter) 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The heading is `position: absolute`, so this gap is table -> Load More. */ gap: 24px;
}
.player-stats-table-scroll {
  width: 100%;
  max-width: var(--player-stats-content-max);
}
.player-stats-table {
  position: relative;
  background: hsl(var(--core_neu_00));
}
/* ---------- Table head — Figma "Table Header" 1170×48 / 343×44 ----------- */ .player-stats-table-head {
  /* The export sets every header in caps — MATCHES, NO, TOTAL RUNS, HS, AVG. Applied here rather than in `stats-config.ts` so all 28 boards get it from one place and the config keeps its readable labels. */ text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  /* 10 + 24 + 10 = 44 */ background: hsl(var(--core_neu_900));
  color: hsl(var(--core_neu_00));
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
}
/* ---------- Table rows — Figma "molecule_standing_data_row" 343×50 ------- */ /* Vertical padding is expressed as `min-height` rather than `padding` so the ranked column's wash can run the full row height, as it does in the export where it is one continuous absolutely-positioned band. */ .player-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  /* the mweb gutter before the ranked column */ padding: 0;
  min-height: 50px;
  background: hsl(var(--background_main_surface));
  color: hsl(var(--core_neu_900));
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
}
.player-stats-row.is-alt {
  background: hsl(var(--background_main_container));
}
/* ---------- Column groups ----------------------------------------------- group_1 = 350px fixed (POS + player) | group_2 = the stat columns. On mweb group_1 takes the slack and group_2 is the single ranked column. */ .player-stats-row-player {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 4px;
}
.player-stats-table-head .player-stats-row-player {
  gap: 10px;
}
.player-stats-row-stats {
  flex: 0 0 78px;
  min-width: 0;
  display: flex;
  align-items: stretch;
  align-self: stretch;
}
.player-stats-table-head .player-stats-row-stats {
  flex: 0 0 80px;
}
.player-stats-row-stats > * {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* head labels */ .player-stats-pos-head {
  flex: 0 0 35px;
  text-align: center;
}
.player-stats-team-head {
  flex: 1 1 auto;
}
/* POS cell — 35px fixed, bold */ .player-stats-pos {
  flex: 0 0 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
/* Player cell — team logo 38.38×43.18 in a 50×50 box + name / team pair */ .player-stats-player {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.player-stats-team-logo {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Same treatment as `.standings-team-logo img` on /standings: the badge fills its 50px box and only shrinks where the row is too tight for it. The old 38.38x43.18 box came from Figma, but with `object-fit: contain` a square badge fitted to the NARROWER side and rendered at 38.4px — visibly smaller than the design. */ .player-stats-team-logo
img {
  width: auto;
  height: 44px;
  object-fit: contain;
}
/* Full-height badge once the row grows. Gated at 768 — that is where `.player-stats-row` goes 50px -> 66px, leaving 16px of slack around a 50px badge. Below it the row is exactly 50px, so the badges would touch. (The equivalent rule on /standings is gated at 1024, because that table's row grows there.) */ @media (
    min-width: 768px
  ) {
  .player-stats-team-logo img {
    height: 100%;
  }
}
.player-stats-player-names {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.player-stats-player-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-stats-team {
  font-weight: 400;
}
/* The ranked column — bold value, and the 29% #E9676D wash from the export. Applied to the cell (not an overlay) so it tracks whichever column the selected stat board is ranked by. */ .player-stats-row
.is-ranked {
  font-weight: 700;
  background: rgb(233 103 109 / 29%);
  /* --player-stats-highlight at the export's 29% */
}
/* Columns the board hides on mweb — only POS · TEAMS · the ranked stat survive, exactly as the export drops everything but TOTAL RUNS. */ .player-stats
.player-stats-cell--desktop {
  display: none;
}
.player-stats-empty {
  padding: 40px 16px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: hsl(var(--core_neu_900));
}
/* ---------- Load More ---------------------------------------------------- */ .player-stats-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ------------------------------- skeleton -------------------------------- */ .player-stats-skeleton {
  width: 100%;
  max-width: var(--player-stats-content-max);
  display: flex;
  flex-direction: column;
}
.player-stats-skeleton-head {
  height: 44px;
  background: hsl(var(--core_neu_900));
}
.player-stats-skeleton-row {
  height: 50px;
  background: hsl(var(--background_main_container));
}
.player-stats-skeleton-row:nth-child(odd) {
  background: rgb(17 17 21 / 6%);
}
@media (prefers-reduced-motion: no-preference) {
  .player-stats-skeleton-row {
    animation: player-stats-pulse 1.4s ease-in-out infinite;
  }
}
@keyframes player-stats-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
/* ===================== DESKTOP / TABLET — 768px and up =================== */ @media (
    min-width: 768px
  ) {
  /* The old `clamp(16px, 7.174vw, 98px)` approximated the host column with a fluid gutter tuned to 1366. `--container-offset` is the real thing and already covers every breakpoint, so there is nothing to override here. */ .player-stats {
    font-size: 12px;
    line-height: 14px;
  }
  .player-stats-header__row {
    min-height: 48px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .player-stats-title {
    font-size: 32px;
    line-height: 38px;
    text-align: left;
  }
  .player-stats-button--filter {
    width: auto;
    min-width: 110px;
    justify-content: center;
    font-size: 16px;
  }
  .player-stats-button--load {
    min-width: 126px;
    padding: 11px 15px;
    /* 1 + 11 + 24 + 11 + 1 = 48 */ font-size: 16px;
    line-height: 24px;
  }
  .player-stats-section {
    padding-bottom: 40px;
  }
  /* Below ~960px the ten numeric columns collide, so the table scrolls inside its own container. The page itself never scrolls sideways. */ .player-stats-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .player-stats-table {
    min-width: 820px;
  }
  .player-stats-table-head {
    padding: 10px 20px;
    /* 10 + 28 + 10 = 48 */ font-size: 12px;
    line-height: 14px;
  }
  .player-stats-row {
    padding: 0 20px;
    gap: 0;
    min-height: 66px;
    /* 8 + 50 + 8 */ font-size: 12px;
    line-height: 14px;
  }
  /* group_1 = 350px fixed | group_2 = the rest, split evenly per column */ .player-stats-row-player,
  .player-stats-table-head .player-stats-row-player {
    flex: 0 0 350px;
    gap: 10px;
  }
  .player-stats-row-stats,
  .player-stats-table-head .player-stats-row-stats {
    flex: 1 1 auto;
  }
  .player-stats-pos-head {
    flex: 0 0 auto;
    text-align: left;
  }
  /* Every column is present from here up. */ .player-stats
  .player-stats-cell--desktop {
    display: flex;
  }
}
/* Very narrow phones (≤340px): let the name shrink before anything overflows */ @media (
    max-width: 340px
  ) {
  .player-stats-row .player-stats-row-stats {
    flex: 0 0 64px;
  }
  .player-stats-table-head .player-stats-row-stats {
    flex: 0 0 66px;
  }
}
/* =============================== FILTER MODAL =========================== Figma "Filter Modal / Default" 377×619, presented as a right-side drawer at that width stretched to the full viewport height;
the options list is the only scrolling region, so the header and the action buttons stay put at any viewport height. Full width below 768px. Portaled to <body>, outside `.player-stats`, so it is never clipped by the surface's `overflow-x: clip`. */ .player-stats-filter {
  font-family: var(--player-stats-font);
}
/* Scoped `.player-stats-filter .player-stats-filter-backdrop`, not the bare class: the scrim is a <button>, and `.player-stats-filter button {
  background: none
}
` above has higher specificity (class + element) than a lone class — it would blank it out. */ .player-stats-filter
.player-stats-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgb(17 17 21 / 50%);
  opacity: 0;
  cursor: default;
  transition: opacity 0.3s ease-out;
}
.player-stats-filter .player-stats-filter-backdrop.is-open {
  opacity: 1;
}
.player-stats-filter-panel {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  width: 100%;
  /* dvh, not vh: on mobile Safari the address bar would otherwise push the action buttons below the fold. */ height: 100dvh;
  display: flex;
  flex-direction: column;
  background: hsl(var(--background_main_container));
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  will-change: transform;
}
.player-stats-filter-panel.is-open {
  transform: translateX(0);
}
/* ---------- Filter Header — 377×52, #0D1D41 ----------------------------- */ .player-stats-filter-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  /* 10 + 32 + 10 = 52 */ background: hsl(var(--background_sec_surface));
}
.player-stats-filter-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 700;
  color: hsl(var(--core_neu_00));
}
/* Close Button — 32px circle, #EA0A2C, hover sweeps to #FFFFFF */ .player-stats-filter-close {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px;
  background: hsl(var(--background_prim_container));
  color: hsl(var(--text_button_prim_default));
  transition: color 0.3s ease-in;
}
.player-stats-filter-close::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: hsl(var(--core_neu_00));
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition:
    transform 0.3s ease-in,
    opacity 0.3s ease-in;
}
.player-stats-filter-close:hover::before,
.player-stats-filter-close:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.player-stats-filter-close:hover,
.player-stats-filter-close:focus-visible {
  color: hsl(var(--background_prim_container));
}
/* 32×32 at 1:1 — never let it shrink, the ✕ glyph must stay 11px like the asset */ .player-stats-filter-close
svg {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}
.player-stats-filter-close:focus-visible {
  outline: 2px solid hsl(var(--core_neu_00));
  outline-offset: 2px;
}
/* ---------- Filter Options — the scrolling region ----------------------- */ .player-stats-filter-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* One dropdown row — 377×71 closed (63px content + 8px gap), the hairline on the boundary exactly as Figma's centre-aligned 1px stroke sits on y=71. */ .player-stats-filter-group {
  position: relative;
  padding: 0 16px 8px;
}
.player-stats-filter-group::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: hsl(var(--border_main_default));
}
.player-stats-filter-group__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px 14px 16px;
  /* 14 + 35 + 14 = 63 */ text-align: left;
}
.player-stats-filter-group__toggle:focus-visible {
  outline: 2px solid hsl(var(--background_sec_surface));
  outline-offset: -2px;
}
.player-stats-filter-group__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.player-stats-filter-group__label {
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  color: hsl(var(--core_neu_900));
}
.player-stats-filter-group__value {
  font-size: 14px;
  line-height: 17px;
  font-weight: 700;
  color: hsl(var(--text_main_prim));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-stats-filter-group__chevron {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: hsl(var(--core_neu_900));
  transition: transform 0.3s ease-out;
}
.player-stats-filter-group__toggle[aria-expanded="true"]
  .player-stats-filter-group__chevron {
  transform: rotate(180deg);
}
/* Options list. Figma's open-state frames were not exported — styled from the modal's own type ramp: 14/17, #111115, selected = 700 #BD0010. */ .player-stats-filter-options-wrap {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 0.3s ease-out,
    visibility 0s linear 0.3s;
}
.player-stats-filter-group.is-open .player-stats-filter-options-wrap {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows 0.3s ease-out,
    visibility 0s;
}
.player-stats-filter-options {
  overflow: hidden;
  min-height: 0;
}
.player-stats-filter-option {
  display: block;
  width: 100%;
  padding: 12px 24px 12px 16px;
  /* label aligns with the headline above */ text-align: left;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: hsl(var(--core_neu_900));
  transition:
    background-color 0.15s ease-out,
    color 0.15s ease-out;
}
.player-stats-filter-option:hover {
  background: hsl(var(--background_main_card));
}
.player-stats-filter-option[aria-checked="true"] {
  font-weight: 700;
  color: hsl(var(--text_main_prim));
}
.player-stats-filter-option:focus-visible {
  outline: 2px solid hsl(var(--background_sec_surface));
  outline-offset: -2px;
}
/* ---------- Action Buttons — 377×88 ------------------------------------- */ .player-stats-filter-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px 16px;
  /* 20 + 48 + 20 = 88 */ background: hsl(var(--background_main_container));
}
/* The export splits the row into exact halves (`flex: 1 1 0`). RESET FILTER is the wider label AND carries a 24px icon, so the halves leave it almost no slack. `flex: 1 1 auto` divides the SURPLUS evenly instead of the total: each button first takes the width its own content needs, then they share what's left. With Poppins the result is within a few px of the export's halves;
without it, the row redistributes instead of wrapping. */ .player-stats-filter-button {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
}
/* Apply Filters — filled #EA0A2C, hover sweeps to #D80026 */ .player-stats-filter-button--apply {
  padding: 12px 16px;
  /* 12 + 24 + 12 = 48, no border */ background: hsl(
    var(--background_prim_container)
  );
  color: hsl(var(--text_button_prim_default));
}
.player-stats-filter-button--apply::before {
  background: hsl(var(--background_button_prim_hover));
}
/* Reset Filter — outline #0D1D41, hover sweeps to #162C58 */ .player-stats-filter-button--reset {
  padding: 11px 15px;
  /* 1 + 11 + 24 + 11 + 1 = 48 */ border: 1px solid
    hsl(var(--background_sec_surface));
  color: hsl(var(--background_sec_surface));
}
.player-stats-filter-button--reset::before {
  background: hsl(var(--background_sec_container));
}
.player-stats-filter-button--reset:hover,
.player-stats-filter-button--reset:focus-visible {
  color: hsl(var(--core_neu_00));
}
@media (min-width: 768px) {
  .player-stats-filter-panel {
    width: 377px;
    /* Figma frame width */ max-width: 100dvw;
  }
  .player-stats-filter-button {
    font-size: 16px;
  }
}
/* Guard the action row on very narrow phones — the two labels are long */ @media (
    max-width: 359px
  ) {
  .player-stats-filter-actions {
    gap: 8px;
  }
  .player-stats-filter-button--apply {
    padding-left: 8px;
    padding-right: 8px;
  }
  .player-stats-filter-button--reset {
    padding-left: 7px;
    padding-right: 7px;
  }
}
/* ---------------------------- Motion preferences ------------------------ */ @media (
    prefers-reduced-motion: reduce
  ) {
  .player-stats-button,
  .player-stats-button::before,
  .player-stats-filter-panel,
  .player-stats-filter .player-stats-filter-backdrop,
  .player-stats-filter-close,
  .player-stats-filter-close::before,
  .player-stats-filter-options-wrap,
  .player-stats-filter-group__chevron {
    transition: none;
  }
}
/* stats plugin css ended */

[data-atom-id="60ac8ceb-bac0-47d1-86ac-835727a92b9d"] {
top: 2px;
}