/* Dashboard V2 - Horizontal Layout / 3-Column Grid */

.dashboard-v3-shell {
    /* max-width 1800 + the 16px side gutter (from the .main-content > * rule in
       layout-v2.css, with global border-box) mirror .layout-v2-topnav-inner, so
       the left/right rail edges line up with the top nav's brand / user menu. */
    /* width: 100% is load-bearing: this is a grid item (grid-column: 1 / -1) and
       `margin: 0 auto` disables justify-self:stretch, so without an explicit width
       it shrinks to content width and gets centred — the whole 3-column grid then
       narrows whenever the centre column's content is narrow (e.g. the
       "No tournaments found" empty state). Same fix as .full-width-layout below. */
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}

.dashboard-v3-grid {
    display: grid;
    /* minmax(0, %) - not a plain %  - so a rail's content (e.g. a wide dot/nav
       row) can never force the track (and so the whole shell) wider than its
       share; this is the one thing that actually keeps every rail's right/left
       edge pinned to the shell edge no matter what a page puts inside it. */
    /* Rails are capped (190-250px) instead of a flat 18% so the centre column
       gets the rest of the shell (~1300px+ on a 1920px screen vs ~1130px). */
    grid-template-columns: minmax(0, clamp(190px, 14%, 250px)) minmax(0, 1fr) minmax(0, clamp(190px, 14%, 250px));
    gap: 12px;
    min-height: calc(100vh - 100px);
}

/* Column count adapts to which rails a page fills (see _LayoutV2). */
.dashboard-v3-grid--no-left {
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(190px, 14%, 250px));
}

.dashboard-v3-grid--no-right {
    grid-template-columns: minmax(0, clamp(190px, 14%, 250px)) minmax(0, 1fr);
}

.dashboard-v3-grid--solo {
    grid-template-columns: 1fr;
}

/* Full shell-width band above the grid (@@section hero). */
.dashboard-v3-hero {
    margin-bottom: 14px;
}

.dashboard-v3-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.dashboard-v3-col-left {
    grid-template-rows: 30% 30% 40%;
}

.dashboard-v3-col-center {
    grid-template-rows: 30% 34% 30%;
}

.dashboard-v3-col-right {
    grid-template-rows: auto auto;
}

.dashboard-v3-card {
    background: var(--v3-panel-bg);
    border: 1px solid var(--v3-panel-border);
    border-radius: var(--v3-panel-radius);
    padding: 12px;
    box-shadow: var(--v3-panel-shadow);
    /* Without this, a card's content can force it (and the grid track /
       rail it sits in) wider than its share - see the note on .dashboard-v3-grid. */
    min-width: 0;
}

.dashboard-v3-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.dashboard-v3-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    min-width: 0;
}

.dashboard-v3-head h2 {
    font-family: var(--font-family-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-green);
    border-left: 3px solid var(--color-secondary);
    padding-left: 8px;
}

.dashboard-v3-head a {
    font-size: 12px;
    color: var(--color-link);
    text-decoration: none;
}

/* Same pill-with-icon treatment as the carousel cards' .sc-3d-slider__item-details
   (user request: unify the two) - hardcoded to the same gold instead of reusing
   --sc3d-gold/--sc3d-gold-line, which are custom properties scoped to .sc-3d-slider
   and wouldn't resolve out here. Qualified with the element type to out-specificity
   the plain ".dashboard-v3-head a" rule above regardless of source order. */
    .dashboard-v3-head a.dashboard-v3-view-all {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 10px;
        border-radius: var(--radius-pill);
        border: 1px solid rgba(242, 201, 76, 0.6);
        color: var(--color-link);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.3px;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

.dashboard-v3-view-all i {
    font-size: 9px;
    transition: transform 0.2s ease;
}

.dashboard-v3-head a.dashboard-v3-view-all:hover,
.dashboard-v3-head a.dashboard-v3-view-all:focus-visible {
    background: #f2c94c;
    color: #0a0f1a;
    border-color: #f2c94c;
    text-decoration: none;
}

.dashboard-v3-view-all:hover i {
    transform: translateX(2px);
}

.dashboard-v3-view-all:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.dashboard-v3-match-list,
.dashboard-v3-player-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    flex: 1;
}   

.match-row-v3,
.player-row-v3 {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
    background: var(--primary-green);;
    border: 1px solid var(--v3-tile-border);
    border-radius: var(--radius-md);
    padding: 8px;
    min-height: 56px;
}

.match-row-v3.empty {
    display: flex;
    justify-content: center;
    color: var(--text-secondary);
}

.match-date-v3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-green);
}

.match-body-v3 strong,
.player-row-v3 a {
    font-size: 12px;
    color: var(--color-text-primary);
    text-decoration: none;
}

.match-body-v3 span {
    display: block;
    font-size: 11px;
    color: var(--color-text-secondary);
}

.player-row-v3 {
    grid-template-columns: auto 30px 1fr;
}

.player-row-v3 img {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    object-fit: cover;
}

.rank-v3 {
    font-size: 11px;
    color: var(--primary-green);
    font-weight: 700;
}

.champion-widget-v3,
.tournament-section-v3,
.news-section-v3 {
    min-height: 0;
}

.v3-track.multi .v3-slide {
    flex: 0 0 calc((100% - 40px) / 5);
}

.news-section-v3 .v3-track.multi .v3-slide {
    flex: 0 0 calc((100% - 30px) / 4);
}

.champion-widget-state-v3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 160px;
    margin: auto;
    color: var(--color-text-secondary);
    font-size: 13px;
}

/* --- Recent Champion: 3D fan/arc slider (.sc-3d-slider*) -------------------- */
/* Centre-column widget. The active champion is the hero, flat and large in     */
/* front; neighbours fan out left/right AND arc upward with distance           */
/* (translateY lift), tilted in-plane toward the outside (rotateZ, the         */
/* dominant rotation - a "hand of cards" look) plus a smaller rotateY for       */
/* depth. The stage is a self-contained dark surface in both themes.           */
/* --sc3d-card-w is set inline by the script per responsive mode; --sc3d-h /    */
/* --sc3d-card-h come from the variables below (see the breakpoint further     */
/* down) - taller than a flat coverflow needs, since the arc's upward lift     */
/* needs vertical headroom or it gets hard-clipped by overflow:hidden. */
.sc-3d-slider {
    --sc3d-accent: #9eff00;
    --sc3d-gold: #f2c94c;
    --sc3d-gold-line: rgba(242, 201, 76, 0.6);
    /* Taller cards (user request, dashboard-v3-head also dropped to save space) -
       --sc3d-h grew to match so the arc's outer ring still clears the viewport's
       vertical slack at this card height (see measure()'s vertical maxVis check). */
    --sc3d-h: 310px;
    --sc3d-card-w: 230px;
    --sc3d-card-h: 250px;
}

