#cpTop30Module {
    --ink: #141414;
    --muted: #6f6a5f;
    --line: rgba(0, 0, 0, 0.14);
    --line-soft: rgba(0, 0, 0, 0.08);
    --sky: #89CFF0;
    --sky-light: #d8f3ff;
    --sky-mid: #aee4fa;
    --red: #c41e3a;
    --red-dark: #8f1529;

    /* HOST-SURFACE tokens -- for elements rendering directly on the host page
       rather than inside one of this module's own panels. The host is LIGHT,
       so these resolve to the ordinary dark palette; they exist as their own
       names so all of them can be re-pointed from one place. */
    --on-host: #141414;
    --on-host-muted: #6f6a5f;
    --on-host-accent: #8f1529;
    --on-host-line: rgba(0, 0, 0, 0.14);

    --serif: Georgia, "Times New Roman", serif;
    --sans: Arial, Helvetica, sans-serif;

    /* ---- TYPE SCALE ---------------------------------------------------
       Every font-size in this module resolves from here. Before August 2026
       the modules used THIRTY ad-hoc sizes starting at 7.5px, 342 of them
       under 11px, which is the main reason the site read as dense and
       illegible on a phone. Dense stat tables genuinely want small text --
       Savant and FanGraphs sit around 12px -- so the floor is 11.5px, not a
       comfortable reading size, but nothing below it. The narrow-screen block
       at the end of this stylesheet lifts the bottom of the scale again. */
    --fs-micro: 11.5px;  /* dense table cells, chips, superscripts */
    --fs-xs: 12px;       /* column headers, meta lines, labels */
    --fs-sm: 13px;       /* secondary text */
    --fs-base: 14px;     /* body */
    --fs-md: 15px;       /* emphasis, player names in lists */
    --fs-lg: 17px;       /* sub-headings */
    --fs-xl: 20px;       /* headings */
    --fs-2xl: 24px;      /* section titles */
    --fs-3xl: clamp(26px, 3.4vw, 34px);  /* page titles */

    /* ---- SPACING (4px base) ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* ---- RADIUS + ELEVATION ---- */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-pill: 999px;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.07), 0 8px 20px -12px rgba(0, 0, 0, 0.18);
    --shadow-3: 0 4px 14px rgba(0, 0, 0, 0.10), 0 18px 40px -20px rgba(0, 0, 0, 0.25);

    /* ---- MOTION ---- */
    --ease: cubic-bezier(0.4, 0.1, 0.2, 1);
    --dur-1: 0.16s;
    --dur-2: 0.28s;

    max-width: 1040px;
    margin: -18px auto 0;
    padding: 0 18px;
  }

  #cpTop30Module .cp-top30-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
  }

  #cpTop30Module .cp-top30-arrow {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    color: #111;
    /* touch-action tells iOS this control can never be double-tap-zoomed, which
       is what lets Safari dispatch the click on touchend instead of holding it
       ~300ms to see whether a second tap is coming. Without it every tap on an
       iPad feels like a delayed response no matter how fast the render is. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.16s ease, transform 0.16s ease, color 0.16s ease;
  }

  #cpTop30Module .cp-top30-arrow:hover:not(:disabled) {
    color: #c41e3a;
    transform: translateY(-1px) scale(1.08);
  }

  #cpTop30Module .cp-top30-arrow:active:not(:disabled) {
    transform: translateY(0) scale(0.96);
  }

  #cpTop30Module .cp-top30-arrow:disabled {
    opacity: 0.28;
    cursor: default;
  }

  #cpTop30Module .cp-top30-count {
    display: none;
    font-family: var(--serif);
    font-size: 13px;
    color: #222;
    min-width: 64px;
    text-align: center;
  }

  #cpTop30Module .cp-top30-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    perspective: 1400px;
  }

  /* Original timing and stagger, deliberately. See SLIDE_OUT_MS in the script. */
  #cpTop30Module .cp-prospect {
    text-align: center;
    opacity: 1;
    transform: translateX(0) scale(1);
    transition:
      opacity 0.26s ease,
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #cpTop30Module .cp-prospect:nth-child(2) {
    transition-delay: 35ms;
  }

  #cpTop30Module .cp-prospect:nth-child(3) {
    transition-delay: 70ms;
  }

  /* ---------- What actually makes the slide smooth ----------
     The motion is opacity + transform only, so in principle the compositor can
     run it without the main thread. In practice a card is a `preserve-3d`
     subtree layered with gradient pseudo-elements, big blurred box-shadows and
     two BACKDROP-FILTERED chips, and any one of those can force a full repaint
     of all three cards on every frame. `cp-is-sliding` is added a frame BEFORE
     the movement starts (see animateTo) so the layer exists before it is needed
     — promoting on the same tick costs a hitch on the first frame, which is
     exactly where a stutter is most visible. */
  #cpTop30Module .cp-top30-grid.cp-is-sliding .cp-prospect {
    will-change: opacity, transform;
  }

  /* A backdrop-filter cannot be rasterised once and reused: it re-samples
     whatever is behind it every frame, and while the card is both moving AND
     fading, "whatever is behind it" changes every frame. Two of these per card,
     six on screen, was the single most expensive thing in the transition. The
     chips already sit on a near-opaque white fill, so dropping the blur for the
     third of a second the card is in motion is not visible — the fill is nudged
     up to full opacity so the swap cannot show as a flicker. */
  #cpTop30Module .cp-top30-grid.cp-is-sliding .cp-card-level-chip,
  #cpTop30Module .cp-top30-grid.cp-is-sliding .cp-card-fv-chip {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.97);
  }

  #cpTop30Module .cp-top30-grid.cp-slide-out-next .cp-prospect {
    opacity: 0;
    transform: translateX(-38px) scale(0.985);
  }

  #cpTop30Module .cp-top30-grid.cp-slide-out-prev .cp-prospect {
    opacity: 0;
    transform: translateX(38px) scale(0.985);
  }

  #cpTop30Module .cp-top30-grid.cp-slide-in-next .cp-prospect {
    opacity: 0;
    transform: translateX(38px) scale(0.985);
  }

  #cpTop30Module .cp-top30-grid.cp-slide-in-prev .cp-prospect {
    opacity: 0;
    transform: translateX(-38px) scale(0.985);
  }

  #cpTop30Module .cp-player-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  #cpTop30Module .cp-card {
    --rx: 0deg;
    --ry: 0deg;
    --lift: 0px;
    --foil-a: rgba(255, 112, 183, 0.16);
    --foil-b: rgba(91, 190, 255, 0.16);
    --foil-c: rgba(96, 220, 174, 0.11);
    --foil-hot: rgba(255, 255, 255, 0.34);
    --foil-opacity: 0.38;
    --card-holo-opacity: 0.13;
    --sweep-color: rgba(255, 255, 255, 0.52);
    --photo-sweep-soft: rgba(124, 205, 244, 0.16);
    --photo-sweep-mid: rgba(213, 244, 255, 0.40);
    --photo-sweep-core: rgba(255, 255, 255, 0.72);
    --photo-sweep-opacity: 0.48;

    position: relative;
    height: 334px;
    padding: 11px;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(180deg, #fffdf8 0%, #f1eee7 100%);
    border: 1px solid rgba(0, 0, 0, 0.14);
    box-shadow:
      0 14px 28px rgba(0, 0, 0, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
    transform:
      translateY(var(--lift))
      rotateX(var(--rx))
      rotateY(var(--ry));
    transform-style: preserve-3d;
    transition:
      transform 0.22s ease,
      box-shadow 0.22s ease,
      border-color 0.22s ease;
  }

  #cpTop30Module .cp-player-link:hover .cp-card {
    --lift: -3px;
    box-shadow:
      0 22px 40px rgba(0, 0, 0, 0.16),
      0 5px 0 rgba(0, 0, 0, 0.035),
      0 0 0 1px rgba(137, 207, 240, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.86);
    border-color: rgba(137, 207, 240, 0.9);
  }

  #cpTop30Module .cp-player-link:focus-visible .cp-card {
    --lift: -3px;
    outline: 2px solid #c41e3a;
    outline-offset: 4px;
  }

  /* Restrained base foil. It does not follow the pointer; motion is
     limited to the card and photo-window sweeps. */
  #cpTop30Module .cp-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 24;
    border-radius: inherit;
    pointer-events: none;
    background:
      radial-gradient(circle at 24% 18%, var(--foil-a) 0%, transparent 46%),
      radial-gradient(circle at 78% 28%, var(--foil-b) 0%, transparent 48%),
      radial-gradient(circle at 54% 88%, var(--foil-c) 0%, transparent 52%),
      linear-gradient(180deg, var(--foil-hot) 0%, transparent 34%, rgba(255, 255, 255, 0.06) 100%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.28s ease;
  }

  #cpTop30Module .cp-player-link:hover .cp-card::before,
  #cpTop30Module .cp-player-link:focus-visible .cp-card::before {
    opacity: var(--card-holo-opacity);
  }

  #cpTop30Module .cp-card.is-flipped::before {
    opacity: 0;
  }

  /* V5: a gradual diagonal light sweep crosses the card once on hover/focus.
     The band is feathered and oversized so it reads as reflected light rather
     than a rectangle. It is time-based and never follows the pointer. */
  #cpTop30Module .cp-card::after {
    content: "";
    position: absolute;
    top: -42%;
    left: -78%;
    width: 48%;
    height: 190%;
    z-index: 25;
    border-radius: 50%;
    pointer-events: none;
    background: linear-gradient(
      115deg,
      transparent 0%,
      rgba(255, 255, 255, 0.015) 24%,
      rgba(255, 255, 255, 0.10) 39%,
      var(--sweep-color) 50%,
      rgba(255, 255, 255, 0.12) 61%,
      rgba(255, 255, 255, 0.02) 76%,
      transparent 100%
    );
    filter: blur(8px);
    opacity: 0;
    transform: rotate(12deg) translate3d(-8%, 0, 0);
    transform-origin: center;
  }

  @keyframes cpHoloSweepV5 {
    0% {
      opacity: 0;
      transform: rotate(12deg) translate3d(-8%, 0, 0);
    }

    16% { opacity: 0.30; }
    48% { opacity: 0.68; }
    78% { opacity: 0.42; }

    100% {
      opacity: 0;
      transform: rotate(12deg) translate3d(430%, 0, 0);
    }
  }

  #cpTop30Module .cp-player-link:hover .cp-card:not(.is-flipped)::after,
  #cpTop30Module .cp-player-link:focus-visible .cp-card:not(.is-flipped)::after {
    animation: cpHoloSweepV5 2.05s cubic-bezier(0.30, 0.08, 0.22, 1) both;
  }

  #cpTop30Module .cp-card-face {
    position: absolute;
    inset: 11px;
    transform-style: preserve-3d;
    transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 3;
  }

  #cpTop30Module .cp-card.is-flipped .cp-card-face {
    transform: rotateY(180deg);
  }

  /* Deal-in — on first load the cards drop onto the table with a slight
     spin, staggered like being dealt from a deck. */
  @keyframes cpDealIn {
    from {
      opacity: 0;
      transform: translateY(34px) rotate(3deg) scale(0.955);
      filter: blur(3px);
    }

    to {
      opacity: 1;
      transform: translateY(0) rotate(0deg) scale(1);
      filter: blur(0);
    }
  }

  #cpTop30Module .cp-top30-grid.cp-deal .cp-prospect {
    animation: cpDealIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  #cpTop30Module .cp-top30-grid.cp-deal .cp-prospect:nth-child(2) {
    animation-delay: 110ms;
  }

  #cpTop30Module .cp-top30-grid.cp-deal .cp-prospect:nth-child(3) {
    animation-delay: 220ms;
  }

  #cpTop30Module .cp-card-front,
  #cpTop30Module .cp-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
  }

  #cpTop30Module .cp-card-front {
    transform: rotateY(0deg);
  }

  #cpTop30Module .cp-card-back {
    transform: rotateY(180deg);
  }

  /* box-sizing MATTERS here. This is `width/height: 100%` with a 1px border, so
     under the default content-box it measured 2px WIDER and TALLER than the
     `.cp-card-front` that clips it — the right and bottom borders were cropped
     away by that parent's `overflow: hidden` while the left and top ones showed.
     The result was a card with a visible blue-tinted edge down the left side and
     nothing on the right. border-box makes all four edges identical. */
  #cpTop30Module .cp-card-inner {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background:
      linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
      repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.040) 0,
        rgba(255, 255, 255, 0.040) 2px,
        rgba(0, 0, 0, 0.012) 2px,
        rgba(0, 0, 0, 0.012) 4px
      ),
      radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.48), transparent 28%),
      radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.18), transparent 26%),
      linear-gradient(145deg, #d8f3ff 0%, #aee4fa 43%, #89CFF0 100%);
    background-size:
      18px 18px,
      18px 18px,
      auto,
      auto,
      auto,
      auto;
    border: 1px solid rgba(0, 0, 0, 0.13);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  #cpTop30Module .cp-card-back {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background:
      radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.48), transparent 28%),
      radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.18), transparent 26%),
      linear-gradient(145deg, #d8f3ff 0%, #aee4fa 43%, #89CFF0 100%);
    border: 1px solid rgba(0, 0, 0, 0.13);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  #cpTop30Module .cp-card-back::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
      repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.035) 0,
        rgba(255, 255, 255, 0.035) 2px,
        rgba(0, 0, 0, 0.01) 2px,
        rgba(0, 0, 0, 0.01) 4px
      );
    background-size: 18px 18px, 18px 18px, auto;
    opacity: 0.22;
    pointer-events: none;
  }

  #cpTop30Module .cp-card-level-chip,
  #cpTop30Module .cp-card-fv-chip {
    position: absolute;
    top: 16px;
    z-index: 8;
    padding: 5px 9px 6px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    color: #b91c35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  #cpTop30Module .cp-card-level-chip { left: 15px; }
  #cpTop30Module .cp-card-fv-chip { right: 15px; }

  #cpTop30Module .cp-photo-window {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 42px;
    bottom: 78px;
    overflow: hidden;
    border-radius: 18px 18px 6px 6px;
    background:
      radial-gradient(circle at 22% 14%, rgba(255, 255, 255, 0.40), transparent 28%),
      linear-gradient(180deg, #dff5ff 0%, #b6e5fa 54%, #89CFF0 100%);
    border: 5px solid rgba(255, 255, 255, 0.96);
    box-shadow:
      0 12px 18px rgba(0, 0, 0, 0.12),
      inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    z-index: 6;
    isolation: isolate;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  #cpTop30Module .cp-player-link:hover .cp-photo-window {
    box-shadow:
      0 16px 28px rgba(0, 0, 0, 0.14),
      0 0 24px rgba(137, 207, 240, 0.30),
      inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  }

  #cpTop30Module .cp-photo-window::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 22% 14%, rgba(255, 255, 255, 0.40), transparent 28%),
      linear-gradient(180deg, #dff5ff 0%, #b6e5fa 54%, #89CFF0 100%);
    z-index: 0;
    pointer-events: none;
  }

  #cpTop30Module .cp-photo-window::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, rgba(0, 0, 0, 0.06), transparent 36%),
      radial-gradient(circle at 50% 106%, rgba(255, 255, 255, 0.10), transparent 40%);
    z-index: 2;
    pointer-events: none;
  }

  @keyframes cpPhotoSweepV7 {
    0% {
      background-position: 136% 0;
      opacity: 0;
    }

    12% { opacity: 0.16; }
    45% { opacity: var(--photo-sweep-opacity); }
    82% { opacity: 0.22; }

    100% {
      background-position: -36% 0;
      opacity: 0;
    }
  }


  #cpTop30Module .cp-headshot,
  #cpTop30Module .cp-default-headshot {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter:
      saturate(1.02)
      contrast(1.01)
      drop-shadow(0 12px 10px rgba(0, 0, 0, 0.18));
    transition: transform 0.22s ease, filter 0.22s ease;
  }

  #cpTop30Module .cp-default-headshot {
    width: auto;
    max-width: none;
  }

  #cpTop30Module .cp-player-link:hover .cp-headshot,
  #cpTop30Module .cp-player-link:hover .cp-default-headshot {
    transform: scale(1.035);
    filter:
      saturate(1.05)
      contrast(1.03)
      drop-shadow(0 15px 12px rgba(0, 0, 0, 0.21));
  }

  #cpTop30Module .cp-card-nameplate {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    z-index: 7;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 246, 244, 0.99));
    border-top: 1px solid rgba(137, 207, 240, 0.65);
    box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.065);
  }

  #cpTop30Module .cp-card-nameplate::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(137, 207, 240, 0.16), transparent 26%, transparent 74%, rgba(137, 207, 240, 0.16));
    pointer-events: none;
  }

  #cpTop30Module .cp-card-logo-badge {
    position: absolute;
    left: 13px;
    bottom: 13px;
    width: 42px;
    height: 42px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  #cpTop30Module .cp-card-logo-badge img {
    width: 84%;
    height: 84%;
    object-fit: contain;
    display: block;
  }

  #cpTop30Module .cp-card-rank-badge {
    position: absolute;
    right: 13px;
    bottom: 13px;
    min-width: 42px;
    height: 42px;
    padding: 0 8px;
    background: linear-gradient(180deg, #cc314b, #ad1b34);
    color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  #cpTop30Module .cp-card-nameblock {
    position: absolute;
    left: 62px;
    right: 62px;
    bottom: 8px;
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #cpTop30Module .cp-card-name {
    width: 100%;
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.04;
    color: #141414;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  #cpTop30Module .cp-card-position {
    margin-top: 3px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    color: #b91c35;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  #cpTop30Module .cp-back-content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 11px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  #cpTop30Module .cp-back-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
  }

  #cpTop30Module .cp-back-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px 6px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    color: #b91c35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  #cpTop30Module .cp-back-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 34px;
    padding: 0 9px;
    background: linear-gradient(180deg, #cc314b, #ad1b34);
    color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
  }

  #cpTop30Module .cp-back-name {
    margin: 0 auto 2px;
    max-width: 95%;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.04;
    color: #141414;
    text-align: center;
    text-wrap: balance;
  }

  #cpTop30Module .cp-back-sub {
    margin-bottom: 8px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    color: #b91c35;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
  }

  #cpTop30Module .cp-stats-box {
    min-height: 112px;
    padding: 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 7px 16px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
  }

  #cpTop30Module .cp-stats-loading,
  #cpTop30Module .cp-stats-error,
  #cpTop30Module .cp-stats-empty {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 700;
    color: #222;
    text-align: center;
  }

  #cpTop30Module .cp-stats-error {
    flex-direction: column;
    gap: 6px;
  }

  #cpTop30Module .cp-stats-empty {
    color: #333;
  }

  #cpTop30Module .cp-stats-title {
    margin-bottom: 7px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    color: #555;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
  }

  #cpTop30Module .cp-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  #cpTop30Module .cp-stat {
    padding: 7px 4px 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 247, 244, 0.98));
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    text-align: center;
  }

  #cpTop30Module .cp-stat-value {
    display: block;
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    color: #141414;
    white-space: nowrap;
  }

  #cpTop30Module .cp-stat-label {
    display: block;
    margin-top: 4px;
    font-family: var(--sans);
    font-size: 7.5px;
    font-weight: 900;
    line-height: 1;
    color: #b91c35;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  #cpTop30Module .cp-back-footer {
    margin-top: auto;
    padding-top: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 26px;
  }

  #cpTop30Module .cp-back-hint {
    font-family: var(--sans);
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    color: rgba(20, 20, 20, 0.58);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  #cpTop30Module .cp-back-profile-link {
    position: relative;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 9px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.10);
    color: #b91c35;
    text-decoration: none;
    font-family: var(--sans);
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  }

  #cpTop30Module .cp-back-profile-link:hover {
    background: #ffffff;
    color: #8f1529;
  }

  /* Parallel treatments — the top 3 prospects get gold, silver, and bronze
     rank badges plus a matching card edge, like numbered parallels. */
  #cpTop30Module .cp-card[data-rank="1"] .cp-card-rank-badge,
  #cpTop30Module .cp-card[data-rank="1"] .cp-back-rank {
    background: linear-gradient(180deg, #f7dd7f 0%, #e3b94a 45%, #c9962a 100%);
    color: #402e06;
    border-color: rgba(122, 88, 12, 0.45);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  }

  #cpTop30Module .cp-player-link:hover .cp-card[data-rank="1"] {
    border-color: rgba(227, 185, 74, 0.9);
    box-shadow:
      0 22px 40px rgba(0, 0, 0, 0.16),
      0 0 0 1px rgba(227, 185, 74, 0.55),
      0 0 26px rgba(227, 185, 74, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.86);
  }

  #cpTop30Module .cp-card[data-rank="2"] .cp-card-rank-badge,
  #cpTop30Module .cp-card[data-rank="2"] .cp-back-rank {
    background: linear-gradient(180deg, #f0f1f5 0%, #c8ccd6 45%, #a4a9b6 100%);
    color: #2b2e36;
    border-color: rgba(90, 96, 110, 0.4);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  }

  #cpTop30Module .cp-player-link:hover .cp-card[data-rank="2"] {
    border-color: rgba(176, 181, 194, 0.95);
    box-shadow:
      0 22px 40px rgba(0, 0, 0, 0.16),
      0 0 0 1px rgba(176, 181, 194, 0.6),
      0 0 26px rgba(176, 181, 194, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.86);
  }

  #cpTop30Module .cp-card[data-rank="3"] .cp-card-rank-badge,
  #cpTop30Module .cp-card[data-rank="3"] .cp-back-rank {
    background: linear-gradient(180deg, #ecb27e 0%, #cd8144 45%, #a8642f 100%);
    color: #3a2008;
    border-color: rgba(110, 62, 22, 0.45);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  }

  #cpTop30Module .cp-player-link:hover .cp-card[data-rank="3"] {
    border-color: rgba(205, 129, 68, 0.9);
    box-shadow:
      0 22px 40px rgba(0, 0, 0, 0.16),
      0 0 0 1px rgba(205, 129, 68, 0.55),
      0 0 26px rgba(205, 129, 68, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.86);
  }

  /* Stats pop in one by one when the back of the card loads. */
  @keyframes cpStatPop {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.94);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  #cpTop30Module .cp-stat {
    animation: cpStatPop 0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  #cpTop30Module .cp-stat:nth-child(2) { animation-delay: 45ms; }
  #cpTop30Module .cp-stat:nth-child(3) { animation-delay: 90ms; }
  #cpTop30Module .cp-stat:nth-child(4) { animation-delay: 135ms; }
  #cpTop30Module .cp-stat:nth-child(5) { animation-delay: 180ms; }
  #cpTop30Module .cp-stat:nth-child(6) { animation-delay: 225ms; }

  #cpTop30Module .cp-top30-loading,
  #cpTop30Module .cp-top30-error {
    grid-column: 1 / -1;
    text-align: center;
    font-family: var(--serif);
    font-size: 18px;
    padding: 40px 0;
  }

  #cpTop30Module.cp-is-mobile {
    max-width: 100%;
    margin-top: 8px;
    padding: 0 14px;
  }

  #cpTop30Module.cp-is-mobile .cp-top30-controls {
    justify-content: center;
    gap: 14px;
    margin: 14px 0 18px;
  }

  #cpTop30Module.cp-is-mobile .cp-top30-arrow {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(0, 0, 0, 0.10);
    font-size: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 4px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.08);
  }

  #cpTop30Module.cp-is-mobile .cp-top30-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.045);
  }

  #cpTop30Module.cp-is-mobile .cp-top30-grid {
    grid-template-columns: 1fr;
    gap: 0;
    width: min(80vw, 305px);
    margin: 0 auto;
  }

  #cpTop30Module.cp-is-mobile .cp-card {
    height: clamp(246px, 75vw, 292px);
    padding: 9px;
    border-radius: 15px;
    box-shadow:
      0 12px 24px rgba(0, 0, 0, 0.095),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }

  #cpTop30Module.cp-is-mobile .cp-card-face {
    inset: 9px;
  }

  #cpTop30Module.cp-is-mobile .cp-card-front,
  #cpTop30Module.cp-is-mobile .cp-card-back,
  #cpTop30Module.cp-is-mobile .cp-card-inner {
    border-radius: 11px;
  }

  #cpTop30Module.cp-is-mobile .cp-photo-window {
    left: 18px;
    right: 18px;
    top: 38px;
    bottom: 68px;
    border-width: 4px;
    border-radius: 15px 15px 5px 5px;
  }

  #cpTop30Module.cp-is-mobile .cp-card-level-chip,
  #cpTop30Module.cp-is-mobile .cp-card-fv-chip {
    top: 13px;
    padding: 4px 8px 5px;
    font-size: 9px;
  }

  #cpTop30Module.cp-is-mobile .cp-card-level-chip { left: 13px; }
  #cpTop30Module.cp-is-mobile .cp-card-fv-chip { right: 13px; }

  #cpTop30Module.cp-is-mobile .cp-card-nameplate {
    height: 62px;
  }

  #cpTop30Module.cp-is-mobile .cp-card-logo-badge {
    left: 10px;
    bottom: 10px;
    width: 36px;
    height: 36px;
  }

  #cpTop30Module.cp-is-mobile .cp-card-rank-badge {
    right: 10px;
    bottom: 10px;
    min-width: 38px;
    height: 38px;
    font-size: 15px;
  }

  #cpTop30Module.cp-is-mobile .cp-card-nameblock {
    left: 52px;
    right: 52px;
    bottom: 7px;
    height: 47px;
  }

  #cpTop30Module.cp-is-mobile .cp-card-name {
    font-size: 13.5px;
    line-height: 1.04;
  }

  #cpTop30Module.cp-is-mobile .cp-card-position {
    margin-top: 3px;
    font-size: 8px;
  }

  #cpTop30Module.cp-is-mobile .cp-headshot,
  #cpTop30Module.cp-is-mobile .cp-default-headshot {
    filter:
      saturate(1.02)
      contrast(1.01)
      drop-shadow(0 9px 8px rgba(0, 0, 0, 0.16));
  }

  #cpTop30Module.cp-is-mobile .cp-back-content {
    padding: 9px;
  }

  #cpTop30Module.cp-is-mobile .cp-back-top {
    margin-bottom: 4px;
  }

  #cpTop30Module.cp-is-mobile .cp-back-label {
    padding: 4px 8px 5px;
    font-size: 9px;
  }

  #cpTop30Module.cp-is-mobile .cp-back-rank {
    min-width: 36px;
    height: 30px;
    font-size: 13px;
  }

  #cpTop30Module.cp-is-mobile .cp-back-name {
    font-size: 14px;
  }

  #cpTop30Module.cp-is-mobile .cp-back-sub {
    margin-bottom: 5px;
    font-size: 8px;
  }

  #cpTop30Module.cp-is-mobile .cp-stats-box {
    min-height: 96px;
    padding: 7px;
    border-radius: 10px;
  }

  #cpTop30Module.cp-is-mobile .cp-stats-loading,
  #cpTop30Module.cp-is-mobile .cp-stats-error,
  #cpTop30Module.cp-is-mobile .cp-stats-empty {
    min-height: 80px;
    font-size: 12px;
  }

  #cpTop30Module.cp-is-mobile .cp-stats-title {
    margin-bottom: 5px;
    font-size: 8px;
  }

  #cpTop30Module.cp-is-mobile .cp-stats-grid {
    gap: 5px;
  }

  #cpTop30Module.cp-is-mobile .cp-stat {
    padding: 5px 3px 4px;
  }

  #cpTop30Module.cp-is-mobile .cp-stat-value {
    font-size: 12px;
  }

  #cpTop30Module.cp-is-mobile .cp-stat-label {
    margin-top: 3px;
    font-size: 7.5px;
  }

  #cpTop30Module.cp-is-mobile .cp-back-footer {
    padding-top: 5px;
    min-height: 22px;
  }

  #cpTop30Module.cp-is-mobile .cp-back-hint,
  #cpTop30Module.cp-is-mobile .cp-back-profile-link {
    font-size: 7.5px;
  }

  #cpTop30Module.cp-is-mobile .cp-back-profile-link {
    padding: 5px 6px;
  }


  /* ---------- Restrained metallic treatments for the top 3 ---------- */
  /* Rank badges and borders remain unchanged; only the foil palette differs. */

  #cpTop30Module .cp-card[data-rank="1"] {
    --foil-a: rgba(218, 168, 47, 0.22);
    --foil-b: rgba(255, 235, 164, 0.24);
    --foil-c: rgba(184, 126, 26, 0.15);
    --foil-hot: rgba(255, 248, 215, 0.42);
    --foil-opacity: 0.48;
    --card-holo-opacity: 0.18;
    --sweep-color: rgba(255, 236, 160, 0.68);
    --photo-sweep-soft: rgba(177, 115, 18, 0.28);
    --photo-sweep-mid: rgba(242, 196, 75, 0.62);
    --photo-sweep-core: rgba(255, 247, 190, 0.96);
    --photo-sweep-opacity: 0.72;
  }

  #cpTop30Module .cp-card[data-rank="2"] {
    --foil-a: rgba(176, 184, 200, 0.22);
    --foil-b: rgba(239, 247, 255, 0.25);
    --foil-c: rgba(127, 143, 168, 0.14);
    --foil-hot: rgba(252, 254, 255, 0.44);
    --foil-opacity: 0.47;
    --card-holo-opacity: 0.17;
    --sweep-color: rgba(240, 247, 255, 0.70);
    --photo-sweep-soft: rgba(126, 145, 175, 0.26);
    --photo-sweep-mid: rgba(218, 230, 244, 0.66);
    --photo-sweep-core: rgba(255, 255, 255, 0.98);
    --photo-sweep-opacity: 0.70;
  }

  #cpTop30Module .cp-card[data-rank="3"] {
    --foil-a: rgba(191, 105, 49, 0.23);
    --foil-b: rgba(245, 181, 126, 0.24);
    --foil-c: rgba(139, 75, 35, 0.15);
    --foil-hot: rgba(255, 225, 193, 0.42);
    --foil-opacity: 0.48;
    --card-holo-opacity: 0.18;
    --sweep-color: rgba(245, 181, 126, 0.66);
    --photo-sweep-soft: rgba(139, 72, 28, 0.28);
    --photo-sweep-mid: rgba(214, 128, 67, 0.62);
    --photo-sweep-core: rgba(255, 220, 181, 0.96);
    --photo-sweep-opacity: 0.72;
  }

  /* Respect users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    #cpTop30Module *,
    #cpTop30Module *::before,
    #cpTop30Module *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
    #cpTop30Module .cp-card::before,
    #cpTop30Module .cp-card::after {
      animation: none !important;
    }
  }


  /* ---------- Reliability, accessibility, and lighter rendering ---------- */
  #cpTop30Module .cp-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  #cpTop30Module .cp-top30-loading,
  #cpTop30Module .cp-top30-error {
    width: 100%;
    box-sizing: border-box;
  }

  #cpTop30Module .cp-loading-copy {
    display: block;
    margin-bottom: 18px;
    color: #333;
  }

  #cpTop30Module .cp-loading-skeletons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
  }

  #cpTop30Module .cp-skeleton-card {
    position: relative;
    display: block;
    height: 334px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(110deg, #f0eee9 8%, #faf9f5 18%, #f0eee9 33%);
    background-size: 220% 100%;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    animation: cpTop30SkeletonPulse 1.25s linear infinite;
  }

  #cpTop30Module .cp-skeleton-card::before,
  #cpTop30Module .cp-skeleton-card::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.58);
  }

  #cpTop30Module .cp-skeleton-card::before {
    top: 42px;
    bottom: 78px;
  }

  #cpTop30Module .cp-skeleton-card::after {
    left: 52px;
    right: 52px;
    bottom: 25px;
    height: 20px;
  }

  @keyframes cpTop30SkeletonPulse {
    to { background-position-x: -220%; }
  }

  #cpTop30Module .cp-top30-error {
    color: #292929;
  }

  #cpTop30Module .cp-error-title {
    display: block;
    margin-bottom: 6px;
    font-weight: 900;
  }

  #cpTop30Module .cp-error-detail {
    display: block;
    margin: 0 auto 16px;
    max-width: 440px;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.45;
    color: #666;
  }

  #cpTop30Module .cp-retry-button,
  #cpTop30Module .cp-stats-retry {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: linear-gradient(180deg, #cc314b, #ad1b34);
    color: #fff;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.10);
  }

  #cpTop30Module .cp-stats-retry {
    min-height: 34px;
    margin-top: 8px;
    padding: 0 12px;
    font-size: 9px;
  }

  #cpTop30Module .cp-retry-button:hover,
  #cpTop30Module .cp-stats-retry:hover {
    background: linear-gradient(180deg, #d33a54, #99162c);
  }

  #cpTop30Module .cp-retry-button:focus-visible,
  #cpTop30Module .cp-stats-retry:focus-visible,
  #cpTop30Module .cp-top30-arrow:focus-visible,
  #cpTop30Module .cp-back-profile-link:focus-visible {
    outline: 3px solid rgba(196, 30, 58, 0.38);
    outline-offset: 3px;
  }

  #cpTop30Module .cp-card-logo-badge,
  #cpTop30Module .cp-card-rank-badge,
  #cpTop30Module .cp-back-label,
  #cpTop30Module .cp-back-rank,
  #cpTop30Module .cp-stat,
  #cpTop30Module .cp-back-profile-link {
    border-radius: 9px;
  }

  #cpTop30Module .cp-player-link:hover .cp-card,
  #cpTop30Module .cp-player-link:focus-visible .cp-card,
  #cpTop30Module .cp-card.is-flipped {
    will-change: transform;
  }

  #cpTop30Module .cp-stats-error {
    flex-direction: column;
  }

  #cpTop30Module .cp-player-link[aria-pressed="true"] .cp-card {
    border-color: rgba(196, 30, 58, 0.34);
  }

  #cpTop30Module .cp-back-profile-link {
    min-height: 34px;
    box-sizing: border-box;
  }

  @media (max-width: 640px) {
    #cpTop30Module .cp-loading-skeletons {
      grid-template-columns: 1fr;
      gap: 18px;
    }

    #cpTop30Module .cp-loading-skeletons .cp-skeleton-card:nth-child(n+2) {
      display: none;
    }
  }


  /* ---------- 2026-07-31: match the smoothed Top 30 page cards ---------- */
  #cpTop30Module .cp-prospect {
    overflow: visible;
  }

  #cpTop30Module .cp-card {
    --rx: 0deg;
    --ry: 0deg;
    --lift: 0px;
    --tier-glow: rgba(137, 207, 240, 0.5);
    --tier-edge: rgba(137, 207, 240, 0.85);
    --sweep-color: rgba(255, 255, 255, 0.52);

    background:
      linear-gradient(180deg, #ffffff 0%, #fdfbf6 42%, #f0ece4 100%);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow:
      0 12px 24px rgba(0, 0, 0, 0.09),
      0 2px 5px rgba(0, 0, 0, 0.05),
      inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    transform:
      translateY(var(--lift))
      rotateX(var(--rx))
      rotateY(var(--ry));
    transform-style: preserve-3d;
    transition:
      transform 0.24s ease,
      box-shadow 0.24s ease,
      border-color 0.24s ease;
  }

  #cpTop30Module .cp-player-link:hover .cp-card,
  #cpTop30Module .cp-player-link:focus-visible .cp-card {
    --lift: -5px;
    box-shadow:
      0 22px 38px rgba(0, 0, 0, 0.16),
      0 4px 10px rgba(0, 0, 0, 0.06),
      0 0 0 1px var(--tier-glow),
      inset 0 0 0 1px rgba(255, 255, 255, 0.85);
    border-color: var(--tier-edge);
  }

  #cpTop30Module .cp-player-link:focus-visible .cp-card {
    outline: 2px solid #c41e3a;
    outline-offset: 4px;
  }

  #cpTop30Module .cp-card[data-rank="1"] {
    --tier-glow: rgba(214, 168, 55, 0.6);
    --tier-edge: rgba(198, 152, 40, 0.95);
    --sweep-color: rgba(255, 236, 160, 0.68);
  }

  #cpTop30Module .cp-card[data-rank="2"] {
    --tier-glow: rgba(166, 173, 183, 0.6);
    --tier-edge: rgba(148, 156, 167, 0.95);
    --sweep-color: rgba(240, 247, 255, 0.70);
  }

  #cpTop30Module .cp-card[data-rank="3"] {
    --tier-glow: rgba(190, 128, 70, 0.6);
    --tier-edge: rgba(170, 110, 55, 0.95);
    --sweep-color: rgba(245, 181, 126, 0.66);
  }

  /* Override the carousel's former rank-specific permanent glow with the
     same restrained hover edge used on the full Top 30 page. */
  #cpTop30Module .cp-player-link:hover .cp-card[data-rank="1"],
  #cpTop30Module .cp-player-link:hover .cp-card[data-rank="2"],
  #cpTop30Module .cp-player-link:hover .cp-card[data-rank="3"],
  #cpTop30Module .cp-player-link:focus-visible .cp-card[data-rank="1"],
  #cpTop30Module .cp-player-link:focus-visible .cp-card[data-rank="2"],
  #cpTop30Module .cp-player-link:focus-visible .cp-card[data-rank="3"] {
    border-color: var(--tier-edge);
    box-shadow:
      0 22px 38px rgba(0, 0, 0, 0.16),
      0 4px 10px rgba(0, 0, 0, 0.06),
      0 0 0 1px var(--tier-glow),
      inset 0 0 0 1px rgba(255, 255, 255, 0.85);
  }

  #cpTop30Module .cp-card::before {
    background: linear-gradient(
      168deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.13) 22%,
      rgba(255, 255, 255, 0) 46%
    );
    mix-blend-mode: normal;
    opacity: 0.75;
    transition: opacity 0.24s ease;
  }

  #cpTop30Module .cp-player-link:hover .cp-card::before,
  #cpTop30Module .cp-player-link:focus-visible .cp-card::before {
    opacity: 1;
  }

  #cpTop30Module .cp-card.is-flipped::before {
    opacity: 0.5;
  }

  #cpTop30Module .cp-card::after {
    background: linear-gradient(
      115deg,
      transparent 0%,
      rgba(255, 255, 255, 0.015) 24%,
      rgba(255, 255, 255, 0.10) 39%,
      var(--sweep-color) 50%,
      rgba(255, 255, 255, 0.12) 61%,
      rgba(255, 255, 255, 0.02) 76%,
      transparent 100%
    );
  }

  #cpTop30Module .cp-card-face {
    transform: rotateY(0deg);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #cpTop30Module .cp-card.is-flipped .cp-card-face {
    transform: rotateY(180deg);
  }

  /* NOTE: the faces deliberately do NOT get their own `transform-style:
     preserve-3d`. Adding it (together with a `perspective` on the face) is what
     made the Top 30 page's flip wonky and unable to take consecutive flips; the
     page was reverted to the original, and this file has to match it. */

  #cpTop30Module .cp-card-level-chip,
  #cpTop30Module .cp-card-fv-chip {
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(6px) saturate(1.3);
    backdrop-filter: blur(6px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow:
      0 3px 9px rgba(0, 0, 0, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  #cpTop30Module .cp-card-nameblock {
    left: 60px;
    right: 60px;
    padding: 0 6px;
  }

  #cpTop30Module .cp-card-name.is-long {
    font-size: 13.5px;
  }

  #cpTop30Module .cp-card-name.is-verylong {
    font-size: 12.5px;
    letter-spacing: -0.01em;
  }

  /* ---------- Card stock and hover, matched to the Top 30 page ----------
     The two modules are separate files with separate ids, so nothing is shared
     automatically — every card change has to be made in both. These are the
     last three that had not been carried over. */
  #cpTop30Module .cp-card {
    --tier-glow: rgba(137, 207, 240, 0.5);
    --tier-edge: rgba(137, 207, 240, 0.85);
    background: linear-gradient(180deg, #ffffff 0%, #fdfbf6 42%, #f0ece4 100%);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow:
      0 12px 24px rgba(0, 0, 0, 0.09),
      0 2px 5px rgba(0, 0, 0, 0.05),
      inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    transition:
      transform 0.24s ease,
      box-shadow 0.24s ease,
      border-color 0.24s ease;
  }

  #cpTop30Module .cp-card[data-rank="1"] { --tier-glow: rgba(214, 168, 55, 0.6); --tier-edge: rgba(198, 152, 40, 0.95); }
  #cpTop30Module .cp-card[data-rank="2"] { --tier-glow: rgba(166, 173, 183, 0.6); --tier-edge: rgba(148, 156, 167, 0.95); }
  #cpTop30Module .cp-card[data-rank="3"] { --tier-glow: rgba(190, 128, 70, 0.6); --tier-edge: rgba(170, 110, 55, 0.95); }

  /* The `[data-rank]` variant is not redundant: this file still carries three
     older `:hover .cp-card[data-rank="N"]` rules whose attribute selector
     out-specifies a plain `.cp-card`. Matching their specificity and coming
     later in the sheet is what lets the unified treatment win. */
  #cpTop30Module .cp-player-link:hover .cp-card,
  #cpTop30Module .cp-player-link:hover .cp-card[data-rank],
  #cpTop30Module .cp-player-link:focus-visible .cp-card,
  #cpTop30Module .cp-player-link:focus-visible .cp-card[data-rank] {
    --lift: -5px;
    border-color: var(--tier-edge);
    box-shadow:
      0 22px 38px rgba(0, 0, 0, 0.16),
      0 4px 10px rgba(0, 0, 0, 0.06),
      0 0 0 1px var(--tier-glow),
      inset 0 0 0 1px rgba(255, 255, 255, 0.85);
  }

  @media (prefers-reduced-motion: reduce) {
    #cpTop30Module .cp-card::after {
      animation: none !important;
    }
  }


  /* Narrow screens lift the bottom of the type scale: the same chip that can
     sit at 11.5px on a desktop table is being read at arm's length on a phone.
     Only the small end moves -- headings are already large enough. */
  @media (max-width: 640px) {
    #cpTop30Module {
      --fs-micro: 12px;
      --fs-xs: 12.5px;
      --fs-sm: 13.5px;
      --fs-base: 14.5px;
      --fs-md: 15.5px;
    }
  }


  /* iOS holds a tap for ~300ms waiting to see whether a double-tap-zoom is
     coming. `manipulation` releases it, which is the single cheapest
     responsiveness win on a phone. Applied to everything interactive rather
     than per-control, so a new button cannot forget it. */
  #cpTop30Module button,
  #cpTop30Module a,
  #cpTop30Module select,
  #cpTop30Module input,
  #cpTop30Module [role="button"],
  #cpTop30Module [role="tab"] { touch-action: manipulation; }

  /* Phones with a home indicator overlay the bottom of the viewport. A spacer
     rather than a padding override: every module sets its own padding under
     `.cp-is-mobile`, which is more specific than this bare id, so an override
     silently lost. This ADDS to whatever padding is already there. */
  @media (max-width: 640px) {
    #cpTop30Module::after {
      content: "";
      display: block;
      height: env(safe-area-inset-bottom, 0px);
    }
  }