/* ============================================
   POD STATS
   The Pod's Stats pane: a headline strip of tiles, a grid of one-picture
   cards, and the drill-down modal behind them. Layout is driven by container
   queries on the pane itself, so it reads the same in the main pane, the side
   pane, and on a phone.
   ============================================ */

/* --- Tokens --------------------------------------------------------------- */

/* Player colours: the validated categorical order (blue, orange, aqua, yellow,
   magenta, green, violet, red), stepped for dark surfaces. Adjacent pairs pass
   the colour-vision checks; every mark also carries an avatar, so colour never
   identifies a player on its own. Slots are handed out by id order, not rank. */
:root {
    --pod-player-1: #3987e5;
    --pod-player-2: #d95926;
    --pod-player-3: #199e70;
    --pod-player-4: #c98500;
    --pod-player-5: #d55181;
    --pod-player-6: #008300;
    --pod-player-7: #9085e9;
    --pod-player-8: #e66767;
    --pod-player-other: #7c8491;

    /* Head-to-head: a diverging scale, warm loss to cool win through a grey
       that reads as "even". */
    --pod-h2h-win: #3987e5;
    --pod-h2h-loss: #e66767;
    --pod-h2h-mid: #353b47;
}

/* Light themes take the same hues stepped for a light surface. */
[data-theme="azorius"],
[data-theme="theros"] {
    --pod-player-1: #2a78d6;
    --pod-player-2: #eb6834;
    --pod-player-3: #1baf7a;
    --pod-player-4: #eda100;
    --pod-player-5: #e87ba4;
    --pod-player-6: #008300;
    --pod-player-7: #4a3aa7;
    --pod-player-8: #e34948;
    --pod-player-other: #8b8f96;
    --pod-h2h-win: #2a78d6;
    --pod-h2h-loss: #e34948;
    --pod-h2h-mid: #e3e6ec;
}

/* The colour-vision theme already ships a palette built for it. */
[data-theme="lens_of_clarity"] {
    --pod-player-1: var(--chart-cat-1);
    --pod-player-2: var(--chart-cat-2);
    --pod-player-3: var(--chart-cat-3);
    --pod-player-4: var(--chart-cat-4);
    --pod-player-5: var(--chart-cat-5);
    --pod-player-6: var(--chart-cat-6);
    --pod-player-7: var(--chart-cat-7);
    --pod-player-8: var(--chart-cat-8);
}

/* Finishing order reads as medals — gold, silver, bronze — then out of the
   running. An ordered scale everyone already knows beats shades of one hue. */
:root {
    --pod-place-1: #e8b53c;
    --pod-place-2: #b8c2cc;
    --pod-place-3: #a96a2e;
    --pod-place-4: #d2504f;
    --pod-place-5: #2b3040;
}

[data-theme="azorius"],
[data-theme="theros"] {
    --pod-place-1: #d59a12;
    --pod-place-2: #9aa5b1;
    --pod-place-3: #98601f;
    --pod-place-4: #cf4444;
    --pod-place-5: #454b58;
}

.pod-place-1 { background: var(--pod-place-1); }
.pod-place-2 { background: var(--pod-place-2); }
.pod-place-3 { background: var(--pod-place-3); }
.pod-place-4 { background: var(--pod-place-4); }
.pod-place-5 { background: var(--pod-place-5); }

/* --- The pane ------------------------------------------------------------- */

.pod-stats-dash {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pod-stats-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--widget-bg);
    color: var(--text-muted);
    text-align: center;
}

.pod-stats-empty strong {
    color: var(--text-primary);
    font-size: 1.05rem;
}

/* --- Headline tiles ------------------------------------------------------- */

.pod-score-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

/* Two and two before four gets cramped, never three and an orphan. */
@container (max-width: 760px) {
    .pod-score-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.pod-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 136px;
    padding: 12px 10px 14px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--widget-bg);
    color: var(--text-primary);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pod-tile:hover,