.sc-3d-slider__stage {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 85% 42% at 50% 50%, rgba(46, 84, 150, 0.30), transparent 70%),
        radial-gradient(ellipse 60% 26% at 50% 50%, rgba(242, 201, 76, 0.06), transparent 70%),
        linear-gradient(180deg, #0c1322 0%, #070b15 100%);
}

.sc-3d-slider__viewport {
    position: relative;
    height: var(--sc3d-h);
    overflow: hidden;
    outline: none;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

/* A card running past the left / right edge fades rather than hard-cuts;
   skipped in mobile mode where the active card fills the viewport. The fan's
   vertical lift is kept inside --sc3d-h's slack instead (see measure()'s
   vertical maxVis check), so a vertical mask isn't needed on top of this. */
.sc-3d-slider:not([data-mode="mobile"]) .sc-3d-slider__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.sc-3d-slider__viewport:focus-visible {
    outline: 2px solid var(--sc3d-gold-line);
    outline-offset: -3px;
}

.sc-3d-slider.is-dragging .sc-3d-slider__viewport {
    cursor: grabbing;
}

.sc-3d-slider__track {
    position: absolute;
    inset: 0;
    /* Stronger perspective than a flat coverflow needs, for a more dramatic
       3D read on the fanned/tilted neighbours. */
    perspective: 1400px;
    perspective-origin: 50% 60%;
}

.sc-3d-slider__state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    text-align: center;
    color: #9aa6b8;
    font-size: 13px;
}

/* The card is only a positioned 3D shell; the visible surface lives on its two
   faces so the slow flip turns the whole card physically. */
.sc-3d-slider__item {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(var(--sc3d-card-w), calc(100% - 28px));
    height: var(--sc3d-card-h);
    box-sizing: border-box;
    /* transform: translate(-50%, -50%);
    transform-origin: 50% 50%; */
    perspective: 1000px;
    cursor: pointer;
    transition:
        transform 650ms cubic-bezier(0.22, 1.1, 0.36, 1),
        opacity 500ms ease,
        filter 500ms ease;
    will-change: transform, opacity;
}

.sc-3d-slider__item.is-instant {
    transition: none;
}

/* Before the script positions the deck, show only the first card. */
.sc-3d-slider:not(.is-ready) .sc-3d-slider__item:not(:first-child) {
    opacity: 0;
}

.sc-3d-slider__item-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.sc-3d-slider__item.is-flipping .sc-3d-slider__item-inner {
    animation: sc-3d-slider-flip 3600ms both;
}

/* Subtler than the sponsor flip: slower turns on Y. Over (1.4s), rest (0.8s), back (1.4s). */
@keyframes sc-3d-slider-flip {
    0% { transform: rotateY(0deg); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    38.9% { transform: rotateY(180deg); }
    61.1% { transform: rotateY(180deg); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    100% { transform: rotateY(0deg); }
}

.sc-3d-slider__item-front,
.sc-3d-slider__item-back {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    /* backface-visibility:hidden is what makes the flip show the right face
       (otherwise each one shows a mirrored copy of itself once rotated past
       90deg) - safe to leave on permanently; it's the sibling property
       transform-style:preserve-3d (removed from .sc-3d-slider__item-inner
       below) that was actually forcing the always-visible active card onto a
       blurry GPU-rasterized layer. See the "Card structure" note in
       Docs/DESIGN_SYSTEM.md before reintroducing preserve-3d here. */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: border-color 350ms ease, box-shadow 350ms ease;
}

.sc-3d-slider__item-front {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #172238 0%, #0d1526 100%);
}

.sc-3d-slider__item-back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 14px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 36%, rgba(242, 201, 76, 0.16), transparent 60%),
        linear-gradient(160deg, #1b2d24 0%, #0c1426 100%);
}

.sc-3d-slider__item-back-icon {
    font-size: 40px;
    color: var(--sc3d-gold);
    opacity: 0.85;
}

.sc-3d-slider__item-back-label {
    font-size: var(--badge-font-size);
    font-weight: 800;
    letter-spacing: var(--badge-tracking);
    text-transform: uppercase;
    color: var(--sc3d-gold);
}

.sc-3d-slider__item-back-team {
    max-width: 100%;
    font-family: var(--font-family-heading);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    overflow-wrap: break-word;
}

.sc-3d-slider__item-back-meta {
    font-size: 11px;
    color: #9aa6b8;
}

.sc-3d-slider__item:not(.sc-3d-slider__item--active):hover .sc-3d-slider__item-front {
    border-color: rgba(255, 255, 255, 0.24);
}

.sc-3d-slider__item--active {
    cursor: default;
    /* Hero card grown 50% wider than its base size (user request) - height is
       untouched (horizontal carousel, so width is the "grow" axis), capped by the
       same min() the base rule already uses so it can never overflow a narrow
       viewport. JS compensates the x[] spread arrays (+0.25 card-widths per ring)
       so this bigger card doesn't eat into the peek cards' own space. */
    width: min(calc(var(--sc3d-card-w) * 1.5), calc(100% - 28px));
}

.sc-3d-slider__item--active .sc-3d-slider__item-front,
.sc-3d-slider__item--active .sc-3d-slider__item-back {
    border-color: var(--sc3d-gold-line);
    box-shadow:
        0 24px 46px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(242, 201, 76, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Thin gold-to-green rule along the hero card's top edge. */
.sc-3d-slider__item-front::after,
.sc-3d-slider__item-back::after {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    z-index: 3;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, var(--sc3d-gold), var(--sc3d-accent));
    opacity: 0;
    transition: opacity 350ms ease;
}

.sc-3d-slider__item--active .sc-3d-slider__item-front::after,
.sc-3d-slider__item--active .sc-3d-slider__item-back::after {
    opacity: 1;
}

.sc-3d-slider__item-media {
    position: relative;
    flex: 0 0 66%;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 35%, rgba(242, 201, 76, 0.22), transparent 62%),
        linear-gradient(160deg, #1b3b2e 0%, #0f1a2e 100%);
}

.sc-3d-slider__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Darken toward the body so the badge and avatars always read. */
.sc-3d-slider__item-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 11, 21, 0.25) 0%, rgba(7, 11, 21, 0.05) 45%, rgba(13, 21, 38, 0.95) 100%);
}

