.section {
    padding: 1.5rem;
}

/* Profile summary: the left column stacks the rank and winrate boxes next to a
   single tall team box on the right. Let the two boxes share the leftover
   height so both columns end on the same line. */
@media screen and (min-width: 1024px) {
    .profile-stats-column {
        display: flex;
        flex-direction: column;
    }

    .profile-stats-column > .box {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Season picker: pinned to the box's top-right corner. On narrow screens it
   takes its own row instead, so long player names don't run under it. */
.season-picker {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

@media screen and (max-width: 768px) {
    .season-picker {
        position: static;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 0.5rem;
    }
}

/* The winrate tags are taller than the plain numbers beside them, which pushed
   that column out of line with the other two. Give every value the tag's
   height and centre it: the headings land on one row and the numbers sit level
   with the tags. Top-aligned items keep the headings in line if the tags ever
   wrap on a very narrow screen. */
.winrate-summary .level {
    align-items: flex-start;
}

.winrate-summary .level-item .title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    min-height: 2.5rem;
}

.winrate-summary .level-item .tag {
    font-size: clamp(0.8rem, 3.5vw, 1rem);
}

/* The team box is stretched to match the stats column beside it, so hand the
   leftover height to the axie row and centre the team inside it rather than
   leaving a gap under the axies. */
.latest-team-box {
    display: flex;
    flex-direction: column;
}

.latest-team-row {
    flex: 1 0 auto;
    align-items: center;
}

/* The player name gets whatever room is left beside the avatar, so let it scale
   down on narrow screens instead of wrapping into a wall of text. It keeps its
   full size from tablet width up. */
.player-name {
    font-size: clamp(1.25rem, 5.5vw, 2rem);
}

#battle-container {
    text-align: center;
}

.charms-item:last-child {
    margin-right: 0;
}

.avatar-container {
    position: relative;
    width: 128px;
    height: 128px;
}

.avatar-image, .border-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    object-fit: cover;
}

.avatar-image {
    transform: translate(-50%, -50%) scale(0.65);
    z-index: 1;
}

.border-image {
    z-index: 2;
    transform: translate(-50%, -50%) scale(1);
}

.last-updated {
    font-size: 0.75rem;
    margin: -10px 0 -10px 0;
}

.profile-link-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.center {
    text-align: center;
}

.vstar-delta-container {
    display: inline-block;
    position: relative;
}

.vstar-delta {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.replay-link {
    align-self: center;
    color: #3498db;
}

.replay-link:visited {
    color: #70288d;
}

.analytics-team-row {
    background-color: var(--bulma-background-analytics-team);
    margin-top: calc(1.5rem - 1rem);
}

.battle-team {
    margin-left: -10px;
    margin-right: -10px;
}
.battle {
    padding-bottom: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
    background-color: var(--bulma-background-analytics-battle);
    border: solid var(--bulma-border-analytics-battle);
}
.team-analytics-container {
    text-align: center;
}
#section-content-container {
    margin-top: 20px;
}

.need-premium {
    margin: 20px;
}

.left-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.team-analytics-container .right-column {
    display: flex;
    flex-direction: row;
    overflow: overlay;
    margin-top: 20px;
}

.tag.name-tag {
    cursor: pointer;
    border-radius: 0;
}

.total-tag {
    width: clamp(2.2rem, 4vw, 3rem);
}

.winrate-tag {
    cursor: pointer;
    width: clamp(2.2rem, 4vw, 3rem);
}

.tag.name-tag:hover,
.tag.name-tag.active {
    box-shadow: inset 0 0 0 2px;
    box-sizing: border-box;
}
.winrate-tag:hover{
    border: solid;
}
.winrate-vs .tags {
    flex-direction: column;
}
.winrate-vs .tags .tag {
    font-size: clamp(0.75rem, 2vw, 1rem);
}

.winrate-vs {
    display: flex;
    flex-direction: column;
    width: fit-content;
}
#load-more {
    margin: 20px;
}

.section-buttons {
    justify-content: center;
    margin-bottom: 10px;
}

.filter-buttons-container {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

.filter-buttons-container .button {
    font-size: clamp(0.57rem, 2vw, 0.75rem) !important;
}

.buttons.static-button {
    margin-bottom: 5px;
    justify-content: end;
}

.column.padding-left {
    padding-left: 0.15rem;
    padding-right: 0;
}
.column.static-buttons {
    flex: none;
    width: fit-content;
    padding-right: 0.15rem;
    padding-left: 0;
}

.buttons.game-mode-buttons,
.buttons.era-buttons,
.buttons.result-fight-buttons {
    margin-bottom: 5px;
    gap: 7px;
}

/*AXIE BATTLE CONTAINER*/

.axie-battle-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 auto;
}

.axie-analytics-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: calc(clamp(100px, 12vw, 280px));
    transform: translate(-20%);
}

.axie-battle-image {
    transform: scale(1.2) translate(-5%, -3%);
}

.dropdown-item.morph-finder-link {
    color: hsl(260, 91%, 62%);
    font-weight: 600;
}

.dropdown-item.morph-finder-link:hover {
    background-color: hsl(260, 91%, 62%, 0.12);
    color: hsl(260, 91%, 55%);
}

.rune-battle-image {
    width: clamp(12px, 5vw, 34px);
    height: clamp(12px, 5vw, 34px);
}

.rune-battle-image {
    object-fit: contain;
    position: relative;
}

.axie-info {
    position: relative;
    display: flex;
    flex-direction: row;
    top: 10px;
}

.axie-info.reverse {
    flex-direction: row-reverse;
}


