/* The deck page: the functional snapshot in the right column under the cost reduction, and on a phone the actions in a
   sheet (Plans and Edit stay in view) and the sections in a picker instead of a row of pills.
   See show.blade.php, partials/analyzed-dashboard.blade.php and partials/analysis-tabs.blade.php; deck-page.js. */

.deck-insight-stack { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }

/* functional snapshot: three numbers across, each with its name under it; the card opens the list of cards */
.deck-functional-snapshot-card--compact .strategy-overview-head { margin-bottom: 0.7rem; }
.deck-functional-snapshot-card--compact .strategy-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.deck-functional-snapshot-card--compact .strategy-item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.1rem; padding: 0.7rem 0.8rem; }
.deck-functional-snapshot-card--compact .strategy-icon,
.deck-functional-snapshot-card--compact .strategy-item-meta { display: none; }
.deck-functional-snapshot-card--compact .strategy-item-main { gap: 0; }

/* the picker of the sections (phone only) and the sheet it opens */
.deck-section-picker { display: none; }
.deck-section-shell { scroll-margin-top: 5.5rem; }
.deck-sheet { display: none; }
.deck-actions-primary { display: none; }
.deck-actions-backdrop { display: none; }

@media (max-width: 767.98px) {
    .deck-section-rail { display: none; }

    .deck-section-picker {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: calc(100% - 1.8rem);
        min-height: 3.5rem;
        margin: 0.9rem;
        padding: 0 1rem;
        border: 1px solid rgba(143, 92, 255, 0.6);
        border-radius: 14px;
        background: #1f1830;
        color: #fff;
        font: inherit;
        font-size: 1rem;
        font-weight: 800;
        cursor: pointer;
    }
    .deck-section-picker__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
    .deck-section-picker__text small { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, #9aa7bb); }

    .deck-sheet { position: fixed; z-index: 10000; inset: 0; flex-direction: column; justify-content: flex-end; }
    .deck-sheet.is-open { display: flex; }
    .deck-sheet__backdrop { position: absolute; inset: 0; border: 0; background: rgba(0, 0, 0, 0.62); cursor: default; }
    .deck-sheet__panel { position: relative; display: flex; flex-direction: column; gap: 0.3rem; max-height: 85dvh; overflow-y: auto; padding: 1rem 0.9rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #1f1830; border-top: 1px solid rgba(143, 92, 255, 0.6); }
    .deck-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 0 0.2rem 0.3rem; }
    .deck-sheet__head b { font-size: 1.05rem; color: #fff; }
    .deck-sheet__x { width: 2.75rem; height: 2.75rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
    .deck-sheet__item { display: flex; align-items: center; gap: 0.8rem; min-height: 3.25rem; padding: 0 0.9rem; border: 0; border-radius: 12px; background: transparent; color: #d3dcea; font: inherit; font-size: 1rem; font-weight: 700; text-align: left; cursor: pointer; }
    .deck-sheet__item i { width: 1.3rem; text-align: center; color: var(--text-muted, #9aa7bb); }
    .deck-sheet__item span:first-of-type { flex: 1; }
    .deck-sheet__item.is-on { background: #2a1c52; color: #fff; }
    .deck-sheet__item.is-on i { color: var(--accent-secondary, #d998ff); }
    body.has-deck-sheet { overflow: hidden; }

    /* the actions of the deck: Plans and Edit in view, the rest in a sheet behind the three dots */
    .deck-actions-panel--live .deck-actions-primary { display: flex; gap: 0.5rem; }
    .deck-actions-primary .deck-action-button { flex: 1; justify-content: center; min-height: 2.9rem; }
    .deck-actions-primary__more { flex: none; width: 2.9rem; min-height: 2.9rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #fff; font-size: 1.1rem; cursor: pointer; }
    .deck-actions-panel--live .deck-actions-grid { display: none; }
    .deck-actions-panel--live.is-open .deck-actions-backdrop { display: block; position: fixed; z-index: 9999; inset: 0; border: 0; background: rgba(0, 0, 0, 0.62); }
    .deck-actions-panel--live.is-open .deck-actions-grid {
        position: fixed;
        z-index: 10000;
        left: 0;
        right: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        max-height: 85dvh;
        overflow-y: auto;
        padding: 1rem 0.9rem calc(1rem + env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0;
        background: #1f1830;
        border-top: 1px solid rgba(143, 92, 255, 0.6);
    }
    .deck-actions-panel--live.is-open .deck-actions-grid .is-sideboard,
    .deck-actions-panel--live.is-open .deck-actions-grid .is-edit { display: none; }
}

/* the names of the six categories have to fit three across */
.deck-functional-snapshot-card--compact .strategy-label { font-size: 0.66rem; letter-spacing: 0; overflow-wrap: anywhere; }

/* Overview: the curve as columns (and the printed and the effective curve side by side) */
.ov-columns { display: flex; align-items: flex-end; gap: 0.8rem; height: 11rem; margin-top: 0.9rem; }
.ov-column { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.3rem; height: 100%; min-width: 0; }
.ov-column__count { min-height: 1.1rem; font-size: 0.8rem; font-weight: 700; color: var(--text-soft-strong, #c4d1e3); }
.ov-column__bar { width: 100%; border-radius: 5px 5px 0 0; background: #8f5cff; }
.ov-column__label { font-size: 0.72rem; color: var(--text-muted, #9aa7bb); }
.ov-columns--pairs { height: 9.5rem; }
.ov-column__pair { display: flex; align-items: flex-end; gap: 3px; width: 100%; }
.ov-column__pair .ov-column__bar { flex: 1; }
.ov-column__bar--base { background: rgba(143, 92, 255, 0.4); }
.ov-column__bar--effective { background: #6ee7a8; }
.ov-legend { display: flex; gap: 1rem; margin-top: 0.6rem; font-size: 0.72rem; color: var(--text-muted, #9aa7bb); }
.ov-dot { display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.35rem; border-radius: 2px; }
.ov-dot--base { background: rgba(143, 92, 255, 0.55); }
.ov-dot--effective { background: #6ee7a8; }
@media (max-width: 767.98px) { .ov-columns { gap: 0.4rem; } }

/* ---------- the header of a deck: back link, title and colors on the left, the four numbers on the right, the actions below ---------- */
.deck-hero-shell .context-back-link { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; gap: 0.4rem; }
.deck-hero-shell .context-back-icon { width: auto; height: auto; background: none; border: 0; font-size: 0.75rem; }
.deck-hero-shell .context-back-meta { display: none; }
.deck-hero-shell .context-back-label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted, #9aa7bb); }
.deck-hero-shell .context-back-link:hover .context-back-label { color: #fff; }

@media (min-width: 992px) {
    .deck-hero-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "back back" "top stats" "actions actions";
        column-gap: 1.75rem;
        align-items: center;
        padding: 1.1rem 1.5rem 1.25rem;
    }
    .deck-hero-shell > .context-back { grid-area: back; margin-bottom: 0.5rem !important; }
    .deck-hero-shell > .app-hero-top { grid-area: top; min-width: 0; }
    .deck-hero-shell > .deck-hero-stat-grid { grid-area: stats; grid-template-columns: repeat(4, 7.5rem); }
    .deck-hero-shell > .deck-actions-panel { grid-area: actions; }
}
.deck-hero-stat-label { font-size: 0.66rem; }
.deck-hero-stat-value { font-size: 1.35rem; }

/* ---------- Matchups: the six numbers as plain tiles, the table without the extra line under every name ---------- */
.matchups-analysis .matchup-summary-icon { display: none; }
.matchups-analysis .matchup-summary-main { display: block; }
.matchups-analysis .matchup-summary-value { font-size: 1.2rem; white-space: nowrap; }
.matchups-analysis .matchup-summary-card { padding: 0.8rem 0.95rem; gap: 0.2rem; }
.matchups-analysis .matchup-summary-label { font-size: 0.74rem; }
.matchups-analysis .matchups-table-full tbody td, .matchups-analysis .matchups-table-full thead th { padding: 0.45rem 0.5rem !important; vertical-align: middle; font-size: 0.82rem; }
.matchups-table-full thead th { font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.matchups-table-full .matchup-opponent-cell small { display: none; }
.matchups-table-full .badge { padding: 0.3rem 0.5rem; font-size: 0.74rem; }
.matchups-analysis .matchup-action-stack { display: flex; flex-direction: row !important; flex-wrap: nowrap; gap: 0.3rem; justify-content: center; }
.matchups-table-full .matchup-action-stack .btn { padding: 0.25rem 0.6rem; font-size: 0.72rem; white-space: nowrap; }
.matchups-analysis .matchups-table-full .matchup-record-pill,
.matchups-analysis .matchups-table-full .matchup-mini-pill { padding: 0.18rem 0.45rem; font-size: 0.76rem; }
.matchups-analysis .matchups-table-full thead th { font-size: 0.62rem; letter-spacing: 0.03em; padding-left: 0.3rem !important; padding-right: 0.3rem !important; }
.matchups-analysis .matchups-table-full .sort-icon { display: none; }
.matchups-analysis .matchups-table-full tbody td { padding-left: 0.3rem !important; padding-right: 0.3rem !important; }
.matchups-analysis .matchup-action-stack .btn i { display: none; }

/* ---------- Meta: the matchups of the meta in three lists, one row each (name, win rate, yours, delta, confidence) ---------- */
.meta-clusters { display: flex; flex-direction: column; gap: 0.9rem; }
.meta-cluster { overflow: hidden; border-radius: 16px; background: #171220; border: 1px solid rgba(255, 255, 255, 0.08); }
.meta-cluster__head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.meta-cluster__head b { font-size: 0.9rem; }
.meta-cluster--success .meta-cluster__head b { color: #6ee7a8; }
.meta-cluster--info .meta-cluster__head b { color: #7dd3fc; }
.meta-cluster--warning .meta-cluster__head b { color: #fcd34d; }
.meta-cluster__head span { font-size: 0.75rem; color: var(--text-muted, #9aa7bb); }
.meta-cluster__empty { margin: 0; padding: 0.9rem 1rem; font-size: 0.85rem; color: var(--text-muted, #9aa7bb); }

.meta-row { display: grid; grid-template-columns: minmax(0, 1.5fr) 9rem 7rem 6.5rem 8rem; gap: 0.7rem; align-items: center; min-height: 3.2rem; padding: 0.35rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 0.82rem; }
.meta-row:last-child { border-bottom: 0; }
.meta-row__name b { display: block; font-size: 0.85rem; }
.meta-row__name small { color: var(--text-muted, #9aa7bb); font-size: 0.72rem; }
.meta-row__rate { display: flex; align-items: center; gap: 0.5rem; }
.meta-row__bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.meta-row__bar span { display: block; height: 100%; background: #7dd3fc; }
.meta-cluster--success .meta-row__bar span, .meta-cluster--success .meta-row__rate b { background: #6ee7a8; color: #6ee7a8; }
.meta-cluster--info .meta-row__rate b { color: #7dd3fc; }
.meta-cluster--warning .meta-row__bar span { background: #fcd34d; }
.meta-cluster--warning .meta-row__rate b { color: #fcd34d; }
.meta-cluster--success .meta-row__rate b { background: none; }
.meta-row__yours { color: var(--text-soft-strong, #c4d1e3); }
.meta-row__none { color: var(--text-muted, #9aa7bb); }
.meta-row__delta b { font-weight: 800; color: var(--text-muted, #9aa7bb); }
.meta-row__delta b.is-up { color: #6ee7a8; }
.meta-row__delta b.is-down { color: #fca5a5; }
.meta-row__confidence { font-size: 0.72rem; color: var(--text-muted, #9aa7bb); }
@media (max-width: 767.98px) {
    .meta-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.7rem; padding: 0.6rem 0.9rem; }
    .meta-row__name { grid-column: 1 / -1; }
    .meta-row__rate { grid-column: 1 / -1; }
}

/* record and rates of a preview card never wrap */
.matchup-mobile-metric > span:not(.matchup-mobile-metric-label), .matchup-mobile-metric > strong { white-space: nowrap; }

/* ---------- the header as in the design: colors beside the name, actions as pills that keep their size ---------- */
.deck-hero-shell .card__top { align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.deck-hero-shell .deck-hero-pills { display: flex; align-items: center; gap: 0.3rem; margin: 0 !important; }
.deck-hero-shell .deck-hero-pills .color-pill { width: 1.7rem; height: 1.7rem; }
.deck-hero-shell .app-chip--format { background: #2a1c52; color: #fff; }
.deck-hero-shell .app-chip-row { margin-top: 0.55rem; }
.deck-actions-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.deck-actions-grid > .deck-action-button,
.deck-actions-grid > .deck-action-form { flex: 0 0 auto; }
.deck-actions-grid .deck-action-button { width: auto; min-height: 2.9rem; padding: 0 1.25rem; white-space: nowrap; }
.deck-section-rail { width: 220px; }
@media (max-width: 767.98px) {
    .deck-actions-grid .deck-action-button { padding: 0 0.9rem; }
}
/* the actions are a row under the header card, not a part of it */
.deck-actions-row { margin-top: 0.75rem; }
.deck-actions-row .deck-actions-panel { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 992px) {
    .deck-hero-shell { grid-template-areas: "back back" "top stats"; }
}

/* ---------- the sections, as in the design: the rail is its own card, the content sits on the page, flat panels and tiles ---------- */
.deck-tab-shell.deck-section-shell { gap: 16px; padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
.deck-section-shell .deck-section-rail { align-self: flex-start; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: #171220; }
.deck-section-shell .deck-section-rail-title { padding: 4px 10px 8px; margin: 0; font-size: 0.68rem; letter-spacing: 0.08em; }
.deck-section-shell #analysisTabs.deck-section-nav { gap: 2px; }
.deck-section-shell #analysisTabs.deck-section-nav .nav-link.deck-section-nav-link { padding: 0.55rem 0.65rem; border-radius: 12px; font-size: 0.84rem; }
.deck-section-shell #analysisTabs.deck-section-nav .nav-link.deck-section-nav-link.active { background: #2a1c52; }
.deck-section-shell .deck-section-content { padding: 0; }
.deck-section-content > .tab-pane::before { display: block; margin: 0 0 14px; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.deck-section-content > #overview::before { content: "Overview"; }
.deck-section-content > #lands::before { content: "Mana"; }
.deck-section-content > #meta-matchups::before { content: "Meta"; }
.deck-section-content > #tags::before { content: "Match tags"; }
.deck-section-content > #mulligan::before { content: "Mulligans"; }
.deck-section-content > #sideboard-study::before { content: "Sideboard"; }
.deck-section-content > #charts::before { content: "Charts"; }
.deck-section-content > #decklist::before { content: "Decklist"; }
.deck-section-content .row, .deck-section-content .row.g-4, .deck-section-content .row.g-3 { --bs-gutter-x: 14px; --bs-gutter-y: 14px; }

.deck-section-content .analytics-panel { padding: 18px; border-radius: 16px; background: #171220; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none; }
.deck-section-content .analytics-panel-header { margin-bottom: 10px; }
.deck-section-content .analytics-panel-heading__icon, .deck-section-content .analytics-metric-icon { display: none; }
.deck-section-content .analytics-panel-title { margin: 0; font-size: 0.95rem; font-weight: 800; }
.deck-section-content .analytics-panel-subtitle { font-size: 0.78rem; color: #9aa7bb; }
.deck-section-content .analytics-metric-grid { gap: 10px; }
.deck-section-content .analytics-metric-card,
.deck-section-content .analytics-depth-card,
.deck-section-content .analytics-duel-card,
.deck-section-content .analytics-reason-card { padding: 12px; border: 0; border-radius: 12px; background: #110d18; }
.deck-section-content .analytics-metric-card { gap: 2px; }
.deck-section-content .analytics-metric-label { margin: 0; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; color: #9aa7bb; }
.deck-section-content .analytics-metric-value, .deck-section-content .analytics-duel-value { font-size: 1.4rem; font-weight: 800; }
.deck-section-content .analytics-metric-meta { margin: 0; font-size: 0.72rem; color: #9aa7bb; }
.deck-section-content .analytics-status-badge, .deck-section-content .analytics-inline-stat { background: transparent; padding: 0; font-size: 0.78rem; font-weight: 600; color: #c4d1e3; }
.deck-section-content .analytics-banner { padding: 10px 14px; border: 0; border-radius: 12px; font-size: 0.82rem; font-weight: 700; }
.deck-section-content .analytics-banner > i { display: none; }
.deck-section-content .analytics-banner-success { background: #1f2a2a; color: #6ee7a8; }
.deck-section-content .analytics-banner-warning { background: #2e2420; color: #fcd34d; }
.deck-section-content .analytics-banner-danger { background: #2e1b20; color: #fca5a5; }
.deck-section-content .analytics-banner-info { background: #1b2233; color: #7dd3fc; }
.deck-section-content .analytics-chip { padding: 0.3rem 0.7rem; border: 0; background: #110d18; font-size: 0.74rem; color: #fff; }
.deck-section-content .analytics-chip-success { background: rgba(110, 231, 168, 0.15); color: #6ee7a8; }
.deck-section-content .analytics-progress-bar { height: 8px; background: rgba(255, 255, 255, 0.08); }
.deck-section-content .analytics-progress-bar .progress-bar { background: #d998ff !important; }
.deck-section-content .analytics-progress-bar .progress-bar strong { display: none; }
.deck-section-content .analytics-stack--bars { gap: 10px; }
.deck-section-content .analytics-stack--bars .analytics-progress-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 28px; align-items: center; gap: 10px; font-size: 0.82rem; }
.deck-section-content .analytics-stack--bars .analytics-progress-head { display: contents; }
.deck-section-content .analytics-stack--bars .analytics-progress-head > span:first-child { grid-column: 1; font-weight: 400 !important; color: #c4d1e3; }
.deck-section-content .analytics-stack--bars .analytics-progress-head > span:first-child i { display: none; }
.deck-section-content .analytics-stack--bars .analytics-progress-head > .analytics-inline-stat { grid-column: 3; grid-row: 1; justify-self: end; font-weight: 800; color: #fff; }
.deck-section-content .analytics-stack--bars .analytics-progress-row > .progress { grid-column: 2; grid-row: 1; }
.deck-section-content .analytics-list-item { padding: 10px 12px; border: 0; border-radius: 12px; background: #110d18; }

/* the shortcuts at the top of Overview and the matchup snapshot */
.deck-section-content .dashboard-quick-grid { gap: 12px; }
.deck-section-content .dashboard-quick-card { min-height: 0; padding: 14px 18px; border-radius: 16px; background: #171220; }
.deck-section-content .dashboard-quick-card__icon { display: none; }
.deck-section-content .dashboard-quick-card__body strong { font-size: 0.95rem; }
.deck-section-content .dashboard-quick-card__body span { font-size: 0.78rem; color: #9aa7bb; }
.deck-section-content .dashboard-quick-card::after { content: "\2192"; margin-left: auto; font-size: 1.2rem; color: #fff; }
.deck-section-content .dashboard-quick-card--success { border-color: rgba(110, 231, 168, 0.45); background: #121d1b; }
.deck-section-content .dashboard-quick-card--info { border-color: rgba(252, 211, 77, 0.4); background: #1c1710; }
.deck-section-content .dashboard-quick-card--primary { border-color: rgba(143, 92, 255, 0.5); background: #1a1430; }
.deck-section-content .deck-matchup-snapshot { padding: 18px; border-radius: 16px; background: #171220; border: 1px solid rgba(255, 255, 255, 0.08); }
.deck-section-content .deck-matchup-snapshot__head { margin-bottom: 10px; }
.deck-section-content .deck-matchup-snapshot__title { font-size: 0.95rem; font-weight: 800; }
.deck-section-content .deck-matchup-snapshot__hint { font-size: 0.75rem; color: #9aa7bb; }
.deck-section-content .deck-matchup-focus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.deck-section-content .deck-matchup-focus-grid .dashboard-summary-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border: 0; border-radius: 12px; box-shadow: none; }
.ms-tile__text { display: flex; flex-direction: column; min-width: 0; }
.ms-tile__label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.ms-tile__name { font-size: 0.9rem; font-weight: 700; color: #fff; }
.ms-tile__rate { font-size: 1.4rem; font-weight: 800; }
.dashboard-summary-card--best-matchup { background: #1f2a2a !important; }
.dashboard-summary-card--best-matchup .ms-tile__label, .dashboard-summary-card--best-matchup .ms-tile__rate { color: #6ee7a8; }
.dashboard-summary-card--worst-matchup { background: #2e2420 !important; }
.dashboard-summary-card--worst-matchup .ms-tile__label, .dashboard-summary-card--worst-matchup .ms-tile__rate { color: #fcd34d; }
@media (max-width: 767.98px) {
    .deck-section-content .deck-matchup-focus-grid { grid-template-columns: 1fr; }
    .deck-section-content > .tab-pane::before { display: none; }
}
.deck-section-content .deck-action-strip { margin-bottom: 14px !important; }
.deck-section-content .deck-matchup-snapshot { margin-bottom: 14px !important; }
.deck-section-content .analytics-metric-grid-tight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .deck-section-content .analytics-metric-grid-tight { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Mana: the split bar, the rows, the fixing tiles and the groups of lands */
.land-split { display: flex; height: 34px; border-radius: 10px; overflow: hidden; font-size: 0.82rem; font-weight: 800; color: #111; margin-bottom: 0.75rem; }
.land-split > span { display: grid; place-items: center; white-space: nowrap; }
.land-split__tapped { background: #fca5a5; }
.land-split__untapped { flex: 1; background: #6ee8a8; }
.land-row { display: flex; justify-content: space-between; margin-bottom: 0.6rem; font-size: 0.82rem; }
.land-row span { color: #9aa7bb; }
.land-names { margin: -0.3rem 0 0.7rem; font-size: 0.72rem; color: #9aa7bb; }
.deck-section-content .analytics-metric-grid--fixing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.deck-section-content .analytics-metric-grid--fixing .analytics-metric-card { display: flex; flex-direction: column-reverse; padding: 10px; }
.deck-section-content .analytics-metric-grid--fixing .analytics-metric-label { font-size: 0.7rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.deck-section-content .analytics-metric-grid--fixing .analytics-metric-value { font-size: 1.25rem; }
.land-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.land-group { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: #110d18; }
.land-group > b { font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: #d998ff; }
.land-group > span { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; }
@media (max-width: 767.98px) { .land-groups { grid-template-columns: 1fr; } }
/* a global rule paints every div and span with !important: the greys of the design need it too */
#analysisTabsContent .analytics-metric-label, #analysisTabsContent .analytics-metric-meta, #analysisTabsContent .analytics-panel-subtitle, #analysisTabsContent .dashboard-quick-card__body span, #analysisTabsContent .deck-matchup-snapshot__hint { color: #9aa7bb !important; }
#analysisTabsContent .analytics-banner-success, #analysisTabsContent .analytics-banner-success span { color: #6ee7a8 !important; }
#analysisTabsContent .analytics-banner-warning, #analysisTabsContent .analytics-banner-warning span { color: #fcd34d !important; }
#analysisTabsContent .analytics-banner-danger, #analysisTabsContent .analytics-banner-danger span { color: #fca5a5 !important; }
#analysisTabsContent .analytics-banner-info, #analysisTabsContent .analytics-banner-info span { color: #7dd3fc !important; }
#analysisTabsContent .analytics-chip-success { color: #6ee7a8 !important; }
#analysisTabsContent .analytics-stack--bars .analytics-progress-head > span:first-child { color: #c4d1e3 !important; }
#analysisTabsContent .land-row span { color: #9aa7bb !important; }
#analysisTabsContent .land-names { color: #9aa7bb !important; }
#analysisTabsContent .land-group > b { color: #d998ff !important; }
#analysisTabsContent .land-split__tapped, #analysisTabsContent .land-split__untapped { color: #111 !important; }
#analysisTabsContent .ms-tile__label, #analysisTabsContent .ms-tile__rate { color: inherit !important; }
#analysisTabsContent .dashboard-summary-card--best-matchup .ms-tile__label, #analysisTabsContent .dashboard-summary-card--best-matchup .ms-tile__rate { color: #6ee7a8 !important; }
#analysisTabsContent .dashboard-summary-card--worst-matchup .ms-tile__label, #analysisTabsContent .dashboard-summary-card--worst-matchup .ms-tile__rate { color: #fcd34d !important; }

/* Mulligans */
#analysisTabsContent .mull-amber { color: #fcd34d !important; }
.mull-duel { display: grid; grid-template-columns: 1fr 1fr 150px; gap: 10px; }
.mull-duel__card { padding: 14px; border-radius: 12px; background: #110d18; }
.mull-duel__card--keep { background: rgba(110, 231, 168, 0.08); }
.mull-duel__card--after { background: rgba(252, 211, 77, 0.08); }
#analysisTabsContent .mull-duel__label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #9aa7bb !important; }
.mull-duel__value { font-size: 1.9rem; font-weight: 800; line-height: 1.2; }
#analysisTabsContent .mull-duel__meta { font-size: 0.75rem; color: #9aa7bb !important; }
#analysisTabsContent .mull-duel__card--keep .mull-duel__label, #analysisTabsContent .mull-duel__card--keep .mull-duel__value { color: #6ee7a8 !important; }
#analysisTabsContent .mull-duel__card--after .mull-duel__label, #analysisTabsContent .mull-duel__card--after .mull-duel__value { color: #fcd34d !important; }
.mull-split { display: flex; flex-direction: column; gap: 14px; }
.mull-split__row { display: flex; flex-direction: column; gap: 6px; }
.mull-split__head { display: flex; justify-content: space-between; font-size: 0.82rem; }
#analysisTabsContent .mull-split__note { font-size: 0.75rem; color: #9aa7bb !important; }
.mull-bar { display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.mull-bar > span { display: block; height: 100%; background: #d998ff; }
.mull-bar--reason { flex: 1; height: 10px; }
.mull-bar--reason > span { background: #8f5cff; }
.mull-depth { display: flex; flex-direction: column; gap: 10px; }
.mull-depth__row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 10px 12px; border-radius: 12px; background: #110d18; font-size: 0.82rem; }
.mull-depth__row b { display: block; }
.mull-depth__rate b { display: inline; }
#analysisTabsContent .mull-depth__row small { display: block; font-size: 0.7rem; color: #9aa7bb !important; }
.mull-depth__rate { font-size: 0.75rem; white-space: nowrap; }
#analysisTabsContent .mull-depth .is-good, #analysisTabsContent .mull-depth__note.is-good { color: #6ee7a8 !important; }
#analysisTabsContent .mull-depth .is-mid, #analysisTabsContent .mull-depth__note.is-mid { color: #fcd34d !important; }
#analysisTabsContent .mull-depth .is-bad, #analysisTabsContent .mull-depth__note.is-bad { color: #fca5a5 !important; }
.mull-depth__note { margin-top: 10px; font-size: 0.75rem; }
.mull-reasons { display: flex; flex-direction: column; gap: 8px; }
.mull-reasons__row { display: flex; align-items: center; gap: 12px; font-size: 0.82rem; }
.mull-reasons__row > span:first-child { width: 140px; flex: none; }
.mull-reasons__row > b { width: 28px; text-align: right; }
@media (max-width: 767.98px) {
    .mull-duel { grid-template-columns: 1fr 1fr; }
    .mull-duel__card:last-child { grid-column: 1 / -1; }
    .mull-reasons__row > span:first-child { width: 100px; }
}

/* Meta: the heading is the title of the meta, the range switch sits on its right, four number cards, a small note */
.deck-section-content > #meta-matchups::before { display: none; }
#meta-matchups { position: relative; }
#meta-matchups #metaMatchupsRangeToggle { position: absolute; top: 0; right: 0; margin: 0 !important; padding: 3px; gap: 2px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: #171220; }
#meta-matchups #metaMatchupsRangeToggle .btn { min-height: 0; padding: 0.4rem 0.9rem; border: 0 !important; border-radius: 9px !important; background: transparent; color: #c4d1e3; font-size: 0.8rem; font-weight: 700; }
#meta-matchups #metaMatchupsRangeToggle .btn.active { background: #2a1c52; color: #fff; }
.meta-head { padding-right: 280px; margin-bottom: 14px; }
.meta-head__title { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; }
.meta-head__counts { margin: 0.35rem 0 0; font-size: 0.85rem; color: #c4d1e3 !important; }
.meta-head__counts b.is-fav { color: #6ee7a8 !important; }
.meta-head__counts b.is-even { color: #7dd3fc !important; }
.meta-head__counts b.is-risk { color: #fcd34d !important; }
.meta-head__asof { margin: 0.35rem 0 0; font-size: 0.78rem; color: #9aa7bb !important; }
#meta-matchups-content .meta-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#meta-matchups-content .meta-kpis .analytics-metric-card { padding: 16px; border-radius: 16px; background: #171220; border: 1px solid rgba(255, 255, 255, 0.08); gap: 6px; }
#meta-matchups-content .meta-kpis .analytics-metric-label { font-size: 0.7rem; }
#meta-matchups-content .meta-kpis .analytics-metric-value { font-size: 2.1rem; line-height: 1.1; }
#meta-matchups-content .meta-kpis .analytics-metric-value .text-muted { color: #fff !important; font-size: 1em !important; }
#meta-matchups-content .meta-kpis .analytics-duel-card-success .analytics-metric-value { color: #6ee7a8 !important; }
#meta-matchups-content .meta-kpis .analytics-duel-card-warning .analytics-metric-value { color: #fcd34d !important; }
#meta-matchups-content .meta-kpis .analytics-metric-meta { font-size: 0.8rem; }
.meta-note { font-size: 0.75rem; line-height: 1.5; color: #9aa7bb !important; }
@media (max-width: 991.98px) { .meta-head { padding-right: 0; } #meta-matchups #metaMatchupsRangeToggle { position: static; display: inline-flex; margin: 0 0 12px !important; } #meta-matchups-content .meta-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Charts: plain bars, as in the design */
.cx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.cx-panel .analytics-panel-title { display: block; }
.cx-wide { margin-bottom: 14px; }
.cx-columns { display: flex; align-items: flex-end; gap: 10px; height: 130px; margin-top: 12px; }
.cx-columns--pairs { gap: 14px; }
.cx-column { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.cx-column__n { font-size: 0.7rem; font-weight: 700; color: #c4d1e3; min-height: 1em; }
.cx-column__bar { width: 100%; border-radius: 4px 4px 0 0; background: #8f5cff; }
.cx-column__label { font-size: 0.66rem; color: #9aa7bb !important; }
.cx-column__pair { display: flex; align-items: flex-end; gap: 3px; width: 100%; }
.cx-column__pair .cx-column__bar { flex: 1; }
.cx-column__bar--base { background: rgba(143, 92, 255, 0.4); }
.cx-column__bar--eff { background: #6ee7a8; }
.cx-stack { display: flex; height: 22px; margin-top: 16px; border-radius: 99px; overflow: hidden; }
.cx-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 0.78rem; }
.cx-legend i { font-style: normal; }
.cx-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.cx-row { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; }
.cx-label { width: 80px; flex: none; color: #c4d1e3 !important; }
.cx-track { flex: 1; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.cx-track > span { display: block; height: 100%; }
.cx-row > b { width: 26px; text-align: right; }
.cx-pip { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-size: 0.7rem; font-weight: 800; color: #111 !important; }
.cx-pip--lg { width: 28px; height: 28px; font-size: 0.75rem; }
.cx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.cx-tile { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: #110d18; font-size: 0.82rem; }
.cx-head { display: flex; justify-content: space-between; align-items: baseline; }
.cx-head__delta { font-size: 0.78rem; font-weight: 800; color: #6ee7a8 !important; }
.cx-rows--sources { gap: 12px; }
.cx-source { display: grid; grid-template-columns: 32px minmax(0, 1fr) 150px; gap: 12px; align-items: center; }
.cx-gauge { position: relative; height: 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); }
.cx-gauge__have { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.cx-gauge__need { position: absolute; top: -4px; bottom: -4px; width: 3px; background: #fff; }
.cx-source__text { font-size: 0.78rem; color: #c4d1e3 !important; }
@media (max-width: 767.98px) {
    .cx-grid { grid-template-columns: 1fr; }
    .cx-source { grid-template-columns: 28px minmax(0, 1fr); }
    .cx-source__text { grid-column: 1 / -1; }
}
.cx-tile em { font-style: normal; }

/* Sideboard study */
.deck-section-content > #sideboard-study::before { display: none; }
.study-head { margin-bottom: 14px; }
.study-head__title { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; }
.study-head__text { margin: 0.3rem 0 0; font-size: 0.85rem; color: #9aa7bb !important; }
.study-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.study-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; background: #171220; border: 1px solid rgba(255, 255, 255, 0.08); }
#analysisTabsContent .study-kpi .analytics-metric-value { font-size: 1.6rem; }
.study-coach { margin-bottom: 14px; padding: 18px; border-radius: 16px; background: linear-gradient(160deg, #2a1c52, #171220 70%); border: 1px solid rgba(143, 92, 255, 0.55); }
.study-coach .analytics-panel-title { display: block; }
.study-coach__rows { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.study-coach__row { padding: 10px 14px; border-radius: 12px; background: #110d18; font-size: 0.85rem; }
.study-coach__row b { color: #d998ff !important; margin-right: 0.25rem; }
#analysisTabsContent .study-coach__row b { color: #d998ff !important; }
.study-coach__row--note { color: #c4d1e3 !important; font-size: 0.8rem; }
.study-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.study-wide { margin-bottom: 14px; }
.study-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.study-item { display: flex; align-items: center; gap: 0.75rem; padding: 10px 12px; border-radius: 12px; background: #110d18; font-size: 0.85rem; }
.study-item > b { flex: 1; min-width: 0; }
.study-item--wrap > b { flex: 0 0 38%; }
.study-item__meta { font-size: 0.7rem; color: #9aa7bb !important; white-space: nowrap; }
.study-item--wrap .study-item__meta { white-space: normal; font-size: 0.8rem; color: #c4d1e3 !important; }
.study-item__meta--end { flex: 1; text-align: left; }
.study-item__count { font-weight: 800; white-space: nowrap; }
#analysisTabsContent .study-item__count.is-good, #analysisTabsContent .study-note .is-good, #analysisTabsContent .study-note em.is-good { color: #6ee7a8 !important; }
#analysisTabsContent .study-item__count.is-bad, #analysisTabsContent .study-note em.is-bad { color: #fca5a5 !important; }
.study-note { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: #110d18; font-size: 0.8rem; }
.study-note > b { font-size: 0.85rem; }
.study-note small { font-weight: 400; color: #9aa7bb; margin-left: 0.4rem; }
.study-note em { font-style: normal; font-weight: 700; }
.study-tagged { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.study-tagged__row { display: grid; grid-template-columns: minmax(0, 1.4fr) 90px 130px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 0.82rem; }
.study-tagged__row > span:not(.cx-track) { color: #c4d1e3 !important; }
.study-tagged__share { text-align: right; }
.study-more { margin-top: 4px; }
.study-more > summary { cursor: pointer; margin-bottom: 14px; font-size: 0.85rem; font-weight: 800; color: #d998ff; }
@media (max-width: 991.98px) {
    .study-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .study-grid { grid-template-columns: 1fr; }
    .study-tagged__row { grid-template-columns: minmax(0, 1fr) auto; }
    .study-tagged__row > .cx-track { grid-column: 1 / -1; grid-row: 2; }
    .study-item { flex-wrap: wrap; }
    .study-item--wrap > b { flex: 1 0 100%; }
}

/* Matchups: the title on top, six small number tiles, a search of its own, stacked buttons in the table */
.matchups-head { margin: 0 0 14px; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; }
.matchups-head small { font-size: 0.85rem; font-weight: 500; color: #9aa7bb; }
.matchups-tools { margin-bottom: 14px; }
.matchups-tools .matchup-search { min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: #110d18; color: #fff; font-size: 0.9rem; }
.matchups-analysis .matchup-summary-card { padding: 12px 14px; border-radius: 14px; background: #171220; border: 1px solid rgba(255, 255, 255, 0.08); }
.matchups-analysis .matchup-summary-title { white-space: nowrap; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; color: #9aa7bb !important; }
.matchups-analysis .matchup-summary-value { font-size: 1.35rem; font-weight: 800; }
.matchups-analysis .matchup-summary-label { font-size: 0.7rem; color: #9aa7bb !important; }
#analysisTabsContent .matchups-analysis .matchup-action-stack { flex-direction: column !important; align-items: stretch; gap: 4px; min-width: 84px; margin: 0 auto; }
#analysisTabsContent .matchups-analysis .matchup-action-stack .btn { width: 100%; text-align: center; }
.matchups-analysis .card.glass-effect { margin-bottom: 14px; }
#analysisTabsContent .matchups-tools .matchup-search { width: 100% !important; max-width: none !important; }
#analysisTabsContent .matchups-analysis .matchup-action-stack .btn { min-height: 0; padding: 0.22rem 0.6rem; line-height: 1.3; font-size: 0.72rem; font-weight: 800; border-radius: 8px; }
#analysisTabsContent .matchups-analysis .matchup-action-stack .btn:first-child { background: #fff; border-color: #fff; color: #111 !important; }
#analysisTabsContent .matchups-analysis .matchup-action-stack .btn:not(:first-child) { background: #2a1c52; border-color: #2a1c52; color: #d998ff !important; }
#analysisTabsContent .matchups-analysis .matchup-action-stack .text-muted, #analysisTabsContent .matchups-analysis .matchup-action-stack small { font-size: 0.68rem; text-align: center; }
#analysisTabsContent .matchups-analysis .matchups-table-full tbody td { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
#analysisTabsContent .matchups-analysis .matchup-action-stack .btn { padding: 0.22rem 0.6rem !important; }

/* Decklist: a header with the switches, the lists beside a column of numbers, small headings in the lists */
.deck-section-content > #decklist::before { display: none; }
.dl-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.dl-head__title { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; }
.dl-head__text { margin: 0.3rem 0 0; font-size: 0.85rem; color: #9aa7bb !important; }
.dl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; align-items: start; }
.dl-main { min-width: 0; }
.dl-aside { display: flex; flex-direction: column; gap: 14px; }
.dlx-card { padding: 14px 16px; border-radius: 16px; background: #171220; border: 1px solid rgba(255, 255, 255, 0.08); }
.dlx-card h6 { margin: 0 0 8px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #9aa7bb; }
.dlx-card__row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 0.85rem; }
.dlx-card__title { font-size: 0.9rem; font-weight: 700; }
.dlx-card__muted { margin-top: 4px; font-size: 0.78rem; color: #9aa7bb !important; }
.dl-pips { display: flex; gap: 6px; }
.dl-pip { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: 0.72rem; font-weight: 800; color: #111; background: #9aa7bb; }
.dl-pip--w { background: #f4ecd0; } .dl-pip--u { background: #8fb4e8; } .dl-pip--b { background: #9a9086; } .dl-pip--r { background: #e8957a; } .dl-pip--g { background: #8fc59a; }
.dl-main .decklist-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.dl-main .decklist-section-title { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.dl-main .decklist-section-title i { display: none; }
.dl-main .analytics-panel-header i { display: none; }
.dl-main .analytics-panel-title { font-size: 1.05rem; }
.dl-main .dl-row { min-height: 1.75rem; font-size: 0.85rem; }
@media (max-width: 991.98px) { .dl-layout { grid-template-columns: 1fr; } .dl-aside { flex-direction: row; flex-wrap: wrap; } .dlx-card { flex: 1 1 200px; } }

/* Match tags, under the matchups */
.tags-block { margin-top: 18px; }
.tags-block__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
.tags-block__head h2 { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; }
.tags-block__head span { font-size: 0.8rem; color: #9aa7bb !important; }
.tags-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tags-card { padding: 14px 16px; border-radius: 16px; background: #171220; border: 1px solid rgba(255, 255, 255, 0.08); }
.tags-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tags-card__top b { font-size: 0.9rem; }
.tags-card__top em { padding: 2px 10px; border-radius: 99px; background: #2c2738; font-style: normal; font-size: 0.7rem; font-weight: 800; }
.tags-card__meta { margin-top: 6px; font-size: 0.78rem; color: #9aa7bb !important; }
.tags-card__pills { display: flex; gap: 6px; margin-top: 10px; }
.tags-card__pills em { padding: 4px 11px; border-radius: 99px; background: #2c2738; font-style: normal; font-size: 0.72rem; font-weight: 800; }
.tags-card__pills em.is-win { background: rgba(110, 231, 168, 0.15); color: #6ee7a8; }
.tags-card__pills em.is-loss { background: rgba(252, 165, 165, 0.15); color: #fca5a5; }
@media (max-width: 991.98px) { .tags-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .tags-grid { grid-template-columns: 1fr; } }
/* phone: the header is the name, the chips and the two main buttons, as in the design */
@media (max-width: 767.98px) {
    .deck-hero-shell .deck-hero-stat-grid { display: none; }
}