.sc-3d-slider__item-watermark {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -58%);
    font-size: 58px;
    color: rgba(242, 201, 76, 0.2);
}

.sc-3d-slider__item--no-cover .sc-3d-slider__item-watermark {
    display: block;
}

.sc-3d-slider__item-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: rgba(8, 12, 22, 0.72);
    border: 1px solid rgba(242, 201, 76, 0.45);
    color: var(--color-link);
    font-size: var(--badge-font-size);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--badge-tracking);
}

.sc-3d-slider__item-avatars {
    position: absolute;
    left: 12px;
    bottom: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Larger, side-by-side (not overlapping) - team name/meta text was dropped
   from the card, so the avatars carry more of the "who" visually on their own. */
.sc-3d-slider__item-avatars img {
    width: 98px;
    height: 98px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid #0d1526;
    background: #0e1728;
}

.sc-3d-slider__item--active .sc-3d-slider__item-avatars img {
    cursor: pointer;
}

.sc-3d-slider__item-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 12px 12px;
}

.sc-3d-slider__item-title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sc-3d-slider__item-title a {
    color: inherit;
    text-decoration: none;
}

.sc-3d-slider__item-title a:hover {
    color: var(--sc3d-gold);
}

.sc-3d-slider__item-title a:focus-visible {
    outline: 2px solid var(--sc3d-gold);
    outline-offset: 1px;
}

/* Upcoming Tournament slider only (no team/avatars data, so a single compact
   location line replaces them under the title). */