.flip-horizontal {
      transform: scaleX(-1) scale(1.2) translate(-5%, -3%);
}

.battle-mid-column {
    align-self: center;
    display: flex;
    flex-direction: row;
    font-size: clamp(1rem, 2vw, 1.2rem);
}

.battle-mid-column .block {
    margin-bottom: 0;
}

/*=====*/

/* CHARMS BATTLE*/

@media (min-width: 769px) {

    .battle-mid-column {
        flex-direction: column;
    }

    .battle-mid-column .block {
        margin-bottom: 2rem;
    }

    .battle-team {
        margin-left: 0;
        margin-right: 0;
    }
    .rune-battle-image {
        width: clamp(12px, 2.5vw, 34px);
        height: clamp(12px, 2.5vw, 34px);
    }
    .hexagon-border {
        --hex-width: clamp(12px, 2.5vw, 34px);
        width: var(--hex-width);
        height: var(--hex-width);
    }
    .hexagon-text {
        font-size: clamp(6px, 1.5vw, 16px);
    }
    .axie-info {
        top: 10px;
    }

    .part-battle-image {
        display: block;
        object-fit: contain;
        width: clamp(12px, 1.65vw, 23px);
        height: clamp(12px, 1.65vw, 23px);
    }

    .charm-battle-image {
        object-fit: contain;
        width: clamp(14px, 1.65vw, 23px);
        height: clamp(14px, 1.65vw, 23px);
    }
}

@media screen and (max-width: 768px) {

    #battle-container {
        margin-left: -1.25rem;
        margin-right: -1.25rem;
    }

    .axie-analytics-container {
        align-items: center;
        display: flex;
        flex-direction: column;
        width: calc(clamp(100px, 30vw, 280px));
    }

    .box {
        margin-left: -1rem;
        margin-right: -1rem;
    }

}





.charms-battle-container {
    position: relative;
    z-index: 4;
    display: flex;
}

.charms-battle-container.left {
    left: 2%;
}
.charms-battle-container.right {
    right: 5%;
}

.part-battle-image {
    display: block;
    object-fit: contain;
    width: clamp(12px, 3vw, 23px);
    height: clamp(12px, 3vw, 23px);
}

.charm-battle-image {
    object-fit: contain;
    width: clamp(14px, 3vw, 23px);
    height: clamp(14px, 3vw, 23px);
}

.charms-battle-item {
    position: relative;
    flex: 1;
}

.charms-battle-item:last-child {
    margin-right: 0;
}


/* ============================================================================
   Team Analytics — slot grid (turn-order matchups) + loadout timeline (A/B)
   Replaces the old .winrate-vs / .name-tag / .winrate-tag stacked-tag layout.
   ========================================================================== */

.ta-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 8px 0 20px;
}