.pod-tile:focus-visible {
    border-color: var(--accent-color);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-color) 18%, transparent);
    transform: translateY(-1px);
}

.pod-tile-label {
    color: var(--chart-title-color, var(--text-secondary));
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pod-tile-value {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    color: var(--accent-color);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.1;
}

.pod-tile-value small {
    margin-left: 2px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.pod-tile-verdict {
    max-width: 100%;
    overflow: hidden;
    color: var(--accent-color);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.pod-tile-flavor {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-style: italic;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pod-tile-open {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: inline-flex;
    color: var(--text-muted);
    font-size: 11px;
    opacity: 0.45;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.pod-tile:hover .pod-tile-open,
.pod-tile:focus-visible .pod-tile-open {
    color: var(--accent-color);
    opacity: 1;
}

.pod-tile-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.pod-tile-player .pod-avatar-large {
    width: 32px;
    height: 32px;
    font-size: 0.72rem;
    outline-width: 2px;
}

.pod-tile-player-name,
.pod-tile-deck-name {
    max-width: 100%;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-tile-deck-name {
    display: -webkit-box;
    font-size: 1.05rem;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* A deck's art rides in a thumbnail, the same square the Top decks rows use.
   Full-bleed art behind the tile meant the title had to fight it for contrast. */
.pod-tile-deck {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.pod-tile-thumb {
    --pod-deck-art-scrim: none;
    display: block;
    width: 54px;
    height: 38px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--chart-bar-track);
}

/* --- Avatars, meters, chips ---------------------------------------------- */

.pod-avatar {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    overflow: hidden;
    border-radius: 50%;
    outline: 2px solid var(--pod-avatar-ring, var(--border-color));
    outline-offset: 1px;
    background: color-mix(in srgb, var(--pod-avatar-ring, var(--accent-color)) 28%, var(--widget-bg));
    color: var(--text-primary);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
}

.pod-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pod-avatar-large {
    width: 44px;
    height: 44px;
    font-size: 0.95rem;
    outline-width: 3px;
    outline-offset: 2px;
}

.pod-meter {
    display: block;
    min-width: 0;
    height: 6px;
    overflow: hidden;
    border-radius: 99px;
    background: var(--chart-bar-track);
}

.pod-meter i {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    background: var(--accent-color);
}

.pod-rating-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

.pod-rating-chip strong {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

/* --- Hall of fame --------------------------------------------------------- */

.pod-fame {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 8px;
}

.pod-fame-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--border-color);
    border-radius: 99px;
    background: var(--widget-bg);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.pod-fame-chip:hover,
.pod-fame-chip:focus-visible { border-color: var(--accent-color); }

.pod-fame-chip > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.pod-fame-chip strong,
.pod-fame-chip small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-fame-chip strong { font-size: 0.8rem; }
.pod-fame-chip small { color: var(--text-muted); font-size: 0.7rem; }

/* --- Card grid ------------------------------------------------------------ */

.pod-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row dense;
    gap: 16px;
}

@container (min-width: 640px) {
    .pod-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The titles close the pane as a full-width strip rather than a lone card
       leaving two empty columns beside it. */
    .pod-card-fame { grid-column: 1 / -1; }
    .pod-card-fame .pod-card-body { padding-bottom: 2px; }
}

/* Six columns so a card can take a third (2) or a half (3) of the row. */
@container (min-width: 1100px) {
    .pod-card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .pod-card-grid > * { grid-column: span 2; }
    .pod-card-wide { grid-column: span 3; }
    .pod-card-fame { grid-column: 1 / -1; }
}

.pod-card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--widget-bg);
}

.pod-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
}

.pod-card-heading {
    flex: 1 1 140px;
    min-width: 0;
}

.pod-card-heading h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.pod-card-heading p,
.pod-card-caption,
.pod-card-note {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.pod-card-more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px 4px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.pod-card-more:hover,
.pod-card-more:focus-visible {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
}

.pod-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.pod-card-empty {
    margin: auto 0;
    padding: 18px 8px;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
}

/* Rows that open something share one hover treatment. */
.pod-standing,
.pod-top-deck,
.pod-placement-row,
.pod-opponent {
    width: 100%;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pod-standing:hover,
.pod-standing:focus-visible,
.pod-top-deck:hover,
.pod-top-deck:focus-visible,
.pod-placement-row:hover,
.pod-placement-row:focus-visible,
.pod-opponent:hover,
.pod-opponent:focus-visible {
    background: color-mix(in srgb, var(--accent-color) 9%, transparent);
}

.pod-standings,
.pod-top-decks,
.pod-placements,
.pod-key-list,
.pod-survival,
.pod-opponents,
.pod-deck-ranks,
.pod-detail-list,
.pod-place-legend,
.pod-detail-notes {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Standings ------------------------------------------------------------ */

.pod-standings {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pod-standing {
    display: grid;
    grid-template-columns: 18px 30px minmax(0, 1.1fr) minmax(56px, 2fr) 44px minmax(0, auto);
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
}

.pod-standing-rank {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}

.pod-standing-first .pod-standing-rank { color: var(--accent-color); }

.pod-standing-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.pod-standing-name strong,
.pod-top-deck-name strong,
.pod-deck-rank-name strong {
    overflow: hidden;
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-standing-name small,
.pod-top-deck-name small,
.pod-deck-rank-name small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-standing-rate,
.pod-top-deck-rate {
    font-size: 0.9rem;
    font-weight: 700;
    text-align: right;
}

@container (max-width: 460px) {
    .pod-standing { grid-template-columns: 16px 28px minmax(0, 1fr) minmax(40px, 0.9fr) 40px; gap: 8px; }
    .pod-standing-rating { display: none; }
}

/* --- Head-to-head --------------------------------------------------------- */

.pod-h2h {
    display: grid;
    grid-template-columns: 34px repeat(var(--pod-h2h-n), minmax(28px, 1fr));
    gap: 3px;
    align-items: center;
    justify-items: center;
}

.pod-h2h-head {
    display: inline-flex;
    padding: 4px 0;
}

.pod-h2h-cell {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 32px;
    aspect-ratio: 1.3;
    max-height: 52px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: var(--pod-h2h-mid);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    cursor: pointer;
}

.pod-h2h-cell:hover,
.pod-h2h-cell:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
}

.pod-h2h-empty { background: color-mix(in srgb, var(--chart-bar-track) 60%, transparent); }

.pod-h2h-self {
    width: 100%;
    min-height: 32px;
    aspect-ratio: 1.3;
    max-height: 52px;
    border-radius: 6px;
    background: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 70%, transparent);
}

.pod-h2h-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    color: var(--text-muted);
    font-size: 0.7rem;
}

.pod-h2h-legend i {
    flex: 1;
    height: 6px;
    border-radius: 99px;
    background: linear-gradient(
        90deg,
        color-mix(in oklab, var(--pod-h2h-loss) 85%, var(--pod-h2h-mid)),
        var(--pod-h2h-mid),
        color-mix(in oklab, var(--pod-h2h-win) 85%, var(--pod-h2h-mid))
    );
}

@container (max-width: 340px) {
    .pod-h2h { grid-template-columns: 28px repeat(var(--pod-h2h-n), minmax(24px, 1fr)); gap: 2px; }
    .pod-h2h-cell { font-size: 0.6rem; }
}

/* --- Top decks ------------------------------------------------------------ */

.pod-top-decks {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pod-top-deck {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) minmax(48px, 0.7fr) 42px;
    align-items: center;
    gap: 10px;
    padding: 6px;
}

.pod-top-deck-art,
.pod-deck-rank-art {
    --pod-deck-art-scrim: none;
    display: block;
    width: 52px;
    height: 38px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--chart-bar-track);
}

.pod-top-deck-name,
.pod-deck-rank-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

@container (max-width: 360px) {
    .pod-top-deck { grid-template-columns: 44px minmax(0, 1fr) 40px; }
    .pod-top-deck .pod-meter { display: none; }
    .pod-top-deck-art { width: 44px; height: 34px; }
}

/* --- Finishing positions -------------------------------------------------- */

.pod-place-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: var(--text-muted);
    font-size: 0.7rem;
}

.pod-place-legend li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pod-place-legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.pod-place-legend b {
    margin-left: 2px;
    color: var(--text-primary);
}

.pod-placements {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pod-placement-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
}

.pod-placement-bar {
    display: flex;
    gap: 2px;
    height: 12px;
    overflow: hidden;
    border-radius: 4px;
}

.pod-placement-bar i {
    flex-basis: 0;
    min-width: 3px;
}

.pod-placement-bar-large { height: 16px; }

/* --- Eliminations --------------------------------------------------------- */

.pod-donut-card {
    display: grid;
    grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

@container (max-width: 340px) {
    .pod-donut-card { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .pod-donut-card .pod-donut { width: 150px; }
    .pod-donut-card .pod-key-list { width: 100%; }
}

.pod-donut {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}

.pod-donut svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pod-donut-track,
.pod-donut-slice {
    fill: none;
    stroke-width: 13;
}

.pod-donut-track { stroke: var(--chart-bar-track); }

.pod-donut-slice { transition: stroke-width 0.15s ease; }
.pod-donut-slice:hover { stroke-width: 16; }

.pod-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.pod-donut-center strong {
    color: var(--text-primary);
    font-size: 1.6rem;
    line-height: 1;
}

.pod-donut-center span {
    color: var(--text-muted);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pod-key-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pod-key-list li {
    display: block;
    font-size: 0.82rem;
}

.pod-key-list span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Survival ------------------------------------------------------------- */

/* One shared turn axis with each player standing on it. Markers alternate above
   and below so two players knocked out on the same turn stay readable. */
.pod-survival {
    position: relative;
    min-height: 96px;
    margin: 0 24px;
}

.pod-survival-track {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 8px;
    border-radius: 99px;
    background: linear-gradient(
        90deg,
        color-mix(in oklab, var(--accent-color) 14%, var(--chart-bar-track)),
        var(--accent-color)
    );
    transform: translateY(-50%);
}

.pod-survival-markers {
    position: relative;
    height: 96px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pod-survival-marker {
    position: absolute;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transform: translate(-50%, -100%);
}

.pod-survival-marker b {
    order: -1;
    padding: 1px 6px;
    border: 1px solid var(--border-color);
    border-radius: 99px;
    background: var(--widget-bg);
    color: var(--text-primary);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Below the axis, so the avatar still touches it and the label hangs clear. */
.pod-survival-marker-low {
    transform: translate(-50%, 0);
}

.pod-survival-marker-low b { order: 1; }

.pod-survival-axis {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 0.68rem;
}

/* --- Damage --------------------------------------------------------------- */

/* The switch sits under the title row: the heading grows to fill that row
   beside Details, so ordering the switch last always wraps it below. */
.pod-card-header > .pod-segmented {
    order: 3;
    flex-basis: 100%;
}

.pod-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: 99px;
}

.pod-segmented-option {
    padding: 4px 10px;
    border: none;
    border-radius: 99px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.72rem;
    cursor: pointer;
}

.pod-segmented-option.active {
    background: var(--accent-color);
    color: var(--ui-button-active-text, #fff);
}

/* The shared bar chart, re-keyed by player: avatar and name need more room
   than the Collection's short labels. */
.pod-card .collection-bar-row,
.pod-detail .collection-bar-row {
    grid-template-columns: minmax(142px, 1.4fr) minmax(52px, 1.8fr) 40px;
    min-height: 30px;
    font-size: 0.8rem;
}

.pod-card .collection-bar-row > b { font-size: 0.8rem; }

.pod-bar-player {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    /* Room for the avatar ring: the bar row clips its label cell. */
    padding: 3px;
    color: var(--text-primary);
}

.pod-bar-player > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@container (max-width: 340px) {
    .pod-card .collection-bar-row { grid-template-columns: 30px minmax(60px, 1fr) 36px; }
    .pod-bar-player > span:last-child { display: none; }
}

/* --- Knockout heatmap ----------------------------------------------------- */

.pod-heat-table th[scope="col"] { text-align: center; }

.pod-table .pod-heat-cell {
    min-width: 42px;
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: center;
}

.pod-heat-self {
    background: repeating-linear-gradient(
        135deg,
        transparent 0 5px,
        color-mix(in srgb, var(--border-color) 45%, transparent) 5px 6px
    );
}

/* Self-eliminations sit apart from the grid: they are nobody's knockout. */
.pod-heat-aside {
    color: var(--text-muted);
    font-weight: 600;
}

/* --- Ranked player rows --------------------------------------------------- */

.pod-player-bars {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pod-player-bar,
.pod-key-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) minmax(50px, 1.6fr) 40px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pod-player-bar:hover,
.pod-player-bar:focus-visible,
.pod-key-row:hover,
.pod-key-row:focus-visible {
    background: color-mix(in srgb, var(--accent-color) 9%, transparent);
}

.pod-player-bar-name,
.pod-key-row span {
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-player-bar b,
.pod-key-row b {
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* The elimination legend has no meter, so its rows are one column shorter. */
.pod-key-row { grid-template-columns: 26px minmax(0, 1fr) auto; }

@container (max-width: 340px) {
    .pod-player-bar { grid-template-columns: 26px minmax(0, 1fr) 40px; }
    .pod-player-bar .pod-meter { display: none; }
}

/* --- At the table --------------------------------------------------------- */

.pod-habits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px;
}

.pod-habit {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pod-habit strong {
    color: var(--accent-color);
    font-size: 1.8rem;
    line-height: 1;
}

.pod-habit > span {
    color: var(--text-muted);
    font-size: 0.76rem;
}

/* --- Drill-down modal ----------------------------------------------------- */

.pod-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 4px 10px 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: 99px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.pod-detail-back:hover,
.pod-detail-back:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.pod-detail {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.pod-detail-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pod-detail-section h5 {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pod-detail-note,
.pod-detail-notes {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.pod-detail-notes {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Three across, so three figures make a row and six make two — never an
   orphan on a row of its own. */
.pod-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@container (max-width: 420px) {
    .pod-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pod-figure {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--widget-bg);
}

.pod-figure-label {
    color: var(--text-muted);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pod-figure strong {
    color: var(--text-primary);
    font-size: 1.35rem;
    line-height: 1.2;
}

.pod-figure small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-detail-player {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.pod-detail-player > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-detail-player:hover,
.pod-detail-player:focus-visible { color: var(--accent-color); }

/* Tables: the text twin of every chart. Wide ones scroll on their own rather
   than pushing the modal sideways, with the player column pinned. */
.pod-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.pod-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.pod-table th,
.pod-table td {
    padding: 8px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    text-align: left;
    white-space: nowrap;
}

.pod-table td {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.pod-table td strong { color: var(--text-primary); }
.pod-table td small { color: var(--text-muted); }

.pod-table thead th {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pod-table tbody tr:last-child > * { border-bottom: none; }

.pod-table tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--panel-bg-opaque, var(--widget-bg));
}

.pod-table-rank { color: var(--text-muted); }
.pod-table .pod-table-sorted { color: var(--accent-color); font-weight: 700; }

.pod-detail-list {
    display: flex;
    flex-direction: column;
}

.pod-detail-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 9px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    font-size: 0.84rem;
}

.pod-detail-list li:last-child { border-bottom: none; }

.pod-detail-list small {
    flex-basis: 100%;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.pod-share-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pod-share-rows li {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(60px, 2fr) 44px;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
}

.pod-share-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-share-rows b {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.pod-detail-deck-name {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.pod-detail-deck-name small { color: var(--text-muted); font-size: 0.72rem; }

/* Player drill-down */
.pod-detail-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.pod-detail-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pod-detail-hero-name .pod-player-link-name {
    font-size: 1.2rem;
    font-weight: 700;
}

.pod-sparkline {
    width: 140px;
    height: 36px;
    margin-left: auto;
}

.pod-opponents {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pod-opponent {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) minmax(60px, 1.4fr) 48px;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
}

.pod-opponent-name {
    overflow: hidden;
    font-size: 0.86rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-opponent-record {
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: right;
}

.pod-detail-deck {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    min-height: 88px;
    padding: 14px;
    overflow: hidden;
    border-radius: 10px;
    color: #f4f6fa;
}

.pod-detail-deck > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.pod-detail-deck small { color: rgba(244, 246, 250, 0.75); }

.pod-detail-action {
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.pod-detail-action:hover,
.pod-detail-action:focus-visible { border-color: #fff; }

/* Matchup drill-down */
.pod-versus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.pod-versus > .pod-detail-player:last-child { justify-self: end; }

.pod-versus-score {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.pod-versus-bar {
    display: flex;
    gap: 2px;
    height: 14px;
    overflow: hidden;
    border-radius: 99px;
}

.pod-versus-bar i { flex-basis: 0; min-width: 4px; }

/* Pace drill-down */
.pod-pace-formats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.pod-pace-format {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--widget-bg);
}

.pod-pace-format header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 10px;
}

.pod-pace-format header span {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.pod-columns {
    display: flex;
    align-items: stretch;
    gap: 10px;
    height: 120px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pod-columns li {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 56px;
}

.pod-columns b { font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.pod-columns small { color: var(--text-muted); font-size: 0.68rem; }

.pod-columns-track {
    display: flex;
    flex: 1;
    align-items: flex-end;
    width: 100%;
}

.pod-columns-track i {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: var(--accent-color);
}

/* Deck rankings drill-down */
.pod-detail-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pod-detail-filters > :first-child { flex: 1 1 200px; }

.pod-deck-ranks {
    display: flex;
    flex-direction: column;
}

.pod-deck-rank {
    display: grid;
    grid-template-columns: 22px 68px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.pod-deck-rank .pod-deck-rank-art {
    width: 68px;
    height: 50px;
}

.pod-deck-rank-name { gap: 5px; }

.pod-deck-rank-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
    min-width: 0;
}

/* Every attribute that leads somewhere looks like it does. */
.pod-deck-rank-chip {
    max-width: 100%;
    overflow: hidden;
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 99px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pod-deck-rank-chip-plain { color: var(--text-muted); }

button.pod-deck-rank-chip,
.pod-deck-rank-chip-player { cursor: pointer; }

button.pod-deck-rank-chip:hover,
button.pod-deck-rank-chip:focus-visible,
.pod-deck-rank-chip-player:hover,
.pod-deck-rank-chip-player:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* PlayerLink brings its own layout; inside a chip it is just the name. */
.pod-deck-rank-chip-player {
    display: inline-flex;
    align-items: center;
    background: transparent;
}

.pod-deck-rank-chip-player .pod-player-link-name { font-size: 0.72rem; }

.pod-deck-rank-casts {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.pod-deck-rank:last-child { border-bottom: none; }

.pod-deck-rank-position {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}

.pod-deck-rank-link {
    overflow: hidden;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.pod-deck-rank-link:hover,
.pod-deck-rank-link:focus-visible {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Fixed columns so every row's meter lines up whether or not it has a rating. */
.pod-deck-rank-stats {
    display: grid;
    grid-template-columns: 70px 40px 34px 48px;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
}
.pod-deck-rank-stats small { color: var(--text-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .pod-deck-rank { grid-template-columns: 22px 52px minmax(0, 1fr); }
    .pod-deck-rank-stats { grid-column: 3; grid-template-columns: 60px 40px 34px auto; }
    .pod-versus-score { font-size: 1.4rem; }
    .pod-sparkline { margin-left: 0; }
}