.section {
    padding: 1.5rem;
}

#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; }
}