.sc-3d-slider__item-subtitle {
    margin-top: auto;
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-3d-slider__item-subtitle i {
    width: 12px;
    margin-right: 6px;
    text-align: center;
}

/* One per card (Upcoming Tournament / Recent Champion) - opens the tournament's
   details page in a new tab. Pinned to the bottom of the body via its own
   auto top-margin so it sits there whether or not a subtitle precedes it. */
.sc-3d-slider__item-details {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--sc3d-gold-line);
    color: var(--color-link);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sc-3d-slider__item-details i {
    font-size: 9px;
    transition: transform 0.2s ease;
}

.sc-3d-slider__item-details:hover,
.sc-3d-slider__item-details:focus-visible {
    background: var(--sc3d-gold);
    color: #0a0f1a;
    border-color: var(--sc3d-gold);
    text-decoration: none;
}

.sc-3d-slider__item-details:hover i {
    transform: translateX(2px);
}

.sc-3d-slider__item-details:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Compact left / right buttons sit on the stage's left and right edges. */
.sc-3d-slider__nav {
    position: absolute;
    top: 50%;
    z-index: 30;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(8, 12, 22, 0.66);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    color: #e5e7eb;
    font-size: 11px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.sc-3d-slider__nav--prev {
    left: 8px;
}

.sc-3d-slider__nav--next {
    right: 8px;
}

.sc-3d-slider__nav:hover {
    color: var(--sc3d-gold);
    border-color: var(--sc3d-gold-line);
    background: rgba(30, 26, 12, 0.8);
}

.sc-3d-slider__nav:active {
    transform: scale(0.94);
}

.sc-3d-slider__nav:focus-visible {
    outline: 2px solid var(--sc3d-gold);
    outline-offset: 2px;
}

/* Dots sit on the panel below the stage, so they use theme tokens.
   flex-wrap + min-width:0 let the dots drop to extra lines instead of pushing
   the row wider than the card; overflow:hidden is a hard backstop so even a
   pathological dot count (a sport with dozens of recent champions) is clipped,
   never bled, past the card edge - this is what keeps the rail aligned with
   the shell on every page that renders this widget. */
.sc-3d-slider__dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.sc-3d-slider__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

.sc-3d-slider__dot.is-active {
    width: 22px;
    background: linear-gradient(90deg, var(--sc3d-gold), var(--sc3d-accent));
}

.sc-3d-slider__dot:focus-visible {
    outline: 2px solid var(--sc3d-gold);
    outline-offset: 2px;
}

.sc-3d-slider__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Static fallback: a single champion, no carousel. */
.sc-3d-slider.is-static .sc-3d-slider__viewport {
    height: auto;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}

.sc-3d-slider.is-static .sc-3d-slider__track {
    position: static;
    perspective: none;
    padding: 12px;
}

.sc-3d-slider.is-static .sc-3d-slider__item {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    transform: none;
    cursor: default;
}

.sc-3d-slider.is-static .sc-3d-slider__item-back {
    display: none;
}

.sc-3d-slider.is-static .sc-3d-slider__nav,
.sc-3d-slider.is-static .sc-3d-slider__dots {
    display: none;
}

/* No data / load error: a short message box instead of the full-height stage. */
.sc-3d-slider.is-empty .sc-3d-slider__viewport {
    height: 160px;
    -webkit-mask-image: none;
    mask-image: none;
}

.sc-3d-slider.is-empty .sc-3d-slider__nav,
.sc-3d-slider.is-empty .sc-3d-slider__dots {
    display: none;
}

/* Card width is already driven by the script per responsive mode (keyed off
   the stage's own rendered width, same as the sponsor coverflow) - no separate
   page-breakpoint rule needed for it. Mobile just gets a shorter band and
   smaller nav buttons, mirroring _SponsorsSection.cshtml's own 767px rule. */
@media (max-width: 767px) {
    .sc-3d-slider {
        --sc3d-h: 260px;
        --sc3d-card-h: 220px;
    }

    .sc-3d-slider__nav {
        width: 32px;
        height: 32px;
        margin-top: -16px;
    }
}

/* Reduced motion: autoplay and the tilted pose stay; the move is a short
   ease-out without the spring, and the slow flip is off (JS + here). */
@media (prefers-reduced-motion: reduce) {
    .sc-3d-slider__item {
        transition: transform 320ms ease-out, opacity 200ms ease, filter 200ms ease;
    }

    .sc-3d-slider__item.is-flipping .sc-3d-slider__item-inner {
        animation: none;
    }

    .sc-3d-slider__dot {
        transition: none;
    }
}

/* ============================================================================
   Recent Champion rail widget: vertical 3D fan/arc slider (.sc-3d-slider-v*)
   (Views/Shared/_RecentChampionRailWidget.cshtml), left rail.

   Vertical variant of the centre column's .sc-3d-slider engine above - same
   visual language (dark cinematic stage, gold/green accents, flip easter egg,
   fan tilt) with the axes inverted for a narrow, tall rail instead of a wide,
   short band: primary spread is Y (cards stack above/below the active one,
   --sc3dv-h is the fixed viewport HEIGHT since that axis doesn't auto-size);
   the small "arc lift" perpendicular to the spread is X instead of Y, and
   stays modest (the rail's width is the scarce dimension, unlike the centre
   engine's generous vertical slack); the dominant rotateZ fan tilt is
   unchanged (screen-plane rotation is orientation-agnostic), but the MINOR
   secondary depth cue is rotateX here, not rotateY (tilts a card's top/bottom
   edge toward the viewer - the correct analogue for a vertically-spreading
   stack). Card width (--sc3dv-card-w) AND height (--sc3dv-card-h) are both
   JS-set per responsive mode (unlike the centre engine, where only width
   needed JS - here width stays the scarce axis regardless of orientation).
   Written as its own self-contained block/namespace rather than sharing the
   centre engine's classes, per this codebase's established "written twice,
   not shared" convention for these carousels (see Docs/DESIGN_SYSTEM.md). */
.sc-3d-slider-v {
    --sc3dv-accent: #9eff00;
    --sc3dv-gold: #f2c94c;
    --sc3dv-gold-line: rgba(242, 201, 76, 0.6);
    /* Grown 460->500->580->760px across three tuning passes. The first two matched
       increasingly wider single-ring spacing; this one is for a structural change -
       both modes now carry a 3rd ring (offset +-2, "1 active and 4 peek cards" -
       user request) instead of maxing out at +-1, and two full rings need
       meaningfully more vertical room than one did, even with their per-ring
       distance pulled back in a little from the previous pass to compensate. */
    --sc3dv-h: 760px;
    --sc3dv-card-w: 220px;
    --sc3dv-card-h: 190px;
}

.sc-3d-slider-v__stage {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 85% 42% at 50% 50%, rgba(46, 84, 150, 0.30), transparent 70%),
        radial-gradient(ellipse 60% 26% at 50% 50%, rgba(242, 201, 76, 0.06), transparent 70%),
        linear-gradient(180deg, #0c1322 0%, #070b15 100%);
}

.sc-3d-slider-v__viewport {
    position: relative;
    height: var(--sc3dv-h);
    overflow: hidden;
    outline: none;
    touch-action: pan-x;
    -webkit-user-select: none;
    user-select: none;
}

/* A card running past the top / bottom edge fades rather than hard-cuts. Applied
   in both modes now - rail mode's viewport is tall enough (2 full rings, see
   --sc3dv-h above) that this is no longer "too little vertical range to mask". */
.sc-3d-slider-v__viewport {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* Below the tablet/mobile breakpoint the script flips the spread axis to
   horizontal (data-orient="h", see _RecentChampionRailWidget.cshtml's
   measure()) - the edge fade has to follow it, same as the centre column's
   horizontal widget's own 90deg mask. The attribute selector's extra
   specificity overrides the vertical mask above regardless of source order. */
.sc-3d-slider-v[data-orient="h"] .sc-3d-slider-v__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.sc-3d-slider-v__viewport:focus-visible {
    outline: 2px solid var(--sc3dv-gold-line);
    outline-offset: -3px;
}

.sc-3d-slider-v.is-dragging .sc-3d-slider-v__viewport {
    cursor: grabbing;
}

.sc-3d-slider-v__track {
    position: absolute;
    inset: 0;
    perspective: 1200px;
    perspective-origin: 50% 50%;
}

.sc-3d-slider-v__state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    text-align: center;
    color: #9aa6b8;
    font-size: 13px;
}

/* The card is only a positioned 3D shell; the visible surface lives on its two
   faces so the slow flip turns the whole card physically. */
.sc-3d-slider-v__item {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(var(--sc3dv-card-w), calc(100% - 20px));
    height: var(--sc3dv-card-h);
    box-sizing: border-box;
    /* transform: translate(-50%, -50%);
    transform-origin: 50% 50%; */
    perspective: 1000px;
    cursor: pointer;
    transition:
        transform 650ms cubic-bezier(0.22, 1.1, 0.36, 1),
        opacity 500ms ease,
        filter 500ms ease;
    will-change: transform, opacity;
}

.sc-3d-slider-v__item.is-instant {
    transition: none;
}

/* Before the script positions the deck, show only the first card. */
.sc-3d-slider-v:not(.is-ready) .sc-3d-slider-v__item:not(:first-child) {
    opacity: 0;
}

.sc-3d-slider-v__item-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.sc-3d-slider-v__item.is-flipping .sc-3d-slider-v__item-inner {
    animation: sc-3d-slider-v-flip 3600ms both;
}

@keyframes sc-3d-slider-v-flip {
    0% { transform: rotateY(0deg); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    38.9% { transform: rotateY(180deg); }
    61.1% { transform: rotateY(180deg); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    100% { transform: rotateY(0deg); }
}

.sc-3d-slider-v__item-front,
.sc-3d-slider-v__item-back {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    /* See the matching comment on .sc-3d-slider__item-front/-back (horizontal
       widget) - backface-visibility here is fine permanently; preserve-3d
       (removed from .sc-3d-slider-v__item-inner below) was the one actually
       causing the blur. */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: border-color 350ms ease, box-shadow 350ms ease;
}

.sc-3d-slider-v__item-front {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #172238 0%, #0d1526 100%);
}

.sc-3d-slider-v__item-back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 14px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 36%, rgba(242, 201, 76, 0.16), transparent 60%),
        linear-gradient(160deg, #1b2d24 0%, #0c1426 100%);
}

.sc-3d-slider-v__item-back-icon {
    font-size: 36px;
    color: var(--sc3dv-gold);
    opacity: 0.85;
}

.sc-3d-slider-v__item-back-label {
    font-size: var(--badge-font-size);
    font-weight: 800;
    letter-spacing: var(--badge-tracking);
    text-transform: uppercase;
    color: var(--sc3dv-gold);
}

.sc-3d-slider-v__item-back-team {
    max-width: 100%;
    font-family: var(--font-family-heading);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    overflow-wrap: break-word;
}

.sc-3d-slider-v__item-back-meta {
    font-size: 11px;
    color: #9aa6b8;
}

.sc-3d-slider-v__item:not(.sc-3d-slider-v__item--active):hover .sc-3d-slider-v__item-front {
    border-color: rgba(255, 255, 255, 0.24);
}

.sc-3d-slider-v__item--active {
    cursor: default;
    /* Hero card grown 50% taller than its base size (user request) - width is
       untouched (vertical carousel, so height is the "grow" axis). JS compensates
       the y[] spread array (+0.25 card-heights per ring) so this bigger card
       doesn't eat into the peek cards' own space. */
    height: calc(var(--sc3dv-card-h) * 1.5);
}

/* Horizontal mode (see the mask-image rule above): width becomes the "grow"
   axis instead, same ratio as the centre column's horizontal widget's own
   active-card rule (.sc-3d-slider__item--active). Height reverts to the
   per-mode constant (MODES_H's cardH) instead of the vertical 1.5x. */
.sc-3d-slider-v[data-orient="h"] .sc-3d-slider-v__item--active {
    height: var(--sc3dv-card-h);
    width: min(calc(var(--sc3dv-card-w) * 1.5), calc(100% - 20px));
}

.sc-3d-slider-v__item--active .sc-3d-slider-v__item-front,
.sc-3d-slider-v__item--active .sc-3d-slider-v__item-back {
    border-color: var(--sc3dv-gold-line);
    box-shadow:
        0 24px 46px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(242, 201, 76, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sc-3d-slider-v__item-front::after,
.sc-3d-slider-v__item-back::after {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    z-index: 3;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, var(--sc3dv-gold), var(--sc3dv-accent));
    opacity: 0;
    transition: opacity 350ms ease;
}

.sc-3d-slider-v__item--active .sc-3d-slider-v__item-front::after,
.sc-3d-slider-v__item--active .sc-3d-slider-v__item-back::after {
    opacity: 1;
}

.sc-3d-slider-v__item-media {
    position: relative;
    flex: 0 0 62%;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 35%, rgba(242, 201, 76, 0.22), transparent 62%),
        linear-gradient(160deg, #1b3b2e 0%, #0f1a2e 100%);
}

.sc-3d-slider-v__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.sc-3d-slider-v__item-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 11, 21, 0.25) 0%, rgba(7, 11, 21, 0.05) 45%, rgba(13, 21, 38, 0.95) 100%);
}

.sc-3d-slider-v__item-watermark {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -58%);
    font-size: 46px;
    color: rgba(242, 201, 76, 0.2);
}