.ta-toolbar-hint {
    font-size: 0.8rem;
    color: var(--bulma-text-weak, #888);
    flex: 1 1 260px;
    min-width: 220px;
    text-align: left;
}

/* Victory-star cutoff: hides games played below a rating, where wins come cheap. */
.ta-vstar-filter {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.ta-vstar-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--bulma-text-weak, #888);
    white-space: nowrap;
}

.ta-vstar-input {
    width: 5.5em;
}

.ta-vstar-ic {
    width: 13px;
    height: 13px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Slot card ─────────────────────────────────────────────────────────── */
.ta-slot {
    background: var(--bulma-background-analytics-team, var(--bulma-scheme-main-bis, #f7f7f8));
    border: 1px solid var(--bulma-border, #e6e6e6);
    border-radius: 12px;
    padding: 16px;
    margin: 0 0 22px;
    text-align: left;
}

/* Body: matchup grid (main) beside the loadout timeline (sidebar) on wide
   screens; stacked on small ones. Keeps the right half of big monitors useful
   instead of leaving the grid + timeline stranded on the left. */
/* Rows stack vertically; each ".ta-row" lays its cells out per the chosen layout. */
.ta-slot-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 2px;
}

/* Row holds two swappable views (single version / comparison); each lays its
   fighters beside the matchup grid, stacked on narrow screens. The grid keeps
   its standardized fixed-width cells rather than stretching to fill. */
.ta-row-fg { min-width: 0; }

.ta-fg-lay {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ta-view-single.is-hidden,
.ta-view-compare.is-hidden {
    display: none;
}

/* Side-by-side only when the standardized grid + fighters both fit without the
   grid scrolling; below that they stack so the whole grid stays visible. */
@media screen and (min-width: 1450px) {
    .ta-fg-lay {
        flex-direction: row;
        align-items: flex-start;
        gap: 22px;
    }
    .ta-fg-lay .ta-fighters-region { flex: 0 0 auto; }
    .ta-fg-lay .ta-grid-region { flex: 0 1 auto; min-width: 0; }
}

/* Stacked mode (below the side-by-side breakpoint): the grid region must fill the
   row and let its own wrapper scroll, otherwise the fixed-width matchup table pushes
   the page wider than the viewport (the compare layout aligns items to flex-start). */
@media screen and (max-width: 1449px) {
    .ta-grid-region { align-self: stretch; max-width: 100%; min-width: 0; }
}

/* Slot header: team name + stats on the left, the active version's fighters
   on the right. Version panels swap both fighters and grid in place. */
.ta-slot-top {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px 56px;
    margin-bottom: 12px;
}

.ta-panel.is-hidden {
    display: none;
}

.ta-slot-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
    padding-top: 6px;
}

.ta-team-name {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.1;
    color: var(--bulma-text-strong, #1d2129);
    margin: 0;
    overflow-wrap: anywhere;
}

.ta-viewing {
    font-size: 0.72rem;
    color: var(--bulma-text-weak, #98a0ab);
    font-variant-numeric: tabular-nums;
}

.ta-fighters {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
}

/* Definite per-fighter size (the region sizes to its content now). The clamp is the
   sole size lever at every breakpoint: the min keeps 360px legible (3 fighters still
   fit the row), the steeper vw grows the axie through the mid range, and the higher
   max means wide screens (~1850px+) render the axie noticeably larger instead of
   freezing at a small cap. Badges + charms below scale off the same growth. */
.ta-fighter {
    width: clamp(108px, 13vw, 236px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.ta-fighter-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 5;
    /* The axie art PNGs carry transparent headroom — tuck the badges over it
       (percentage scales the tuck with the now-larger art). */
    margin-bottom: -14%;
}

/* Constrain the axie art — elsewhere it renders at natural (huge) size. */
.ta-fighter .axie-image-container {
    width: 100%;
}

.ta-fighter .axie-battle-image {
    width: 100%;
    height: auto;
    transform: scaleX(-1.15) scaleY(1.15);
}

.ta-fighter .charms-battle-container {
    position: static;
    width: 100%;
    justify-content: center;
    margin-top: 2px;
}

/* Charm/part icons scale with the enlarged axie so the 6-icon strip keeps spanning
   the art rather than shrinking into a tiny cluster beneath it. */
.ta-fighter .part-battle-image,
.ta-fighter .charm-battle-image {
    width: clamp(13px, 1.7vw, 24px);
    height: clamp(13px, 1.7vw, 24px);
}

/* Charm sockets (Team Analytics fighters only — battle views keep the stock strip).
   Each slot is a small tile: the charm is the hero, the body-part icon shrinks to a
   corner badge that says which slot it is; an empty socket is a dashed placeholder
   with the part icon ghosted inside. */
.ta-fighter .charms-battle-container .columns {
    display: flex;
    justify-content: center;
    gap: clamp(2px, 0.4vw, 6px);
    margin: 0;
}

/* Tile pad + badge scale with the same vw the icons use, so six sockets still
   fit the 108px fighter card at 360px. The compare view's charm grid
   (.ta-cl-charms) wears the same sockets. */
.ta-fighter .ta-cl-charms .charms-battle-item,
.ta-fighter .charms-battle-container .charms-battle-item {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(clamp(13px, 1.7vw, 24px) + clamp(3px, 0.65vw, 10px));
    height: calc(clamp(13px, 1.7vw, 24px) + clamp(3px, 0.65vw, 10px));
    border-radius: clamp(5px, 0.5vw, 8px);
    background: var(--bulma-scheme-main-ter, #eef0f3);
    border: 1px solid var(--bulma-border, #e3e6ea);
    margin: 0;
}

.ta-fighter .ta-cl-charms .charms-battle-item .part-battle-image,
.ta-fighter .charms-battle-container .part-battle-image {
    position: absolute;
    top: calc(clamp(9px, 1.15vw, 16px) * -0.3);
    left: calc(clamp(9px, 1.15vw, 16px) * -0.3);
    z-index: 1;
    width: clamp(9px, 1.15vw, 16px);
    height: clamp(9px, 1.15vw, 16px);
    padding: 1.5px;
    border-radius: 50%;
    background: var(--bulma-scheme-main, #fff);
    border: 1px solid var(--bulma-border, #dfe3e8);
}

.ta-fighter .ta-cl-charms .charms-battle-item.is-empty,
.ta-fighter .charms-battle-container .charms-battle-item.is-empty {
    background: transparent;
    border-style: dashed;
}

.ta-fighter .ta-cl-charms .charms-battle-item.is-empty .part-battle-image,
.ta-fighter .charms-battle-container .charms-battle-item.is-empty .part-battle-image {
    position: static;
    padding: 0;
    background: none;
    border: 0;
    width: clamp(10px, 1.4vw, 19px);
    height: clamp(10px, 1.4vw, 19px);
    opacity: 0.3;
}

.theme-dark .ta-fighter .ta-cl-charms .charms-battle-item,
.theme-dark .ta-fighter .charms-battle-container .charms-battle-item {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.theme-dark .ta-fighter .ta-cl-charms .charms-battle-item .part-battle-image,
.theme-dark .ta-fighter .charms-battle-container .part-battle-image {
    background: var(--bulma-scheme-main, #21252b);
    border-color: rgba(255, 255, 255, 0.16);
}

/* The rune tracks the axie but stays clearly subordinate to the art
   (owner-tuned 2026-07-23). Shared by the single AND compare fighters. */
.ta-fighter .rune-battle-image {
    width: clamp(18px, 2.1vw, 34px);
    height: clamp(18px, 2.1vw, 34px);
}

/* The axie art with its overlays: class icon top-left, level pill right-middle. */
.ta-art {
    position: relative;
    width: 100%;
}

.ta-class-ic {
    position: absolute;
    top: 14%;
    left: 3%;
    z-index: 5;
    width: clamp(16px, 1.9vw, 30px);
    height: clamp(16px, 1.9vw, 30px);
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* Compare view: the class icon sits in a wrapper so a class change can trail a
   faded ghost of the old class BELOW it — the charm trail's vertical language. */
.ta-class-wrap {
    position: absolute;
    top: 14%;
    left: 3%;
    z-index: 5;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.ta-class-wrap .ta-class-ic {
    position: static;
}

.ta-class-ghost {
    width: clamp(12px, 1.4vw, 22px);
    height: clamp(12px, 1.4vw, 22px);
}

/* Compare view: the axie kept its build but moved to another battlefield cell. */
.ta-pos {
    position: absolute;
    left: 50%;
    bottom: 4%;
    transform: translateX(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(18, 21, 26, 0.78);
    border: 1.5px solid var(--ta-swap);
    color: #fff;
    font-weight: 700;
    font-size: clamp(8px, 0.85vw, 11px);
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: help;
}

.ta-lvl {
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(18px, 2vw, 30px);
    height: clamp(18px, 2vw, 30px);
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(18, 21, 26, 0.78);
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-weight: 800;
    font-size: clamp(9px, 1vw, 14px);
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.ta-slot-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ta-meta-chip {
    display: inline-block;
    width: fit-content;
    padding: 2px 10px;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.ta-slot-stats {
    font-size: 0.85rem;
    color: var(--bulma-text-weak, #777);
}

.ta-slot-stats strong {
    color: var(--bulma-text-strong, #222);
}

.ta-dot {
    opacity: 0.5;
    margin: 0 2px;
}

/* ── The grid ──────────────────────────────────────────────────────────────
   A compact, content-width grid of rounded tiles (never stretched full-width).
   Hierarchy by design: WIN is the hero (bold, saturated hue), the turn split
   refines it, LOSE and GAMES stay quiet text so the grid reads as data, not a
   heat-band. Values are flex-centered so alignment can't be knocked off by
   inherited/UA text-align. */
.ta-grid-wrap {
    overflow-x: auto;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--bulma-border, #e6e6e6);
    border-radius: 10px;
    background: var(--bulma-scheme-main-bis, #fafafa);
    /* No left padding: the sticky row-label gutter pins at the content edge, so
       any left padding becomes a see-through strip that scrolled cells slide
       under. Flush = nothing leaks. */
    padding: 3px 3px 3px 0;
    /* Snap to whole columns so the grid never rests on a half-cut column peeking
       out from behind the sticky gutter. */
    scroll-snap-type: x mandatory;
}

/* Formal ledger table: flush columns, hairline row rules, uniform 30px cells.
   Result rows carry a single-hue wash whose strength follows the cell's own
   percentage (--w): green for wins, red for losses, sky for draws. */
.ta-grid {
    --ta-line: rgba(0, 0, 0, 0.09);
    --ta-win-wash: #2f9d68;
    --ta-lose-wash: #d24b5c;
    --ta-draw-wash: hsl(198, 100%, 78%);
    border-collapse: separate;
    border-spacing: 0;
    /* max-content pins the table at its full cell-sum width so a narrow screen
       scrolls .ta-grid-wrap instead of squeezing the cells. */
    width: max-content;
    table-layout: fixed;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* One fixed cell size at every breakpoint (the wrap scrolls instead). */
.ta-grid th,
.ta-grid td {
    box-sizing: border-box;
    width: 70px;
    height: 30px;
    padding: 0;
    border: 0;
}

.ta-grid td.ta-cell {
    background: transparent;
    overflow: hidden;
    transition: box-shadow 0.1s ease;
}

/* Hairline between rows (spans the label gutter too). */
.ta-grid tbody tr + tr .ta-cell,
.ta-grid tbody tr + tr .ta-row-label {
    box-shadow: inset 0 1px 0 var(--ta-line);
}

/* Every value sits in a flex box → dead-centered regardless of text-align. */
.ta-val {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Row-label gutter (sticky). Right-aligned, quiet. */
.ta-grid .ta-row-label {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 52px;
    border-right: 1px solid var(--ta-line);
    background: var(--bulma-scheme-main-bis, #fafafa);
    color: var(--bulma-text-weak, #8a8f98);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: right;
    padding-right: 7px;
    vertical-align: middle;
    line-height: 1.05;
}

.ta-grid .ta-corner {
    z-index: 3;
    vertical-align: bottom;
    padding-bottom: 5px;
}

.ta-corner-vs {
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.6;
}

.ta-turn-nums {
    display: block;
    font-size: 0.92em;
    color: var(--bulma-text-weak, #a2a7b0);
}

/* Column caps — neutral text with a thin archetype-colour underline.
   Click = all battles vs that meta. */
.ta-grid thead th.ta-col-head {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 34px;
    background: transparent;
    color: var(--bulma-text-strong, #23272e);
    font-weight: 600;
    font-size: 0.68rem;
    padding: 2px 5px 8px;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 -1px 0 var(--ta-line);
}

.ta-grid thead th.ta-col-head {
    scroll-snap-align: start;
    scroll-margin-left: 52px; /* the sticky gutter's width */
}

.ta-grid thead th.ta-col-head::after {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: 4px;
    height: 3px;
    border-radius: 2px;
    background: var(--col, #888);
}

.ta-col-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.05;
    text-align: center;
}

/* WIN — bold ink over a green wash that deepens with the win%. Click = the wins. */
.ta-grid td.ta-win {
    background: color-mix(in srgb, var(--ta-win-wash) calc(4% + var(--w, 0) * 0.34%), transparent);
    cursor: pointer;
}

.ta-grid td.ta-win .ta-val {
    color: var(--bulma-text-strong, #23272e);
    font-weight: 700;
}

/* TURN — win% by move order, split by a hairline; the halves take a lighter
   dose of the same green wash. */
.ta-grid td.ta-dual .ta-dual-inner {
    display: flex;
    height: 100%;
}

.ta-half {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--bulma-text, #4a4f57);
}

.ta-half .ta-cdelta { font-size: 8.5px; }

.ta-half[data-turn] {
    background: color-mix(in srgb, var(--ta-win-wash) calc(3% + var(--w, 0) * 0.24%), transparent);
}

.ta-half-1 {
    box-shadow: inset -1px 0 0 var(--ta-line);
}

.ta-half.ta-empty {
    color: var(--bulma-grey-light, #b5bac2);
    font-weight: 400;
}

/* LOSE / DRAW — percent-only cells over their own wash (red / sky), scaled by
   the cell's --w like the win row. Zeroes render as an inert, wash-free dash.
   GAMES — neutral count + share footer; clicking loads every battle vs the meta. */
.ta-grid td.ta-sub {
    cursor: pointer;
}

.ta-grid td.ta-lose {
    background: color-mix(in srgb, var(--ta-lose-wash) calc(4% + var(--w, 0) * 0.34%), transparent);
}

.ta-grid td.ta-draw {
    background: color-mix(in srgb, var(--ta-draw-wash) calc(4% + var(--w, 0) * 0.34%), transparent);
}

.ta-grid td.ta-sub .ta-val {
    gap: 5px;
}

.ta-sub-pct {
    font-size: 11px;
    font-weight: 600;
    color: var(--bulma-text, #4a4f57);
}

.ta-sub-n {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--bulma-text-weak, #9aa0a8);
    opacity: 0.85;
}

.ta-grid td.ta-inert {
    cursor: default;
    background: transparent;
}

.ta-none {
    color: var(--bulma-text-weak, #b5bac2);
    opacity: 0.4;
    font-weight: 400;
}

.ta-grid .ta-low {
    opacity: 0.4;
}

/* Hover rings: whole-cell targets ring the cell; turn halves ring themselves. */
.ta-grid td.ta-win:hover,
.ta-grid td.ta-sub:not(.ta-inert):hover {
    box-shadow: inset 0 0 0 2px var(--bulma-link, #485fc7);
}

.ta-half[data-turn] {
    cursor: pointer;
}

.ta-half[data-turn]:hover {
    box-shadow: inset 0 0 0 2px var(--bulma-link, #485fc7);
}

/* Selected column: the cap rings, the strip's sides carry the ring down. */
.ta-grid th.ta-col-head.ta-col-active {
    box-shadow: inset 0 0 0 2px var(--bulma-link, #485fc7);
}

.ta-grid td.ta-cell.ta-col-active {
    box-shadow: inset 2px 0 0 var(--bulma-link, #485fc7), inset -2px 0 0 var(--bulma-link, #485fc7);
}

.ta-grid tbody tr:last-child td.ta-cell.ta-col-active {
    box-shadow: inset 2px 0 0 var(--bulma-link, #485fc7), inset -2px 0 0 var(--bulma-link, #485fc7),
        inset 0 -2px 0 var(--bulma-link, #485fc7);
}

/* The exact slice being shown below (win tile, lose/draw cell, or a turn half). */
.ta-grid td.ta-win.ta-res-active,
.ta-grid td.ta-sub.ta-res-active,
.ta-half.ta-res-active {
    box-shadow: inset 0 0 0 2px var(--bulma-link, #485fc7);
}

.theme-dark .ta-grid {
    --ta-line: rgba(255, 255, 255, 0.09);
    --ta-win-wash: #58c28a;
    --ta-lose-wash: #e2798a;
}

/* Inside the A/B compare the grid is display-only — no drill-down affordances. */
.ta-view-compare .ta-grid th.ta-col-head,
.ta-view-compare .ta-grid td.ta-win,
.ta-view-compare .ta-grid td.ta-dual,
.ta-view-compare .ta-grid td.ta-sub,
.ta-view-compare .ta-half[data-turn] {
    cursor: default;
}

.ta-view-compare .ta-grid td.ta-win:hover,
.ta-view-compare .ta-grid td.ta-sub:hover,
.ta-view-compare .ta-half[data-turn]:hover {
    box-shadow: inset 0 1px 0 var(--ta-line);
}

.ta-view-compare .ta-half[data-turn]:hover {
    box-shadow: none;
}

/* ── Loadout timeline (A/B) ────────────────────────────────────────────── */
/* ── Loadout timeline (A/B) — a tap-to-view version stack ──────────────── */
/* Full-width row under the grid: a separating rule + a wrapping card grid. */
.ta-versions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px dashed var(--bulma-border, #ddd);
}

.ta-versions-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
}

.ta-versions-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bulma-text-strong, #222);
    margin: 0;
}

.ta-versions-sub {
    font-size: 0.7rem;
    color: var(--bulma-text-weak, #999);
}

/* Cards flow across the full width, wrapping to as many columns as fit. */
/* Cards keep a bounded width (max ~290px) and their natural height — no
   stretching to fill wide screens or to match a taller neighbour. */
.ta-rail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(218px, 290px));
    align-items: start;
    gap: 8px;
}

/* Version card = head row, then two labelled stat cells (Win | Stars), then the
   change chips. Stars read from -> to with the earned delta pilled beside them. */
.ta-vcard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--bulma-border, #e2e2e2);
    border-radius: 10px;
    background: var(--bulma-scheme-main, #fff);
    padding: 9px 11px;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.ta-vcard:hover {
    border-color: var(--bulma-link, #485fc7);
}

.ta-vcard.is-active {
    border-color: var(--bulma-link, #485fc7);
    box-shadow: 0 0 0 1px var(--bulma-link, #485fc7);
    background: color-mix(in srgb, var(--bulma-link, #485fc7) 7%, var(--bulma-scheme-main, #fff));
}

/* A part that evolved (same part, higher stage). */
.ta-part-up {
    color: var(--ta-add);
    font-weight: 800;
    white-space: nowrap;
}

/* A loadout the player came back to: its stints are merged into one version. */
.ta-vruns {
    color: var(--ta-swap);
    font-weight: 700;
    cursor: help;
}

/* Season card fronts the stack: dashed until selected. */
.ta-vcard-season { border-style: dashed; }
.ta-vcard-season.is-active { border-style: solid; }

.ta-vcells {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 10px;
}

.ta-vcell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ta-vcell + .ta-vcell {
    border-left: 1px solid color-mix(in srgb, var(--bulma-border, #dfe3e8) 65%, transparent);
    padding-left: 10px;
}

.ta-vcell-lab {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--bulma-text-weak, #98a1ae);
}

.ta-vcell-lab .ta-vstar-ic { width: 11px; height: 11px; }

.ta-vcell-val {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ta-vwin-pct {
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    color: var(--bulma-text-strong, #23272e);
    font-variant-numeric: tabular-nums;
}

.ta-vwin-unit {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bulma-text-weak, #98a1ae);
}

/* Victory stars: the run's start (muted) -> finish (bold), earned delta pilled.
   On merged stints the delta is the sum of this loadout's own battles, so it can
   differ from finish-minus-start — both are shown deliberately. */
.ta-vstars {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.ta-vstars-range {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

.ta-vs-from {
    color: var(--bulma-text-weak, #98a1ae);
    font-weight: 600;
    font-size: 0.72rem;
}

.ta-vs-arr { color: var(--bulma-text-weak, #b0b6bf); font-size: 0.66rem; }

.ta-vs-to {
    color: var(--bulma-text-strong, #23272e);
    font-weight: 800;
    font-size: 0.8rem;
}

.ta-vdelta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

.ta-vdelta.up   { color: var(--bulma-success-dark, #1f7a4d); background: color-mix(in srgb, var(--bulma-success, #33a06f) 16%, transparent); }
.ta-vdelta.down { color: var(--bulma-danger-dark, #b5384a);  background: color-mix(in srgb, var(--bulma-danger, #d24b5c) 16%, transparent); }
.ta-vdelta.flat { color: var(--bulma-text-weak, #999);       background: var(--bulma-scheme-main-ter, #eee); }

.theme-dark .ta-vdelta.up   { color: #6ee7a8; }
.theme-dark .ta-vdelta.down { color: #f79bab; }

.ta-cmp-delta.flat { color: var(--bulma-text-weak, #999); }

.ta-vcard-head {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

/* The team's in-game name at the time of that version (players rename teams). */
.ta-vname {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--bulma-text, #555c66);
}

.ta-vcard-head .ta-vdate { flex: none; }

/* In-game team name above the fighters. */
.ta-team-name {
    width: 100%;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--bulma-text-strong, #23272e);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-vlabel {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--bulma-text-strong, #222);
}

.ta-vdate {
    font-size: 0.66rem;
    color: var(--bulma-text-weak, #999);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ta-vchanges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.ta-vchanges-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--bulma-text-weak, #a0a6b0);
    font-weight: 700;
}

.ta-chip {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    background: var(--bulma-scheme-main-ter, #eee);
    color: var(--bulma-text, #444);
    border: 1px solid transparent;
}

.ta-chip-rune  { background: color-mix(in srgb, #4f6bed 18%, transparent); color: #3550c8; border-color: color-mix(in srgb, #4f6bed 30%, transparent); }
.ta-chip-charm { background: color-mix(in srgb, #9b59d0 18%, transparent); color: #7e3fb8; border-color: color-mix(in srgb, #9b59d0 30%, transparent); }
.ta-chip-parts { background: color-mix(in srgb, #e08a3c 20%, transparent); color: #c26a1c; border-color: color-mix(in srgb, #e08a3c 32%, transparent); }
.ta-chip-class { background: color-mix(in srgb, #3f9e93 18%, transparent); color: #2b7c72; border-color: color-mix(in srgb, #3f9e93 30%, transparent); }
.ta-chip-position { background: color-mix(in srgb, #63758d 18%, transparent); color: #4d5d73; border-color: color-mix(in srgb, #63758d 30%, transparent); }
.ta-chip-base,
.ta-chip-more  { background: var(--bulma-scheme-main-ter, #eee); color: var(--bulma-text-weak, #777); }

.theme-dark .ta-chip-rune  { color: #9db0ff; }
.theme-dark .ta-chip-charm { color: #cba6ef; }
.theme-dark .ta-chip-parts { color: #f0b579; }
.theme-dark .ta-chip-class { color: #7fd0c5; }
.theme-dark .ta-chip-position { color: #a7b6ca; }

/* Full-width row: compare picker + the comparison it renders. */
.ta-compare-block {
    padding-top: 14px;
    border-top: 1px dashed var(--bulma-border, #ddd);
}

.ta-compare-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed var(--bulma-border, #ddd);
}

.ta-compare-controls .select select {
    font-size: 0.78rem;
}

/* ── In-place A/B comparison (lives inside .ta-row-fg) ─────────────────── */
.ta-cmp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--bulma-scheme-main-bis, #f6f7f9);
    border: 1px solid var(--bulma-border, #e2e2e2);
    border-radius: 9px;
}

.ta-cmp-title {
    font-size: 0.9rem;
    color: var(--bulma-text, #444);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.ta-cmp-title b {
    color: var(--bulma-text-strong, #1d2129);
    font-weight: 800;
}

.ta-cmp-w {
    color: var(--bulma-text-weak, #8a8f98);
    font-variant-numeric: tabular-nums;
}

.ta-cmp-to {
    color: var(--bulma-text-weak, #b0b6bf);
}

.ta-cmp-bar .ta-vdelta {
    margin-left: 4px;
}

/* Quiet ghost pill, same language as the "Δ vs global" toggle. */
.ta-cmp-exit {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid var(--bulma-border, #dfe3e8);
    background: transparent;
    color: var(--bulma-text-weak, #6b727c);
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s;
}

.ta-cmp-exit:hover {
    border-color: var(--bulma-link, #485fc7);
    color: var(--bulma-text-strong, #23272e);
}

.ta-cmp-lay {
    align-items: flex-start;
}

/* The fighter that changed gets a soft glow in the compare fighters view. */
.ta-fighter.is-changed .axie-battle-image {
    filter: drop-shadow(0 0 6px var(--bulma-link, #485fc7));
}

/* ── change semantics (added / removed / swapped) ────────────────────────────── */
:root {
    --ta-add: #1f9d57;
    --ta-rem: #d24b5c;
    --ta-swap: #4f6bed;
}

/* ════ A/B compare — per-axie change log ════ */
/* Top-aligned: fighters differ in height below the art (trails, part diffs), so
   aligning tops keeps the axies themselves on one level. */
.ta-cmp-fighters { flex-wrap: wrap; justify-content: center; align-items: flex-start; }
/* Slightly gentler max than the single view — these fighters share the row with the
   matchup grid at >=1450px, so the cap is tuned to grow yet leave the grid room.
   The 108px floor matches the single view so all three fit one row at 360px. */
.ta-cmp-fighters .ta-fighter { width: clamp(108px, 12.5vw, 216px); }

/* Change-log "ghost trail": the current loadout is drawn normally; a REPLACED slot
   trails a faded ghost of the old value (right of the rune, below the charm). ADD and
   REMOVE get their own marks instead — a green + on the new charm, and the old charm
   struck out in the slot it left behind. */
.ta-cmp-fighters .ta-fighter { position: relative; }

.ta-fx-swapped { --c: var(--ta-swap); }
.ta-fx-added   { --c: var(--ta-add); }
.ta-fx-removed { --c: var(--ta-rem); }

/* level (left) + rune group (right) so the rune's trail has room on the right */
.ta-rune-group { display: inline-flex; align-items: center; gap: 2px; position: relative; }

/* faded echo of the replaced rune/charm */
.ta-ghost-ic { object-fit: contain; opacity: 0.5; filter: grayscale(0.4); border-radius: 5px; }

/* horizontal trail (rune): a stalk + the old rune to the right of the current one */
.ta-trail-h { display: inline-flex; align-items: center; gap: 1px; }
.ta-trail-h .ta-ghost-ic { width: clamp(15px, 1.6vw, 26px); height: clamp(15px, 1.6vw, 26px); }
.ta-stalk-h { width: 9px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--c)); }

/* the 6 current charms (row 1) with a per-column trail beneath (row 2) */
.ta-cl-charms {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start; justify-items: center;
    width: 100%; margin-top: 4px; row-gap: 2px;
}
.ta-cl-charms .charms-battle-item { flex: none; text-align: center; }
.ta-cl-trail { display: flex; justify-content: center; }
.ta-trail-v { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ta-stalk { width: 2px; height: 6px; border-radius: 2px; background: linear-gradient(var(--c), transparent); }
.ta-trail-v .ta-ghost-ic { width: clamp(13px, 1.4vw, 20px); height: clamp(13px, 1.4vw, 20px); }

/* corner mark shared by ADD (+) and REMOVE (−) */
.ta-charm-wrap, .ta-gone { position: relative; display: inline-flex; }
.ta-mark {
    position: absolute; top: -6px; right: -7px; z-index: 4;
    min-width: 15px; height: 15px; padding: 0 2px; border-radius: 999px;
    display: grid; place-items: center; color: #fff; font-weight: 900;
    font-size: 11px; line-height: 1; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.ta-mark-add { background: var(--ta-add); }
.ta-mark-rem { background: var(--ta-rem); }

/* REMOVE: the old charm, faded and struck through, where it used to sit */
.ta-gone .ta-ghost-ic { opacity: 0.42; }
.ta-strike { position: absolute; inset: 0; pointer-events: none; }
.ta-strike::before {
    content: ""; position: absolute; top: 50%; left: -1px; right: -1px; height: 2px;
    background: var(--ta-rem); transform: rotate(-16deg); border-radius: 2px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
}
/* Scoped to the charm contexts — the matchup grid's empty turn halves also carry
   .ta-empty and must stay a plain dash, not a dashed box. */
.ta-cl-charms .ta-empty,
.ta-gone .ta-empty {
    display: inline-block; width: clamp(13px, 1.7vw, 24px); height: clamp(13px, 1.7vw, 24px);
    border-radius: 6px; border: 1.5px dashed var(--bulma-border, #c2c8d0); opacity: 0.45;
}
.ta-gone .ta-empty { border-color: var(--ta-rem); opacity: 0.6; }

/* Axie swap = a part change. Under the new fighter, the body parts that differ from the
   axie it replaced, as old-class -> new-class (class carries the gameplay meaning). */
.ta-parts {
    width: 100%; margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed var(--bulma-border, #d7dbe2);
    display: flex; flex-direction: column; gap: 4px;
}
.ta-parts-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ta-parts-tag {
    font-size: 0.56rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
    color: var(--ta-add); border: 1px solid var(--ta-add); border-radius: 999px; padding: 1px 7px;
}
.ta-parts-list { display: flex; flex-direction: column; gap: 3px; align-items: center; }
/* One changed part: real part art + name, old → new (evolutions: one side + ↑ stage). */
.ta-part {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px;
    font-size: 0.62rem; line-height: 1.1;
}
.ta-part-side { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; min-width: 0; }
.ta-part-ic {
    flex: none; width: 18px; height: 18px; object-fit: contain;
}
.ta-part-side.is-old .ta-part-ic { opacity: 0.55; filter: grayscale(0.35); }
.ta-part-arrow { flex: none; color: var(--bulma-text-weak, #b0b6bf); font-weight: 800; }
.ta-part-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-weight: 700;
    color: var(--bulma-text-strong, #23272e);
}
.ta-part-name.is-old { color: var(--bulma-text-weak, #9aa0a8); font-weight: 600; }

/* Compare mode annotates the SAME matchup grid: each Win cell keeps its win%
   and gains a small badge with the change vs the other version. */
/* "Δ vs global": every slot grid is pre-rendered twice — plain, and annotated
   against how the same archetype performs across the field (/matchups data).
   The toggle flips which variant shows; panels without a baseline (unknown
   archetype) keep the plain grid. */
.ta-gvg-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.ta-gvg-toggle {
    appearance: none;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--bulma-border, #dfe3e8);
    background: transparent;
    color: var(--bulma-text-weak, #6b727c);
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.ta-gvg-toggle:hover {
    border-color: var(--bulma-link, #485fc7);
    color: var(--bulma-text-strong, #23272e);
}

.ta-gvg-toggle.is-active {
    background: color-mix(in srgb, var(--bulma-link, #485fc7) 14%, transparent);
    border-color: var(--bulma-link, #485fc7);
    color: var(--bulma-link, #485fc7);
}

.ta-gwrap-gvg { display: none; }
.ta-slot.ta-gvg-on .ta-panel:has(.ta-gwrap-gvg) .ta-gwrap-std { display: none; }
.ta-slot.ta-gvg-on .ta-gwrap-gvg { display: block; }

/* Compare mode: the win cell keeps its 30px height and shows the delta vs the
   other version INLINE after the number — plain signed text in the semantic
   colour, no pill, so it sits quietly on the wash. */
.ta-grid-cmp .ta-win .ta-val {
    gap: 4px;
    line-height: 1;
}

.ta-cdelta {
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ta-cdelta.up   { color: var(--ta-add); }
.ta-cdelta.down { color: var(--ta-rem); }
.ta-cdelta.flat { color: var(--bulma-text-weak, #8a8f98); }

.theme-dark .ta-cdelta.up   { color: #4fce8b; }
.theme-dark .ta-cdelta.down { color: #f28495; }

.ta-compare-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bulma-text-weak, #777);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ta-compare-vs {
    color: var(--bulma-text-weak, #999);
    font-style: italic;
}

.ta-experiment-note,
.ta-no-versions {
    font-size: 0.76rem;
    color: var(--bulma-text-weak, #999);
    margin-top: 10px;
}

.ta-no-versions {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--bulma-border, #ddd);
}

/* Meta swatch dot used by the grid-cell tooltip. */
.ta-swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Grid cell tooltip (shared, positioned via floatingUI) ─────────────── */
.ta-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    background: var(--bulma-scheme-main, #fff);
    color: var(--bulma-text, #222);
    border: 1px solid var(--bulma-border, #ddd);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    padding: 8px 10px;
    font-size: 12px;
    z-index: 1000;
    min-width: 190px;
}

.ta-tooltip.is-visible { opacity: 1; }

.ta-tip-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--bulma-border, #eee);
}

.ta-tip-share {
    margin-left: auto;
    font-weight: 500;
    font-size: 0.72rem;
    color: var(--bulma-text-weak, #999);
}

.ta-tip-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
}

.ta-tip-label { color: var(--bulma-text-weak, #888); }
.ta-tip-figs b { color: var(--bulma-text-strong, #111); }
.ta-tip-n { color: var(--bulma-text-weak, #aaa); font-size: 0.72rem; }
.ta-tip-row.ta-tip-dim { color: var(--bulma-grey-light, #bbb); }

@media screen and (max-width: 768px) {
    /* The grid deliberately keeps its desktop cell size — .ta-grid-wrap scrolls
       horizontally instead. Don't reintroduce cell shrinking here. */

    /* Reclaim the page's side gutter (Bulma .section has 1.5rem side padding):
       bleed the analytics blocks to the screen edges so the table and timeline
       get the full width. */
    .ta-toolbar,
    .ta-slot {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }
    .ta-slot {
        padding: 12px 6px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
    .ta-toolbar { padding: 0 6px; }
    .ta-grid-wrap { padding: 2px 2px 2px 0; }
    /* Tighter fighter spacing so three enlarged axies fit the row; clip the
       scaled axie art's horizontal overhang at the screen edge (region right =
       viewport - 6px slot padding, so a 6px clip-margin lands on the viewport)
       to keep the page from picking up a few px of horizontal scroll. */
    .ta-fighters { gap: 6px; overflow-x: clip; overflow-clip-margin: 6px; }
    /* The battles list bleeds -10px each side by default; on the full-width
       mobile slot that pokes past the screen edge, so cancel it here. */
    .battle-team { margin-left: 0; margin-right: 0; }
}