.sc-3d-slider-v__item--no-cover .sc-3d-slider-v__item-watermark {
    display: block;
}

.sc-3d-slider-v__item-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: rgba(8, 12, 22, 0.72);
    border: 1px solid rgba(242, 201, 76, 0.45);
    color: var(--color-link);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--badge-tracking);
}

.sc-3d-slider-v__item-avatars {
    position: absolute;
    left: 10px;
    bottom: 6px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sc-3d-slider-v__item-avatars img {
    width: 74px;
    height: 74px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #0d1526;
    background: #0e1728;
}

.sc-3d-slider-v__item--active .sc-3d-slider-v__item-avatars img {
    cursor: pointer;
}

.sc-3d-slider-v__item-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px 10px 10px;
}

.sc-3d-slider-v__item-title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sc-3d-slider-v__item-title a {
    color: inherit;
    text-decoration: none;
}

.sc-3d-slider-v__item-title a:hover {
    color: var(--sc3dv-gold);
}

.sc-3d-slider-v__item-title a:focus-visible {
    outline: 2px solid var(--sc3dv-gold);
    outline-offset: 1px;
}

/* One per card (Recent Champion rail) - opens the tournament's details page
   in a new tab. margin-top: auto pins it to the body's bottom edge. */
.sc-3d-slider-v__item-details {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--sc3dv-gold-line);
    color: var(--color-link);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sc-3d-slider-v__item-details i {
    font-size: 8.5px;
    transition: transform 0.2s ease;
}

.sc-3d-slider-v__item-details:hover,
.sc-3d-slider-v__item-details:focus-visible {
    background: var(--sc3dv-gold);
    color: #0a0f1a;
    border-color: var(--sc3dv-gold);
    text-decoration: none;
}

.sc-3d-slider-v__item-details:hover i {
    transform: translateX(2px);
}

.sc-3d-slider-v__item-details:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Compact up / down buttons sit on the stage's top and bottom edges. */
.sc-3d-slider-v__nav {
    position: absolute;
    left: 50%;
    z-index: 30;
    width: 28px;
    height: 28px;
    margin-left: -14px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(8, 12, 22, 0.66);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    color: #e5e7eb;
    font-size: 10px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.sc-3d-slider-v__nav--prev {
    top: 6px;
}

.sc-3d-slider-v__nav--next {
    bottom: 6px;
}

/* Horizontal mode (see the mask-image rule above): buttons move to the
   left/right edges, vertically centred, mirroring the centre column's
   horizontal widget's own nav positioning instead of sitting top/bottom. */
.sc-3d-slider-v[data-orient="h"] .sc-3d-slider-v__nav {
    top: 50%;
    left: 8px;
    margin-left: 0;
    margin-top: -14px;
}

.sc-3d-slider-v[data-orient="h"] .sc-3d-slider-v__nav--prev {
    left: 8px;
    right: auto;
}

.sc-3d-slider-v[data-orient="h"] .sc-3d-slider-v__nav--next {
    left: auto;
    right: 8px;
    bottom: auto;
}

/* Each nav button carries both an up/down and a left/right icon (markup);
   CSS picks the one matching the current orientation off data-orient rather
   than JS swapping the icon's class - FontAwesome's JS kit
   (Scripts/Fontawesome/all.min.js) replaces every `<i class="fas fa-*">`
   with an inline <svg> on load (keeping this class list on the generated
   element), so an icon swap done after that point would be targeting an
   `<i>` that no longer exists. */
.sc-3d-slider-v__nav-icon-h {
    display: none;
}

.sc-3d-slider-v[data-orient="h"] .sc-3d-slider-v__nav-icon-v {
    display: none;
}

.sc-3d-slider-v[data-orient="h"] .sc-3d-slider-v__nav-icon-h {
    display: inline;
}

.sc-3d-slider-v__nav:hover {
    color: var(--sc3dv-gold);
    border-color: var(--sc3dv-gold-line);
    background: rgba(30, 26, 12, 0.8);
}

.sc-3d-slider-v__nav:active {
    transform: scale(0.94);
}

.sc-3d-slider-v__nav:focus-visible {
    outline: 2px solid var(--sc3dv-gold);
    outline-offset: 2px;
}

/* Dots stay a horizontal row below the stage regardless of the carousel's own
   spread axis - same rail-blowout guard as every other carousel in this file. */
.sc-3d-slider-v__dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.sc-3d-slider-v__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

.sc-3d-slider-v__dot.is-active {
    width: 18px;
    background: linear-gradient(90deg, var(--sc3dv-gold), var(--sc3dv-accent));
}

.sc-3d-slider-v__dot:focus-visible {
    outline: 2px solid var(--sc3dv-gold);
    outline-offset: 2px;
}

.sc-3d-slider-v__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Static fallback: a single champion, no carousel. */
.sc-3d-slider-v.is-static .sc-3d-slider-v__viewport {
    height: auto;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}

.sc-3d-slider-v.is-static .sc-3d-slider-v__track {
    position: static;
    perspective: none;
    padding: 12px;
}

.sc-3d-slider-v.is-static .sc-3d-slider-v__item {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    transform: none;
    cursor: default;
}

.sc-3d-slider-v.is-static .sc-3d-slider-v__item-back {
    display: none;
}

.sc-3d-slider-v.is-static .sc-3d-slider-v__nav,
.sc-3d-slider-v.is-static .sc-3d-slider-v__dots {
    display: none;
}

/* No data / load error: a short message box instead of the full-height stage. */
.sc-3d-slider-v.is-empty .sc-3d-slider-v__viewport {
    height: 160px;
    -webkit-mask-image: none;
    mask-image: none;
}

.sc-3d-slider-v.is-empty .sc-3d-slider-v__nav,
.sc-3d-slider-v.is-empty .sc-3d-slider-v__dots {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .sc-3d-slider-v__item {
        transition: transform 320ms ease-out, opacity 200ms ease, filter 200ms ease;
    }

    .sc-3d-slider-v__item.is-flipping .sc-3d-slider-v__item-inner {
        animation: none;
    }

    .sc-3d-slider-v__dot {
        transition: none;
    }
}

/* ============================================================================
   Sponsor vertical carousel: vertical 3D fan/arc slider (.sc-sponsor-3d*)
   (Views/Shared/_SponsorVerticalCarousel.cshtml), home dashboard right rail.

   Replaces the old flat .sc-sponsor-vc* scrolling ticker with the same engine/
   geometry as the left rail's Recent Champion widget (.sc-3d-slider-v*,
   _RecentChampionRailWidget.cshtml) - same --sp3d-h/--sp3d-card-w/--sp3d-card-h
   values as that widget's --sc3dv-* ones, so the two rails read as one visual
   language. Written as its own self-contained block/namespace rather than
   literally sharing the champion widget's classes, per this codebase's
   established "written twice, not shared" convention for these carousels (see
   Docs/DESIGN_SYSTEM.md) - both widgets can be on the page at once (left rail +
   right rail on DashboardV2), so they must stay independently self-contained.
   Differences from the champion engine, beyond accent color (green/gold here,
   flipped from champion's gold/green - "stronger border green for sponsors,
   gold for champions" is this codebase's established convention, see
   Docs/DESIGN_SYSTEM.md's "3D hero carousel shared patterns"):
   - Card media is a sponsor LOGO on a white/light contain-fit panel, not a
     cover-fit photo - logos must never be cropped/distorted.
   - No avatars/badge overlay (no "who" data on a sponsor the way champions
     have player avatars).
   - Body carries a name + short description instead of just a title. */
.sc-sponsor-3d {
    --sp3d-accent: #9eff00;
    --sp3d-accent-line: rgba(158, 255, 0, 0.55);
    --sp3d-gold: #f2c94c;
    --sp3d-h: 760px;
    --sp3d-card-w: 220px;
    --sp3d-card-h: 190px;
}

.sc-sponsor-3d__stage {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 85% 42% at 50% 50%, rgba(46, 84, 150, 0.30), transparent 70%),
        radial-gradient(ellipse 60% 26% at 50% 50%, rgba(158, 255, 0, 0.05), transparent 70%),
        linear-gradient(180deg, #0c1322 0%, #070b15 100%);
}

.sc-sponsor-3d__viewport {
    position: relative;
    height: var(--sp3d-h);
    overflow: hidden;
    outline: none;
    touch-action: pan-x;
    -webkit-user-select: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* Below the tablet/mobile breakpoint the script flips the spread axis to
   horizontal (data-orient="h", see _SponsorVerticalCarousel.cshtml's
   measure()) - the edge fade follows it, mirroring the champion rail
   widget's identical rule. Extra specificity from the attribute selector
   overrides the vertical mask above regardless of source order. */
.sc-sponsor-3d[data-orient="h"] .sc-sponsor-3d__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.sc-sponsor-3d__viewport:focus-visible {
    outline: 2px solid var(--sp3d-accent-line);
    outline-offset: -3px;
}

.sc-sponsor-3d.is-dragging .sc-sponsor-3d__viewport {
    cursor: grabbing;
}

.sc-sponsor-3d__track {
    position: absolute;
    inset: 0;
    perspective: 1200px;
    perspective-origin: 50% 50%;
}

.sc-sponsor-3d__state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    text-align: center;
    color: #9aa6b8;
    font-size: 13px;
}

.sc-sponsor-3d__item {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(var(--sp3d-card-w), calc(100% - 20px));
    height: var(--sp3d-card-h);
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    perspective: 1000px;
    cursor: pointer;
    transition:
        transform 650ms cubic-bezier(0.22, 1.1, 0.36, 1),
        opacity 500ms ease,
        filter 500ms ease;
    will-change: transform, opacity;
}

.sc-sponsor-3d__item.is-instant {
    transition: none;
}

.sc-sponsor-3d:not(.is-ready) .sc-sponsor-3d__item:not(:first-child) {
    opacity: 0;
}

.sc-sponsor-3d__item-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.sc-sponsor-3d__item.is-flipping .sc-sponsor-3d__item-inner {
    animation: sc-sponsor-3d-flip 3600ms both;
}

@keyframes sc-sponsor-3d-flip {
    0% { transform: rotateY(0deg); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    38.9% { transform: rotateY(180deg); }
    61.1% { transform: rotateY(180deg); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    100% { transform: rotateY(0deg); }
}

.sc-sponsor-3d__item-front,
.sc-sponsor-3d__item-back {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: border-color 350ms ease, box-shadow 350ms ease;
}

.sc-sponsor-3d__item-front {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #172238 0%, #0d1526 100%);
}

.sc-sponsor-3d__item-back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 14px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 36%, rgba(158, 255, 0, 0.14), transparent 60%),
        linear-gradient(160deg, #16301f 0%, #0c1426 100%);
}

.sc-sponsor-3d__item-back-icon {
    font-size: 36px;
    color: var(--sp3d-accent);
    opacity: 0.85;
}

.sc-sponsor-3d__item-back-label {
    font-size: var(--badge-font-size);
    font-weight: 800;
    letter-spacing: var(--badge-tracking);
    text-transform: uppercase;
    color: var(--sp3d-accent);
}

.sc-sponsor-3d__item-back-team {
    max-width: 100%;
    font-family: var(--font-family-heading);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    overflow-wrap: break-word;
}

.sc-sponsor-3d__item:not(.sc-sponsor-3d__item--active):hover .sc-sponsor-3d__item-front {
    border-color: rgba(255, 255, 255, 0.24);
}

.sc-sponsor-3d__item--active {
    cursor: default;
    /* Hero card grown 50% taller than its base size (user request) - width is
       untouched (vertical carousel, so height is the "grow" axis). JS compensates
       the y[] spread array (+0.25 card-heights per ring) so this bigger card
       doesn't eat into the peek cards' own space. */
    height: calc(var(--sp3d-card-h) * 1.5);
}

/* Horizontal mode (see the mask-image rule above): width becomes the "grow"
   axis instead, mirroring the champion rail widget's identical override. */
.sc-sponsor-3d[data-orient="h"] .sc-sponsor-3d__item--active {
    height: var(--sp3d-card-h);
    width: min(calc(var(--sp3d-card-w) * 1.5), calc(100% - 20px));
}

.sc-sponsor-3d__item--active .sc-sponsor-3d__item-front,
.sc-sponsor-3d__item--active .sc-sponsor-3d__item-back {
    border-color: var(--sp3d-accent-line);
    box-shadow:
        0 24px 46px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(158, 255, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sc-sponsor-3d__item-front::after,
.sc-sponsor-3d__item-back::after {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    z-index: 3;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, var(--sp3d-accent), var(--sp3d-gold));
    opacity: 0;
    transition: opacity 350ms ease;
}

.sc-sponsor-3d__item--active .sc-sponsor-3d__item-front::after,
.sc-sponsor-3d__item--active .sc-sponsor-3d__item-back::after {
    opacity: 1;
}

/* Logo panel: contain-fit on a light plaque so a sponsor's logo (often on a
   transparent/white background) always stays legible against the dark stage
   and is never cropped or distorted - unlike the champion widget's cover-fit
   photo, this must never crop its image. */
.sc-sponsor-3d__item-media {
    position: relative;
    flex: 0 0 52%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 14px;
    box-sizing: border-box;
    background: radial-gradient(circle at 50% 35%, #ffffff 0%, #eef2f7 100%);
}

.sc-sponsor-3d__logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.sc-sponsor-3d__item-media .sc-sponsor-3d__item-watermark {
    font-size: 34px;
    color: rgba(15, 23, 42, 0.22);
}

.sc-sponsor-3d__item-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px 10px;
}

.sc-sponsor-3d__item-title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sc-sponsor-3d__item-title a {
    color: inherit;
    text-decoration: none;
}

.sc-sponsor-3d__item-title a:hover {
    color: var(--sp3d-accent);
}

.sc-sponsor-3d__item-title a:focus-visible {
    outline: 2px solid var(--sp3d-accent);
    outline-offset: 1px;
}

.sc-sponsor-3d__item-desc {
    margin: 0;
    font-size: 10.5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Compact up / down buttons sit on the stage's top and bottom edges. */
.sc-sponsor-3d__nav {
    position: absolute;
    left: 50%;
    z-index: 30;
    width: 28px;
    height: 28px;
    margin-left: -14px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(8, 12, 22, 0.66);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    color: #e5e7eb;
    font-size: 10px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.sc-sponsor-3d__nav--prev {
    top: 6px;
}

.sc-sponsor-3d__nav--next {
    bottom: 6px;
}

/* Horizontal mode (see the mask-image rule above): buttons move to the
   left/right edges, vertically centred, mirroring the champion rail
   widget's identical override. */
.sc-sponsor-3d[data-orient="h"] .sc-sponsor-3d__nav {
    top: 50%;
    left: 8px;
    margin-left: 0;
    margin-top: -14px;
}

.sc-sponsor-3d[data-orient="h"] .sc-sponsor-3d__nav--prev {
    left: 8px;
    right: auto;
}

.sc-sponsor-3d[data-orient="h"] .sc-sponsor-3d__nav--next {
    left: auto;
    right: 8px;
    bottom: auto;
}

/* Each nav button carries both an up/down and a left/right icon - same
   FontAwesome-JS-kit workaround as the champion rail widget's identical rule. */
.sc-sponsor-3d__nav-icon-h {
    display: none;
}

.sc-sponsor-3d[data-orient="h"] .sc-sponsor-3d__nav-icon-v {
    display: none;
}

.sc-sponsor-3d[data-orient="h"] .sc-sponsor-3d__nav-icon-h {
    display: inline;
}

.sc-sponsor-3d__nav:hover {
    color: var(--sp3d-accent);
    border-color: var(--sp3d-accent-line);
    background: rgba(18, 28, 10, 0.8);
}

.sc-sponsor-3d__nav:active {
    transform: scale(0.94);
}

.sc-sponsor-3d__nav:focus-visible {
    outline: 2px solid var(--sp3d-accent);
    outline-offset: 2px;
}

.sc-sponsor-3d__dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.sc-sponsor-3d__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

.sc-sponsor-3d__dot.is-active {
    width: 18px;
    background: linear-gradient(90deg, var(--sp3d-accent), var(--sp3d-gold));
}

.sc-sponsor-3d__dot:focus-visible {
    outline: 2px solid var(--sp3d-accent);
    outline-offset: 2px;
}

.sc-sponsor-3d__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sc-sponsor-3d.is-static .sc-sponsor-3d__viewport {
    height: auto;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}

.sc-sponsor-3d.is-static .sc-sponsor-3d__track {
    position: static;
    perspective: none;
    padding: 12px;
}

.sc-sponsor-3d.is-static .sc-sponsor-3d__item {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    transform: none;
    cursor: default;
}

.sc-sponsor-3d.is-static .sc-sponsor-3d__item-back {
    display: none;
}

.sc-sponsor-3d.is-static .sc-sponsor-3d__nav,
.sc-sponsor-3d.is-static .sc-sponsor-3d__dots {
    display: none;
}

.sc-sponsor-3d.is-empty .sc-sponsor-3d__viewport {
    height: 160px;
    -webkit-mask-image: none;
    mask-image: none;
}

.sc-sponsor-3d.is-empty .sc-sponsor-3d__nav,
.sc-sponsor-3d.is-empty .sc-sponsor-3d__dots {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .sc-sponsor-3d__item {
        transition: transform 320ms ease-out, opacity 200ms ease, filter 200ms ease;
    }

    .sc-sponsor-3d__item.is-flipping .sc-sponsor-3d__item-inner {
        animation: none;
    }

    .sc-sponsor-3d__dot {
        transition: none;
    }
}

.tournament-slide-v3,
.news-slide-v3 {
    border: 1px solid var(--v3-tile-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-secondary);
}

.tournament-slide-v3 img,
.news-slide-v3 img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.tournament-slide-body-v3,
.news-slide-body-v3 {
    padding: 8px;
}

.tournament-slide-body-v3 h3,
.news-slide-body-v3 h3 {
    font-size: 12px;
    line-height: 1.35;
    margin: 0 0 4px;
    color: var(--color-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tournament-slide-body-v3 p,
.news-slide-body-v3 p {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin: 0;
}

.hero-v3 {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    flex: 1;
    min-height: 220px;
}

.hero-v3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay-v3 {
    position: absolute;
    inset: auto 0 0 0;
    padding: 10px;
    background: linear-gradient(180deg, transparent 0%, rgba(10, 15, 26, 0.95) 100%);
}

.hero-overlay-v3 h3 {
    margin: 0;
    font-size: 14px;
}

.hero-overlay-v3 p {
    margin: 2px 0 0;
    font-size: 11px;
    color: var(--color-text-secondary);
}

.sponsors-host-v3 {
    width: 100%;
}

.sponsors-host-v3 .sponsors-section {
    background: transparent;
    border-radius: 0;
}

.under-construction-v3 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    min-height: 140px;
    border: 1px dashed var(--color-border-strong);
    border-radius: 12px;
    color: var(--color-text-secondary);
}

.under-construction-v3 i {
    font-size: 20px;
    color: var(--primary-green);
}

/* Keep 1280px: the Recent Champion rail widget (matchMedia in its JS) and the
   sticky carousel mirror this exact stacking breakpoint. */
@media (max-width: 1280px) {
    .dashboard-v3-grid,
    .dashboard-v3-grid--no-left,
    .dashboard-v3-grid--no-right,
    .dashboard-v3-grid--solo {
        grid-template-columns: 1fr;
    }

    .news-section-v3 .v3-track.multi .v3-slide,
    .v3-track.multi .v3-slide {
        flex: 0 0 calc((100% - 10px) / 2);
    }

    .dashboard-v3-shell .tournaments-grid-v3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-v3-shell .news-main-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .news-section-v3 .v3-track.multi .v3-slide,
    .v3-track.multi .v3-slide {
        flex: 0 0 100%;
    }

    .dashboard-v3-shell .tournaments-grid-v3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Restored original implementations, restyled for v3 shell */

.dashboard-v3-shell .tournaments-grid-v3 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    overflow: hidden;
}

.dashboard-v3-shell .tournament-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--v3-tile-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: 190px;
    background: var(--color-surface-secondary);
}

/* Poster fills the top 2/3 of the card; the info panel keeps the bottom 1/3. */
.dashboard-v3-shell .tournament-media {
    position: relative;
    flex: 2 1 0;
    min-height: 0;
    overflow: hidden;
}

.dashboard-v3-shell .tournament-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dashboard-v3-shell .tournament-date {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--v3-tile-border);
    color: var(--color-link);
    border-radius: var(--radius-sm);
    padding: 4px 6px;
    z-index: 2;
    text-align: center;
}

/* Energy light: the date chip is a sunny-yellow "featured" cue with navy text. */
:root[data-theme="light"] .dashboard-v3-shell .tournament-date {
    background: var(--color-secondary);
    color: var(--color-text-primary);
}

.dashboard-v3-shell .date-month {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.dashboard-v3-shell .date-day {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    margin-top: 2px;
}

.dashboard-v3-shell .tournament-info {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 6px 8px;
    background: var(--primary-green);
}

.dashboard-v3-shell .tournament-title {
    font-size: 11px;
    line-height: 1.3;
    margin: 0;
    color: var(--color-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-v3-shell .tournament-location {
    margin: 0;
    font-size: 10px;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-v3-shell .tournament-details-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-link);
    text-decoration: none;
}

.dashboard-v3-shell .tournament-details-link:hover {
    text-decoration: underline;
}

.dashboard-v3-shell .latest-news-section-v3 {
    min-height: 0;
    flex: 1;
}

.dashboard-v3-shell .news-main-col {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 8px;
    min-height: 0;
    height: 100%;
}

.dashboard-v3-shell .news-list-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-v3-shell .news-list-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 8px;
    align-items: center;
    border: 1px solid var(--v3-tile-border);
    border-radius: 8px;
    background: var(--primary-green);
    padding: 6px;
    cursor: pointer;
}

.dashboard-v3-shell .news-list-item.active {
    border-color: var(--nav-accent-tint-border);
    box-shadow: inset 0 0 0 1px var(--nav-accent-tint-bg);
}

.dashboard-v3-shell .news-list-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
}

.dashboard-v3-shell .news-list-title {
    font-size: 11px;
    line-height: 1.3;
    color: var(--color-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-v3-shell .news-list-date {
    font-size: 10px;
    color: var(--color-text-secondary);
}

.dashboard-v3-shell .news-preview-col {
    border: 1px solid var(--v3-tile-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--primary-green);
}

.dashboard-v3-shell .news-preview-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: opacity 0.12s ease;
}

.dashboard-v3-shell .news-preview-body {
    padding: 8px;
}

.dashboard-v3-shell .news-preview-title {
    font-family: var(--font-family-heading);
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-text-primary);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-v3-shell .news-preview-date {
    font-size: 10px;
    color: var(--primary-green);
}