/* COMPARE PLAYERS V1 */
.compare-page-v1{--compare-card:#0d0d10;--compare-line:#29292f;--compare-soft-line:#1f1f24;--compare-muted:#85858e;--compare-muted-2:#62626b}.compare-main-v1{padding-top:50px}.compare-hero-v1{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);gap:54px;align-items:end;padding-bottom:34px;border-bottom:1px solid var(--compare-line)}.compare-hero-copy-v1 h1{max-width:820px;margin:10px 0 16px;font-size:clamp(42px,5.2vw,70px);line-height:.97;letter-spacing:-.055em}.compare-hero-copy-v1 p{max-width:710px;margin:0;color:var(--compare-muted);font-size:14px;line-height:1.7}.compare-sample-note-v1{padding:18px 20px;border-left:2px solid var(--accent);background:#0a0a0c}.compare-sample-note-v1>span{display:block;margin-bottom:7px;color:var(--compare-muted-2);font-size:8px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.compare-sample-note-v1>strong{display:block;margin-bottom:8px;color:#fff;font-size:16px}.compare-sample-note-v1 p{margin:0;color:#74747d;font-size:11px;line-height:1.55}
.compare-search-v1{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) auto;gap:10px;align-items:end;margin:26px 0 0;padding:18px;border:1px solid var(--compare-line);background:#0a0a0c}.compare-input-card-v1{display:grid;gap:8px}.compare-player-label-v1{color:var(--compare-muted-2);font-size:8px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.compare-input-wrap-v1{position:relative}.compare-input-wrap-v1>span{position:absolute;top:50%;left:14px;transform:translateY(-50%);color:#686871;font-size:13px}.compare-input-wrap-v1 input{width:100%;height:50px;padding:0 14px 0 36px;border:1px solid #303036;outline:0;background:#08080a;color:#fff;font-size:14px}.compare-input-wrap-v1 input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,43,214,.08)}.compare-swap-v1{width:44px;height:50px;border:1px solid #303036;background:#101012;color:#8d8d96;font-size:18px}.compare-swap-v1:hover:not(:disabled){border-color:#55555e;color:#fff}.compare-run-v1{min-width:180px;height:50px;display:inline-flex;align-items:center;justify-content:space-between;gap:25px;padding:0 16px;border:1px solid var(--accent);background:var(--accent);color:#080008;font-size:10px;font-weight:900;text-transform:uppercase}.compare-run-v1:hover:not(:disabled){filter:brightness(1.06)}
.compare-progress-v1{margin-top:12px;padding:17px 18px;border:1px solid var(--compare-line);background:#0b0b0d}.compare-progress-top-v1{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:13px}.compare-progress-top-v1>div{display:grid;gap:4px}.compare-progress-top-v1 span{color:var(--compare-muted-2);font-size:8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.compare-progress-top-v1 strong{color:#d7d7dc;font-size:12px}.compare-progress-track-v1{height:4px;overflow:hidden;background:#222226}.compare-progress-fill-v1{width:0;height:100%;background:linear-gradient(90deg,#82006a,var(--accent));transition:width 260ms ease}.compare-progress-fill-v1.is-working{position:relative;overflow:hidden}.compare-progress-fill-v1.is-working:after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:compare-progress-sweep 1.2s linear infinite}@keyframes compare-progress-sweep{from{transform:translateX(-120%)}to{transform:translateX(350%)}}.compare-progress-players-v1{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:11px;border:1px solid var(--compare-soft-line);background:var(--compare-soft-line)}.compare-progress-players-v1>div{display:flex;justify-content:space-between;gap:18px;padding:10px 12px;background:#0d0d10}.compare-progress-players-v1 span{color:#62626b;font-size:8px;text-transform:uppercase}.compare-progress-players-v1 strong{color:#bdbdc4;font-size:9px}.compare-progress-players-v1 .is-ready{color:var(--success)}.compare-progress-players-v1 .is-working{color:var(--accent)}.compare-error-v1{margin-top:12px;padding:14px 16px;border-left:2px solid var(--danger);background:rgba(240,101,101,.05);color:#d99a9a;font-size:12px;line-height:1.55}
.compare-results-v1{display:grid;gap:38px;margin-top:34px}.compare-player-grid-v1{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:12px;align-items:stretch}.compare-player-card-v1{min-width:0;padding:22px;border-top:1px solid var(--accent);border-right:1px solid var(--compare-line);border-bottom:1px solid var(--compare-line);border-left:1px solid var(--compare-line);background:linear-gradient(135deg,rgba(255,43,214,.045),transparent 44%),var(--compare-card)}.compare-player-head-v1{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:15px;align-items:center}.compare-player-avatar-v1{width:64px;height:64px;object-fit:cover;background:#151518}.compare-player-copy-v1{min-width:0}.compare-player-copy-v1>span{display:block;margin-bottom:4px;color:var(--compare-muted-2);font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.compare-player-copy-v1 h2{overflow:hidden;margin:0 0 5px;color:#fff;font-size:clamp(22px,2.3vw,31px);line-height:1;letter-spacing:-.035em;text-overflow:ellipsis;white-space:nowrap}.compare-player-copy-v1 p{margin:0;color:#9a815d;font-size:11px}.compare-open-profile-v1{min-height:36px;padding:0 11px;border:1px solid #393940;background:transparent;color:#b8b8c0;font-size:8px;font-weight:850;text-transform:uppercase}.compare-open-profile-v1:hover{border-color:var(--accent);color:#fff}.compare-player-stats-v1{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:19px;border-top:1px solid var(--compare-soft-line);border-bottom:1px solid var(--compare-soft-line)}.compare-player-stats-v1>div{min-width:0;padding:13px 10px 13px 0}.compare-player-stats-v1>div+div{padding-left:13px;border-left:1px solid var(--compare-soft-line)}.compare-player-stats-v1 span{display:block;margin-bottom:6px;color:#64646d;font-size:7px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.compare-player-stats-v1 strong{display:block;overflow:hidden;color:#fff;font-size:16px;text-overflow:ellipsis;white-space:nowrap}.compare-versus-v1{display:grid;place-items:center;color:#53535c;font-size:11px;font-weight:900;letter-spacing:.1em}
.compare-section-v1{display:grid;gap:17px}.compare-section-heading-v1{display:flex;align-items:end;justify-content:space-between;gap:28px;padding-bottom:16px;border-bottom:1px solid var(--compare-line)}.compare-section-heading-v1 h2{margin:6px 0 0;color:#fff;font-size:clamp(25px,2.7vw,36px);line-height:1.05;letter-spacing:-.04em}.compare-section-heading-v1>p{max-width:480px;margin:0;color:#777780;font-size:11px;line-height:1.55;text-align:right}.compare-difference-list-v1{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--compare-line);background:var(--compare-line);gap:1px}.compare-difference-v1{min-height:128px;padding:17px 18px;background:var(--compare-card)}.compare-difference-v1>span{display:block;margin-bottom:11px;color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.compare-difference-v1 strong{color:#efeff2;font-size:14px;line-height:1.45}
.compare-metric-table-v1{border:1px solid var(--compare-line)}.compare-metric-row-v1{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(0,1fr) minmax(0,1fr)}.compare-metric-row-v1+.compare-metric-row-v1{border-top:1px solid var(--compare-soft-line)}.compare-metric-row-v1>div{min-width:0;padding:14px 16px}.compare-metric-row-v1>div+div{border-left:1px solid var(--compare-soft-line)}.compare-metric-label-v1{display:flex;flex-direction:column;justify-content:center}.compare-metric-label-v1 strong{color:#d2d2d8;font-size:11px}.compare-metric-label-v1 span{margin-top:4px;color:#5f5f68;font-size:8px}.compare-metric-value-v1{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.compare-metric-value-v1>span{overflow:hidden;color:#707079;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.compare-metric-value-v1 strong{color:#fff;font-size:20px;font-variant-numeric:tabular-nums}.compare-metric-value-v1.is-lower-better strong{color:var(--success)}
.compare-stability-v1{display:grid;gap:9px}.compare-stability-row-v1{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1fr);gap:13px;align-items:center;padding:11px 0;border-bottom:1px solid var(--compare-soft-line)}.compare-stability-row-v1>strong{color:#8e8e97;font-size:10px;text-transform:uppercase}.compare-stability-player-v1{display:grid;grid-template-columns:minmax(90px,auto) 48px minmax(80px,1fr);gap:10px;align-items:center}.compare-stability-player-v1>span{overflow:hidden;color:#9b9ba3;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.compare-stability-player-v1>strong{color:#fff;font-size:13px;text-align:right}.compare-stability-track-v1{height:5px;overflow:hidden;border-radius:999px;background:#242429}.compare-stability-fill-v1{height:100%;border-radius:inherit;background:linear-gradient(90deg,#85006c,var(--accent))}
.compare-two-columns-v1{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compare-weakness-card-v1,.compare-lessons-card-v1{min-width:0;padding:20px;border:1px solid var(--compare-line);background:var(--compare-card)}.compare-card-player-v1{display:flex;align-items:center;gap:9px;margin-bottom:17px;padding-bottom:12px;border-bottom:1px solid var(--compare-soft-line)}.compare-card-player-v1 img{width:30px;height:30px;object-fit:cover}.compare-card-player-v1 strong{overflow:hidden;color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.compare-priority-v1{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;padding:13px 0;border-bottom:1px solid var(--compare-soft-line)}.compare-priority-v1>span{color:var(--accent);font-size:9px;font-weight:900}.compare-priority-v1 h3{margin:0 0 5px;color:#ededf0;font-size:16px}.compare-priority-v1 p{margin:0;color:#777780;font-size:9px;line-height:1.5}.compare-phase-v1{margin-top:14px;padding:13px 14px;background:#101013}.compare-phase-v1 span{display:block;margin-bottom:5px;color:#64646d;font-size:7px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.compare-phase-v1 strong{color:#fff;font-size:14px}.compare-phase-v1 p{margin:5px 0 0;color:#74747d;font-size:9px;line-height:1.45}.compare-lesson-v1{padding:13px 0;border-bottom:1px solid var(--compare-soft-line)}.compare-lesson-v1:last-child{border-bottom:0}.compare-lesson-v1>span{display:block;margin-bottom:5px;color:var(--accent);font-size:7px;font-weight:900;text-transform:uppercase}.compare-lesson-v1 strong{display:block;color:#e7e7ea;font-size:13px;line-height:1.4}.compare-lesson-v1 p{margin:5px 0 0;color:#6e6e77;font-size:9px;line-height:1.45}
.compare-footer-note-v1{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;padding:26px 28px;border-top:1px solid rgba(255,43,214,.45);border-bottom:1px solid var(--compare-line);background:linear-gradient(110deg,rgba(255,43,214,.05),transparent 44%),#0a0a0c}.compare-footer-note-v1 h2{margin:6px 0 8px;color:#fff;font-size:25px}.compare-footer-note-v1 p{max-width:820px;margin:0;color:#777780;font-size:11px;line-height:1.6}.compare-again-v1{min-width:210px;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 14px;border:1px solid #393940;background:#111114;color:#efeff2;font-size:9px;font-weight:850;text-transform:uppercase}.compare-again-v1 span{color:var(--accent);font-size:16px}
@media(max-width:1050px){.compare-search-v1{grid-template-columns:1fr 44px 1fr}.compare-run-v1{grid-column:1/-1;width:100%}.compare-difference-list-v1{grid-template-columns:1fr}}@media(max-width:850px){.compare-hero-v1,.compare-two-columns-v1{grid-template-columns:1fr}.compare-player-grid-v1{grid-template-columns:1fr}.compare-versus-v1{min-height:30px}.compare-section-heading-v1{align-items:flex-start;flex-direction:column;gap:8px}.compare-section-heading-v1>p{text-align:left}.compare-metric-row-v1{grid-template-columns:150px 1fr 1fr}.compare-stability-row-v1{grid-template-columns:70px 1fr}.compare-stability-player-v1:nth-child(3){grid-column:2}.compare-footer-note-v1{grid-template-columns:1fr}}@media(max-width:620px){.compare-main-v1{padding-top:34px}.compare-search-v1{grid-template-columns:1fr}.compare-swap-v1{justify-self:center;transform:rotate(90deg)}.compare-run-v1{grid-column:auto}.compare-progress-players-v1{grid-template-columns:1fr}.compare-player-head-v1{grid-template-columns:52px minmax(0,1fr)}.compare-player-avatar-v1{width:52px;height:52px}.compare-open-profile-v1{grid-column:1/-1;width:100%}.compare-player-stats-v1{grid-template-columns:1fr}.compare-player-stats-v1>div+div{padding-left:0;border-top:1px solid var(--compare-soft-line);border-left:0}.compare-metric-row-v1{grid-template-columns:1fr 1fr}.compare-metric-label-v1{grid-column:1/-1;border-bottom:1px solid var(--compare-soft-line)}.compare-metric-row-v1>div:nth-child(2){border-left:0}.compare-stability-row-v1{grid-template-columns:1fr;gap:8px}.compare-stability-player-v1,.compare-stability-player-v1:nth-child(3){grid-column:auto}.compare-footer-note-v1{padding:22px 18px}.compare-again-v1{width:100%}}

/* =========================================================
   COMPARE PLAYERS V1.1 — CLEARER HEAD-TO-HEAD COMPARISON
   2026-08-29
   Decision Quality + Position Stability only.
   ========================================================= */

.compare-page-v1 {
    --compare-win: #74c88a;
    --compare-win-soft: rgba(116, 200, 138, 0.075);
    --compare-loss: #f06565;
    --compare-loss-soft: rgba(240, 101, 101, 0.07);
    --compare-tie: #f2f2f4;
}

/* ---------- shared player headers inside comparison sections ---------- */

.compare-head-to-head-header-v11 {
    display: grid;
    grid-template-columns:
        minmax(230px, .85fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    border: 1px solid var(--compare-line);
    border-bottom: 0;

    background: #0b0b0d;
}

.compare-head-to-head-header-v11 > div {
    min-width: 0;
    padding: 14px 16px;
}

.compare-head-to-head-header-v11 > div + div {
    border-left: 1px solid var(--compare-soft-line);
}

.compare-head-to-head-header-v11 .compare-head-label-v11 {
    display: flex;
    align-items: center;

    color: #66666f;

    font-size: 8px;
    font-weight: 850;
    letter-spacing: .085em;
    text-transform: uppercase;
}

.compare-head-player-v11 {
    display: flex;
    align-items: center;
    gap: 11px;
}

.compare-head-player-v11 img {
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    object-fit: cover;
    background: #151518;
}

.compare-head-player-copy-v11 {
    min-width: 0;
}

.compare-head-player-copy-v11 span {
    display: block;

    margin-bottom: 3px;

    color: #62626b;

    font-size: 7px;
    font-weight: 820;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.compare-head-player-copy-v11 strong {
    display: block;
    overflow: hidden;

    color: #f5f5f7;

    font-size: 15px;
    font-weight: 760;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-head-player-copy-v11 small {
    display: block;

    margin-top: 3px;

    color: #8e7958;

    font-size: 8px;
}


/* =========================================================
   DECISION QUALITY V1.1
   ========================================================= */

.compare-metric-table-v1 {
    border-top: 0;
}

.compare-metric-row-v1 {
    min-height: 72px;
}

.compare-metric-row-v1 > div {
    display: flex;
    justify-content: center;
    flex-direction: column;

    padding-top: 15px;
    padding-bottom: 15px;
}

.compare-metric-label-v1 strong {
    font-size: 12px;
}

.compare-metric-label-v1 span {
    max-width: 235px;

    font-size: 8px;
    line-height: 1.45;
}

.compare-metric-value-v1 {
    position: relative;

    align-items: center;
    justify-content: center;

    text-align: center;

    transition:
        background 140ms ease,
        box-shadow 140ms ease;
}

/* Player nicknames now live in the header; do not repeat them in every row. */
.compare-metric-value-v1 > span {
    display: none;
}

.compare-metric-value-v1 strong {
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 780;
    line-height: 1;
}

.compare-metric-value-v1::after {
    display: block;

    margin-top: 7px;

    color: #777780;

    font-size: 7px;
    font-weight: 850;
    letter-spacing: .075em;
    text-transform: uppercase;
}

/* Better */
.compare-metric-value-v1.is-better {
    background:
        linear-gradient(
            90deg,
            var(--compare-win-soft),
            transparent 78%
        );

    box-shadow:
        inset 2px 0 0 rgba(116, 200, 138, .68);
}

.compare-metric-value-v1.is-better strong {
    color: var(--compare-win);
}

.compare-metric-value-v1.is-better::after {
    content: "Better";
    color: var(--compare-win);
}

/* Worse */
.compare-metric-value-v1.is-worse {
    background:
        linear-gradient(
            90deg,
            var(--compare-loss-soft),
            transparent 78%
        );

    box-shadow:
        inset 2px 0 0 rgba(240, 101, 101, .62);
}

.compare-metric-value-v1.is-worse strong {
    color: var(--compare-loss);
}

.compare-metric-value-v1.is-worse::after {
    content: "Worse";
    color: var(--compare-loss);
}

/* Equal / unavailable */
.compare-metric-value-v1.is-equal strong,
.compare-metric-value-v1.is-neutral strong {
    color: var(--compare-tie);
}

.compare-metric-value-v1.is-equal::after {
    content: "Equal";
    color: #8c8c95;
}

.compare-metric-value-v1.is-neutral::after {
    content: "";
}


/* =========================================================
   POSITION STABILITY V1.1
   ========================================================= */

.compare-stability-v1 {
    gap: 0;

    border: 1px solid var(--compare-line);
    border-top: 0;
}

.compare-stability-row-v1 {
    display: grid;
    grid-template-columns:
        90px
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 0;
    align-items: stretch;

    min-height: 78px;
    padding: 0;

    border-bottom: 1px solid var(--compare-soft-line);
}

.compare-stability-row-v1:last-child {
    border-bottom: 0;
}

.compare-stability-row-v1 > strong {
    display: flex;
    align-items: center;

    padding: 0 14px;

    border-right: 1px solid var(--compare-soft-line);

    color: #8e8e97;

    font-size: 9px;
    letter-spacing: .04em;
}

.compare-stability-player-v1 {
    position: relative;

    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas:
        "value bar"
        "status bar";

    gap: 3px 14px;
    align-items: center;

    min-width: 0;
    padding: 14px 16px;

    transition:
        background 140ms ease,
        box-shadow 140ms ease;
}

.compare-stability-player-v1 + .compare-stability-player-v1 {
    border-left: 1px solid var(--compare-soft-line);
}

/* Nicknames are shown once in the section header. */
.compare-stability-player-v1 > span {
    display: none;
}

.compare-stability-player-v1 > strong {
    grid-area: value;

    color: #fff;

    font-size: 18px;
    font-weight: 790;
    line-height: 1;
    text-align: left;
}

.compare-stability-player-v1::after {
    grid-area: status;

    color: #777780;

    font-size: 7px;
    font-weight: 850;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.compare-stability-track-v1 {
    grid-area: bar;

    height: 7px;

    border-radius: 999px;
    background: #242429;
}

.compare-stability-fill-v1 {
    border-radius: inherit;

    background: #7e7e86;

    transition:
        width 260ms ease,
        background 140ms ease;
}

.compare-stability-player-v1.is-better {
    background:
        linear-gradient(
            90deg,
            var(--compare-win-soft),
            transparent 72%
        );

    box-shadow:
        inset 2px 0 0 rgba(116, 200, 138, .62);
}

.compare-stability-player-v1.is-better > strong,
.compare-stability-player-v1.is-better::after {
    color: var(--compare-win);
}

.compare-stability-player-v1.is-better::after {
    content: "Better";
}

.compare-stability-player-v1.is-better .compare-stability-fill-v1 {
    background: var(--compare-win);
}

.compare-stability-player-v1.is-worse {
    background:
        linear-gradient(
            90deg,
            var(--compare-loss-soft),
            transparent 72%
        );

    box-shadow:
        inset 2px 0 0 rgba(240, 101, 101, .58);
}

.compare-stability-player-v1.is-worse > strong,
.compare-stability-player-v1.is-worse::after {
    color: var(--compare-loss);
}

.compare-stability-player-v1.is-worse::after {
    content: "Worse";
}

.compare-stability-player-v1.is-worse .compare-stability-fill-v1 {
    background: var(--compare-loss);
}

.compare-stability-player-v1.is-equal > strong {
    color: #fff;
}

.compare-stability-player-v1.is-equal::after {
    content: "Equal";
    color: #8c8c95;
}

.compare-stability-player-v1.is-equal .compare-stability-fill-v1 {
    background: #a4a4ab;
}

.compare-stability-player-v1.is-neutral::after {
    content: "";
}


/* Slightly reduce repeated visual weight lower on the page. */
.compare-weakness-card-v1,
.compare-lessons-card-v1 {
    background: #0c0c0f;
}


/* =========================================================
   RESPONSIVE V1.1
   ========================================================= */

@media (max-width: 850px) {

    .compare-head-to-head-header-v11 {
        grid-template-columns: 120px 1fr 1fr;
    }

    .compare-head-player-copy-v11 strong {
        font-size: 13px;
    }

    .compare-head-player-v11 img {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .compare-stability-row-v1 {
        grid-template-columns: 70px 1fr 1fr;
    }

    /* undo older rule that moved the third cell under the second */
    .compare-stability-player-v1:nth-child(3) {
        grid-column: auto !important;
    }
}

@media (max-width: 620px) {

    .compare-head-to-head-header-v11 {
        grid-template-columns: 1fr 1fr;
    }

    .compare-head-to-head-header-v11 .compare-head-label-v11 {
        grid-column: 1 / -1;

        padding-bottom: 8px;

        border-bottom: 1px solid var(--compare-soft-line);
    }

    .compare-head-to-head-header-v11 > div:nth-child(2) {
        border-left: 0;
    }

    .compare-metric-row-v1 {
        grid-template-columns: 1fr 1fr;
    }

    .compare-metric-label-v1 {
        grid-column: 1 / -1;
    }

    .compare-stability-row-v1 {
        grid-template-columns: 1fr 1fr;
    }

    .compare-stability-row-v1 > strong {
        grid-column: 1 / -1;

        min-height: 34px;

        border-right: 0;
        border-bottom: 1px solid var(--compare-soft-line);
    }

    .compare-stability-player-v1 {
        grid-template-columns: 50px minmax(0, 1fr);

        padding: 12px;
    }

    .compare-stability-player-v1:nth-child(3) {
        grid-column: auto !important;
    }
}


/* =========================================================
   COMPARE PLAYERS V1.2 — CLEAN COMPARISON
   Decision Quality + Position Stability
   ========================================================= */

/* ---------------------------------------------------------
   SIMPLE PLAYER COLUMN HEADERS
   --------------------------------------------------------- */

.compare-head-to-head-header-v11 {
    grid-template-columns:
        minmax(230px, .85fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    border-color: var(--compare-line);
    background: #0b0b0d;
}

.compare-head-to-head-header-v11 > div {
    padding: 12px 15px;
}

.compare-head-player-v11 {
    display: block;
}

.compare-head-player-copy-v11 span {
    margin-bottom: 3px;

    color: #66666f;
    font-size: 7px;
    letter-spacing: .075em;
}

.compare-head-player-copy-v11 strong {
    color: #f4f4f6;

    font-size: 14px;
    font-weight: 760;
    line-height: 1.15;
}

.compare-head-player-copy-v11 small {
    margin-top: 3px;

    color: #8d7756;
    font-size: 7.5px;
}

/* Avatar rules from V1.1 are intentionally unused in these headers. */
.compare-head-player-v11 img {
    display: none !important;
}


/* =========================================================
   DECISION QUALITY — QUIETER TABLE
   ========================================================= */

.compare-metric-row-v1 {
    min-height: 58px;
}

.compare-metric-row-v1 > div {
    padding-top: 11px;
    padding-bottom: 11px;
}

.compare-metric-label-v1 strong {
    font-size: 10.5px;
}

.compare-metric-label-v1 span {
    margin-top: 3px;

    font-size: 7.5px;
    line-height: 1.35;
}

.compare-metric-value-v1 {
    background: transparent !important;
    box-shadow: none !important;

    text-align: center;
}

.compare-metric-value-v1 strong {
    color: #f4f4f6;

    font-size: 17px;
    font-weight: 760;
    line-height: 1;
}

/* Remove all Better / Worse / Equal words. */
.compare-metric-value-v1::after {
    content: none !important;
    display: none !important;
}

/* Decision Quality keeps a very restrained green/red comparison.
   Only the number changes colour. */
.compare-metric-value-v1.is-better strong {
    color: #70c78b;
}

.compare-metric-value-v1.is-worse strong {
    color: #ef7373;
}

.compare-metric-value-v1.is-equal strong,
.compare-metric-value-v1.is-neutral strong {
    color: #f4f4f6;
}


/* =========================================================
   POSITION STABILITY — FUCHSIA VS NEUTRAL
   ========================================================= */

.compare-stability-v1 {
    gap: 0;

    border: 1px solid var(--compare-line);
    border-top: 0;
}

.compare-stability-row-v1 {
    min-height: 57px;
}

.compare-stability-row-v1 > strong {
    padding: 0 13px;

    color: #85858e;

    font-size: 8px;
    font-weight: 760;
}

.compare-stability-player-v1 {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
        "value bar";

    gap: 12px;
    align-items: center;

    padding: 11px 14px;

    background: transparent !important;
    box-shadow: none !important;
}

/* No semantic status text below the percentage. */
.compare-stability-player-v1::after {
    content: none !important;
    display: none !important;
}

.compare-stability-player-v1 > strong {
    color: #f4f4f6;

    font-size: 14px;
    font-weight: 760;
    line-height: 1;
}

.compare-stability-track-v1 {
    height: 3px;

    background: #29292f;
}

.compare-stability-fill-v1 {
    height: 100%;

    background: #777780;

    transition: width 260ms ease;
}

/* Lower "worse-position rate" is the better result.
   Better result uses the page accent, worse stays neutral. */
.compare-stability-player-v1.is-better > strong {
    color: var(--accent);
}

.compare-stability-player-v1.is-better .compare-stability-fill-v1 {
    background: var(--accent);
}

.compare-stability-player-v1.is-worse > strong,
.compare-stability-player-v1.is-equal > strong,
.compare-stability-player-v1.is-neutral > strong {
    color: #f4f4f6;
}

.compare-stability-player-v1.is-worse .compare-stability-fill-v1,
.compare-stability-player-v1.is-equal .compare-stability-fill-v1,
.compare-stability-player-v1.is-neutral .compare-stability-fill-v1 {
    background: #777780;
}


/* ---------------------------------------------------------
   MOBILE TUNING
   --------------------------------------------------------- */

@media (max-width: 850px) {

    .compare-head-player-copy-v11 strong {
        font-size: 13px;
    }

    .compare-stability-row-v1 {
        grid-template-columns: 70px 1fr 1fr;
    }
}

@media (max-width: 620px) {

    .compare-head-to-head-header-v11 {
        grid-template-columns: 1fr 1fr;
    }

    .compare-stability-row-v1 {
        grid-template-columns: 1fr 1fr;
    }

    .compare-stability-player-v1 {
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 10px 11px;
    }

    .compare-metric-value-v1 strong {
        font-size: 16px;
    }
}


/* =========================================================
   COMPARE PLAYERS V1.3 — QUIETER DECISION QUALITY
   Requested refinements:
   - in Decision quality: better = accent fuchsia, worse = white
   - make metric labels more visible
   ========================================================= */

.compare-metric-label-v1 {
    padding-top: 12px;
    padding-bottom: 12px;
}

.compare-metric-label-v1 strong {
    color: #f4f4f6;
    font-size: 12px;
    font-weight: 760;
    line-height: 1.15;
}

.compare-metric-label-v1 span {
    color: #7f7f88;
    font-size: 8px;
    line-height: 1.4;
}

/* Decision quality values:
   quieter comparison, same logic direction as Position stability.
   Better = Chess DNA accent, worse/equal = white. */
.compare-metric-value-v1 strong {
    font-size: 18px;
    font-weight: 780;
    color: #f4f4f6;
}

.compare-metric-value-v1.is-better strong {
    color: var(--accent);
}

.compare-metric-value-v1.is-worse strong,
.compare-metric-value-v1.is-equal strong,
.compare-metric-value-v1.is-neutral strong {
    color: #f4f4f6;
}

/* Slightly cleaner spacing in the header row above the metrics */
.compare-head-to-head-header-v11 > div {
    padding-top: 13px;
    padding-bottom: 13px;
}

.compare-head-player-copy-v11 strong {
    font-size: 15px;
}

.compare-head-player-copy-v11 small {
    font-size: 8px;
    color: #8f8f98;
}


/* =========================================================
   COMPARE PLAYERS V1.4 — better = green, worse = white
   Requested refinement:
   - Decision quality: better stats green, worse/equal white
   - Position stability: better stats green, worse/equal white
   - keep the cleaner V1.3 layout
   ========================================================= */

.compare-metric-value-v1.is-better strong {
    color: var(--success) !important;
}

.compare-metric-value-v1.is-worse strong,
.compare-metric-value-v1.is-equal strong,
.compare-metric-value-v1.is-neutral strong {
    color: #f4f4f6 !important;
}

.compare-stability-player-v1.is-better > strong {
    color: var(--success) !important;
}

.compare-stability-player-v1.is-worse > strong,
.compare-stability-player-v1.is-equal > strong,
.compare-stability-player-v1.is-neutral > strong {
    color: #f4f4f6 !important;
}

.compare-stability-player-v1.is-better .compare-stability-fill-v1 {
    background: linear-gradient(90deg, rgba(108,255,181,0.72), var(--success)) !important;
}

.compare-stability-player-v1.is-worse .compare-stability-fill-v1,
.compare-stability-player-v1.is-equal .compare-stability-fill-v1,
.compare-stability-player-v1.is-neutral .compare-stability-fill-v1 {
    background: linear-gradient(90deg, rgba(255,255,255,0.58), rgba(255,255,255,0.88)) !important;
}


/* =========================================================
   COMPARE PLAYERS V1.6 — GOLD USERNAME TEXT FIX
   Gradient is applied only to an inline span containing the nick.
   This prevents the previous full-width gold rectangle.
   ========================================================= */

.compare-player-copy-v1 h2,
.compare-head-player-copy-v11 strong,
.compare-card-player-v1 strong {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: inherit !important;
}

.compare-gold-username {
    display: inline-block;
    max-width: 100%;

    background: linear-gradient(
        90deg,
        #c8a46b 0%,
        #f3d89a 50%,
        #c8a46b 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;

    white-space: nowrap;
}


/* =========================================================
   COMPARE PLAYERS V1.7 — USERNAME SIZE FIX
   The nested gold username span was inheriting the tiny
   "Player A / Player B" label styling in comparison headers.
   ========================================================= */

/* Only the direct label span should be small. */
.compare-head-player-copy-v11 > span {
    display: block;
    margin-bottom: 3px;

    color: #66666f;
    font-size: 7px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .075em;
    text-transform: uppercase;
}

/* Username itself: clearly visible, normal case, gold gradient. */
.compare-head-player-copy-v11 strong .compare-gold-username {
    display: inline-block;

    font-size: 15px !important;
    font-weight: 780 !important;
    line-height: 1.15 !important;

    letter-spacing: -0.01em !important;
    text-transform: none !important;

    background: linear-gradient(
        90deg,
        #c8a46b 0%,
        #f3d89a 50%,
        #c8a46b 100%
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Main player cards keep a stronger hierarchy. */
.compare-player-copy-v1 h2 .compare-gold-username {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
}

/* Weakness / lesson cards: readable but smaller than the main profile cards. */
.compare-card-player-v1 strong .compare-gold-username {
    font-size: 12px !important;
    font-weight: 780 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

@media (max-width: 850px) {
    .compare-head-player-copy-v11 strong .compare-gold-username {
        font-size: 14px !important;
    }
}


/* =========================================================
   COMPARE PLAYERS V1.8 — TOP CARD RATING COLOR FIX
   Only the username stays gold. Rapid rating is neutral.
   ========================================================= */

.compare-player-copy-v1 p {
    color: #8f8f98 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}


/* =========================================================
   COMPARE PLAYERS V1.9 — SHARED SAMPLE SELECTOR
   One common Rapid / Blitz / Bullet + 10 / 20 / 50 sample
   for both players. Swap button removed.
   ========================================================= */

.compare-search-v1 {
    position: relative;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        92px
        180px !important;

    gap: 10px !important;

    align-items: end !important;

    overflow: visible;
}


/* Two compact controls, visually matching Home. */
.compare-sample-selects-v19 {
    position: relative;
    z-index: 20;

    display: grid;
    grid-template-rows:
        repeat(2, minmax(0, 1fr));

    gap: 4px;

    height: 50px;
}


.compare-choice-menu-v19 {
    position: relative;

    min-width: 0;
    min-height: 0;
}


/*
   Home selectors are 68px together.
   Compare's search row is 50px, so use the same visual language
   at a more compact size.
*/
.compare-choice-trigger-v19 {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto !important;

    grid-template-rows:
        1fr !important;

    grid-template-areas:
        "value chevron" !important;

    gap: 5px !important;

    padding:
        0 8px
        0 10px !important;

    border-radius:
        12px !important;
}


.compare-choice-trigger-v19
.home-choice-selected {
    align-self: center;

    font-size: 10px !important;
    line-height: 1 !important;
}


.compare-choice-trigger-v19
.home-choice-chevron {
    align-self: center;

    font-size: 11px !important;
}


.compare-choice-panel-v19 {
    min-width: 112px;

    left: auto !important;
    right: 0 !important;

    padding: 5px !important;

    border-radius: 13px !important;
}


.compare-choice-option-v19 {
    padding:
        8px 9px !important;

    border-radius:
        9px !important;

    font-size:
        10px !important;

    white-space: nowrap;
}


/* Compare button keeps its existing straight-edged visual language. */
.compare-run-v1 {
    min-width: 180px !important;

    border-radius: 0 !important;
}


/* The old swap control is no longer part of the page. */
.compare-swap-v1 {
    display: none !important;
}


@media (max-width: 1120px) {

    .compare-search-v1 {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            92px !important;
    }

    .compare-run-v1 {
        grid-column:
            1 / -1;

        width:
            100%;
    }
}


@media (max-width: 760px) {

    .compare-search-v1 {
        grid-template-columns:
            1fr
            92px !important;
    }

    .compare-input-card-v1 {
        grid-column:
            1 / -1;
    }

    .compare-sample-selects-v19 {
        grid-column:
            1;
    }

    .compare-run-v1 {
        grid-column:
            1 / -1;
    }
}


@media (max-width: 520px) {

    .compare-search-v1 {
        grid-template-columns:
            1fr !important;
    }

    .compare-sample-selects-v19 {
        width:
            92px;
    }
}


/* =========================================================
   COMPARE PLAYERS V2 — CLEAN HEAD-TO-HEAD EXPERIENCE
   2026-09-05
   ========================================================= */

.compare-page-v2 {
    --compare-card: #0d0d10;
    --compare-card-soft: #0a0a0d;
    --compare-line: #29292f;
    --compare-line-soft: #202025;
    --compare-copy: #8b8b95;
    --compare-copy-soft: #676771;
}


/* ---------------------------------------------------------
   PAGE RHYTHM
   --------------------------------------------------------- */

.compare-page-v2 .compare-main-v1 {
    padding-top: 38px;
}

.compare-page-v2 .compare-results-v1 {
    gap: 44px;
    margin-top: 34px;
}

.compare-page-v2 .compare-section-v1 {
    gap: 14px;
}


/* ---------------------------------------------------------
   HERO — smaller, cleaner, closer to the rest of ChessReveal
   --------------------------------------------------------- */

.compare-page-v2 .compare-hero-v2 {
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(340px, .75fr);

    gap: 56px;
    align-items: center;

    padding: 12px 0 30px;
}

.compare-page-v2 .compare-hero-copy-v2 h1 {
    max-width: 760px;

    margin: 8px 0 13px;

    font-size: clamp(40px, 4.5vw, 58px);
    line-height: .98;
    letter-spacing: -.052em;
}

.compare-page-v2 .compare-hero-copy-v2 p {
    max-width: 700px;

    color: #878791;

    font-size: 13px;
    line-height: 1.65;
}

.compare-page-v2 .compare-policy-v2 {
    padding: 17px 18px;

    border-left: 2px solid var(--accent);

    background:
        linear-gradient(
            90deg,
            rgba(255,43,214,.035),
            transparent 62%
        ),
        #09090c;
}

.compare-page-v2 .compare-policy-v2 > strong {
    font-size: 15px;
    font-weight: 720;
}

.compare-page-v2 .compare-policy-v2 p {
    font-size: 10px;
}


/* ---------------------------------------------------------
   MATCHUP SETUP
   --------------------------------------------------------- */

.compare-page-v2 .compare-setup-v2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;

    margin-top: 20px;
    padding: 0 !important;

    overflow: visible;

    border: 1px solid var(--compare-line);

    background: #0a0a0d;
}

.compare-page-v2 .compare-setup-head-v2 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;

    padding: 18px 20px 16px;

    border-bottom: 1px solid var(--compare-line-soft);
}

.compare-page-v2 .compare-setup-head-v2 h2 {
    margin: 5px 0 0;

    color: #f5f5f7;

    font-size: 21px;
    font-weight: 710;
    letter-spacing: -.027em;
}

.compare-page-v2 .compare-setup-head-v2 > p {
    max-width: 480px;
    margin: 0;

    color: #70707a;

    font-size: 9.5px;
    line-height: 1.5;

    text-align: right;
}

.compare-page-v2 .compare-matchup-inputs-v2 {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        52px
        minmax(0, 1fr);

    align-items: stretch;

    padding: 17px 18px 14px;
}

.compare-page-v2 .compare-player-input-v2 {
    gap: 8px;
}

.compare-page-v2 .compare-player-input-label-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.compare-page-v2 .compare-side-token-v2 {
    display: inline-grid;
    place-items: center;

    width: 19px;
    height: 19px;

    border: 1px solid rgba(255,43,214,.38);

    color: var(--accent);

    font-size: 8px;
    font-weight: 900;
}

.compare-page-v2 .compare-versus-setup-v2 {
    display: grid;
    place-items: end center;

    padding-bottom: 17px;
}

.compare-page-v2 .compare-versus-setup-v2 span {
    color: #55555f;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .10em;
}

.compare-page-v2 .compare-input-wrap-v1 input {
    height: 54px;

    border-color: #2d2d33;

    background: #070709;

    font-size: 14px;
}

.compare-page-v2 .compare-setup-actions-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 13px 18px 16px;

    border-top: 1px solid var(--compare-line-soft);

    background: #09090c;
}

.compare-page-v2 .compare-shared-sample-v2 {
    display: flex;
    align-items: center;
    gap: 13px;
}

.compare-page-v2 .compare-shared-sample-v2 > span {
    color: #61616b;

    font-size: 7px;
    font-weight: 840;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.compare-page-v2 .compare-sample-selects-v19 {
    display: grid;
    grid-template-columns: 118px 88px;
    grid-template-rows: 34px;

    gap: 6px;

    height: 34px;
}

.compare-page-v2 .compare-choice-trigger-v19 {
    min-height: 34px !important;
    border-radius: 0 !important;

    background: #101013 !important;
}

.compare-page-v2 .compare-choice-panel-v19 {
    border-radius: 0 !important;
}

.compare-page-v2 .compare-run-v2 {
    min-width: 212px !important;
    height: 46px;

    font-size: 9px;
}


/* ---------------------------------------------------------
   EMPTY STATE / DISCOVERY
   --------------------------------------------------------- */

.compare-page-v2 .compare-discovery-v2 {
    display: grid;
    grid-template-columns:
        minmax(250px, .72fr)
        minmax(0, 1.28fr);

    gap: 36px;

    margin-top: 31px;
    padding: 24px 0 0;

    border-top: 1px solid #202025;
}

.compare-page-v2 .compare-discovery-head-v2 h2 {
    max-width: 390px;

    margin: 6px 0 0;

    color: #eeeeF1;

    font-size: clamp(23px, 2.25vw, 31px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.compare-page-v2 .compare-discovery-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    border: 1px solid #232328;
    background: #232328;

    gap: 1px;
}

.compare-page-v2 .compare-discovery-grid-v2 article {
    min-height: 142px;

    padding: 15px 16px;

    background: #0b0b0e;
}

.compare-page-v2 .compare-discovery-grid-v2 article > span {
    display: block;

    margin-bottom: 18px;

    color: var(--accent);

    font-size: 8px;
    font-weight: 900;
}

.compare-page-v2 .compare-discovery-grid-v2 strong {
    display: block;

    margin-bottom: 7px;

    color: #e8e8ec;

    font-size: 13px;
    font-weight: 690;
}

.compare-page-v2 .compare-discovery-grid-v2 p {
    margin: 0;

    color: #686872;

    font-size: 9px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   PROGRESS
   --------------------------------------------------------- */

.compare-page-v2 .compare-progress-v1 {
    margin-top: 16px;

    border-top: 2px solid var(--accent);
}

.compare-page-v2 .compare-progress-players-v1 {
    border: 0;
    background: transparent;
}

.compare-page-v2 .compare-progress-players-v1 > div {
    border: 1px solid #202025;
}


/* ---------------------------------------------------------
   PLAYER HEAD-TO-HEAD
   --------------------------------------------------------- */

.compare-page-v2 .compare-player-grid-v1 {
    position: relative;

    grid-template-columns:
        minmax(0, 1fr)
        42px
        minmax(0, 1fr);

    gap: 0;

    border: 1px solid var(--compare-line);

    background: #0a0a0d;
}

.compare-page-v2 .compare-player-card-v1 {
    padding: 20px 21px 18px;

    border: 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,43,214,.026),
            transparent 40%
        ),
        #0d0d10;
}

.compare-page-v2 .compare-player-card-v1:first-child {
    border-right: 1px solid var(--compare-line-soft) !important;
}

.compare-page-v2 .compare-player-card-v1:last-child {
    border-left: 1px solid var(--compare-line-soft) !important;
}

.compare-page-v2 .compare-versus-v1 {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    margin: 0 -1px;

    background: #09090c;

    color: var(--accent);

    font-size: 9px;
}

.compare-page-v2 .compare-player-head-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.compare-page-v2 .compare-player-identity-v2 {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 13px;
}

.compare-page-v2 .compare-player-avatar-v2 {
    width: 54px;
    height: 54px;
}

.compare-page-v2 .compare-player-copy-v2 h2 {
    margin-bottom: 4px;

    font-size: clamp(23px, 2.15vw, 30px);
}

.compare-page-v2 .compare-player-copy-v2 p {
    font-size: 9px;
}

.compare-page-v2 .compare-open-profile-v2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 34px;
}

.compare-page-v2 .compare-open-profile-v2 span {
    color: var(--accent);
    font-size: 12px;
}

.compare-page-v2 .compare-player-profile-line-v2 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 15px;

    margin-top: 18px;
    padding: 13px 0;

    border-top: 1px solid var(--compare-line-soft);
    border-bottom: 1px solid var(--compare-line-soft);
}

.compare-page-v2 .compare-player-profile-line-v2 span {
    color: #60606a;

    font-size: 7px;
    font-weight: 840;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.compare-page-v2 .compare-player-profile-line-v2 strong {
    color: #f0f0f3;

    font-size: 17px;
    font-weight: 710;
}

.compare-page-v2 .compare-player-stats-v2 {
    margin-top: 0;

    border: 0;
}

.compare-page-v2 .compare-player-stats-v2 > div {
    padding-top: 13px;
    padding-bottom: 0;
}


/* ---------------------------------------------------------
   SECTION HEADINGS
   --------------------------------------------------------- */

.compare-page-v2 .compare-section-heading-v1 {
    padding-bottom: 12px;
}

.compare-page-v2 .compare-section-heading-v1 h2 {
    font-size: clamp(25px, 2.5vw, 34px);
}

.compare-page-v2 .compare-section-heading-v1 > p {
    max-width: 470px;

    font-size: 9.5px;
}


/* ---------------------------------------------------------
   KEY DIFFERENCES
   --------------------------------------------------------- */

.compare-page-v2 .compare-difference-list-v1 {
    gap: 8px;

    border: 0;

    background: transparent;
}

.compare-page-v2 .compare-difference-v2 {
    position: relative;

    min-height: 146px;

    padding: 17px 18px 18px;

    border: 1px solid #29292f;
    border-top: 2px solid rgba(255,43,214,.48);

    background:
        linear-gradient(
            180deg,
            rgba(255,43,214,.03),
            transparent 42%
        ),
        #0d0d10;
}

.compare-page-v2 .compare-difference-top-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 20px;
}

.compare-page-v2 .compare-difference-index-v2 {
    color: var(--accent);

    font-size: 8px;
    font-weight: 900;
}

.compare-page-v2 .compare-difference-label-v2 {
    color: #666670;

    font-size: 7px;
    font-weight: 850;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.compare-page-v2 .compare-difference-v2 > strong {
    display: block;

    color: #efeff2;

    font-size: 13px;
    font-weight: 680;
    line-height: 1.48;
}


/* ---------------------------------------------------------
   DECISION QUALITY
   --------------------------------------------------------- */

.compare-page-v2 .compare-head-to-head-header-v11 {
    grid-template-columns:
        minmax(250px, .82fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    border-color: #29292f;

    background: #0c0c0f;
}

.compare-page-v2 .compare-metric-table-v1 {
    border-color: #29292f;

    background: #09090c;
}

.compare-page-v2 .compare-metric-row-v1 {
    grid-template-columns:
        minmax(250px, .82fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    min-height: 64px;
}

.compare-page-v2 .compare-metric-row-v1 > div {
    padding: 12px 15px;
}

.compare-page-v2 .compare-metric-label-v1 strong {
    font-size: 11px;
}

.compare-page-v2 .compare-metric-label-v1 span {
    max-width: 300px;

    color: #696973;

    font-size: 7.5px;
}

.compare-page-v2 .compare-metric-value-v1 strong {
    font-size: 20px;
}

.compare-page-v2 .compare-metric-value-v1.is-better {
    background:
        linear-gradient(
            90deg,
            rgba(116,200,138,.045),
            transparent 68%
        ) !important;
}


/* ---------------------------------------------------------
   POSITION STABILITY
   --------------------------------------------------------- */

.compare-page-v2 .compare-stability-v1 {
    background: #09090c;
}

.compare-page-v2 .compare-stability-row-v1 {
    min-height: 64px;
}

.compare-page-v2 .compare-stability-row-v1 > strong {
    justify-content: center;

    color: #70707a;

    font-size: 7.5px;
}

.compare-page-v2 .compare-stability-player-v1 {
    grid-template-columns: 52px minmax(0, 1fr);

    padding: 12px 15px;
}

.compare-page-v2 .compare-stability-player-v1 > strong {
    font-size: 15px;
}

.compare-page-v2 .compare-stability-track-v1 {
    height: 4px;
}


/* ---------------------------------------------------------
   WEAKNESS PROFILES
   --------------------------------------------------------- */

.compare-page-v2 .compare-two-columns-v1 {
    gap: 8px;
}

.compare-page-v2 .compare-weakness-card-v1,
.compare-page-v2 .compare-lessons-card-v1 {
    padding: 0;

    border-color: #29292f;

    background: #0c0c0f;
}

.compare-page-v2 .compare-card-player-v2 {
    gap: 11px;

    margin: 0;
    padding: 14px 15px;

    background: #0a0a0d;
}

.compare-page-v2 .compare-card-player-v2 img {
    width: 34px;
    height: 34px;
}

.compare-page-v2 .compare-card-player-v2 > div {
    min-width: 0;
}

.compare-page-v2 .compare-card-player-v2 > div > span {
    display: block;

    margin-bottom: 4px;

    color: #5e5e68;

    font-size: 7px;
    font-weight: 840;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.compare-page-v2 .compare-priority-v2 {
    grid-template-columns: 30px minmax(0, 1fr);

    gap: 10px;

    padding: 15px 16px;
}

.compare-page-v2 .compare-priority-main-v2 {
    background:
        linear-gradient(
            90deg,
            rgba(255,43,214,.04),
            transparent 42%
        );
}

.compare-page-v2 .compare-priority-v2 > span {
    padding-top: 3px;
}

.compare-page-v2 .compare-priority-v2 small {
    display: block;

    margin-bottom: 5px;

    color: #5f5f69;

    font-size: 7px;
    font-weight: 840;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.compare-page-v2 .compare-priority-v2 h3 {
    font-size: 18px;
}

.compare-page-v2 .compare-priority-v2 p {
    max-width: 520px;

    font-size: 8.5px;
}

.compare-page-v2 .compare-phase-v2 {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
    align-items: center;

    margin: 0;
    padding: 14px 16px;

    border-top: 1px solid var(--compare-line-soft);

    background: #09090c;
}

.compare-page-v2 .compare-phase-v2 > div span {
    margin-bottom: 6px;
}

.compare-page-v2 .compare-phase-v2 > div strong {
    font-size: 15px;
}

.compare-page-v2 .compare-phase-v2 p {
    margin: 0;

    color: #6f6f79;

    font-size: 8px;
}


/* ---------------------------------------------------------
   VALIDATED LESSONS
   --------------------------------------------------------- */

.compare-page-v2 .compare-lesson-v2 {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);

    gap: 11px;

    padding: 15px 16px;

    border-bottom: 1px solid var(--compare-line-soft);
}

.compare-page-v2 .compare-lesson-v2:last-child {
    border-bottom: 0;
}

.compare-page-v2 .compare-lesson-index-v2 {
    position: relative;

    min-height: 42px;

    display: flex;
    align-items: flex-start;

    padding: 2px 0 0 10px;

    color: var(--accent);

    font-size: 8px;
    font-weight: 900;
}

.compare-page-v2 .compare-lesson-index-v2::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 2px;

    background: var(--accent);
}

.compare-page-v2 .compare-lesson-v2 small {
    display: block;

    margin-bottom: 5px;

    color: #5f5f69;

    font-size: 7px;
    font-weight: 840;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.compare-page-v2 .compare-lesson-v2 strong {
    display: block;

    color: #ededf1;

    font-size: 14px;
    font-weight: 690;
    line-height: 1.35;
}

.compare-page-v2 .compare-lesson-v2 p {
    margin: 5px 0 0;

    color: #696973;

    font-size: 8px;
}

.compare-page-v2 .compare-lessons-empty-v2 {
    min-height: 116px;

    display: flex;
    align-items: center;

    padding: 20px 16px 20px 49px;

    color: #6f6f79;

    font-size: 10px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   FOOTER NOTE
   --------------------------------------------------------- */

.compare-page-v2 .compare-footer-note-v1 {
    padding: 22px 24px;

    border: 1px solid #29292f;
    border-top: 1px solid rgba(255,43,214,.44);

    background:
        linear-gradient(
            90deg,
            rgba(255,43,214,.035),
            transparent 40%
        ),
        #0a0a0d;
}

.compare-page-v2 .compare-footer-note-v1 h2 {
    font-size: 22px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1050px) {

    .compare-page-v2 .compare-hero-v2 {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .compare-page-v2 .compare-policy-v2 {
        max-width: 700px;
    }

    .compare-page-v2 .compare-discovery-v2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .compare-page-v2 .compare-discovery-grid-v2 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 820px) {

    .compare-page-v2 .compare-setup-head-v2,
    .compare-page-v2 .compare-section-heading-v1 {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .compare-page-v2 .compare-setup-head-v2 > p,
    .compare-page-v2 .compare-section-heading-v1 > p {
        max-width: 650px;
        text-align: left;
    }

    .compare-page-v2 .compare-matchup-inputs-v2 {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .compare-page-v2 .compare-versus-setup-v2 {
        place-items: center;
        padding: 0;
    }

    .compare-page-v2 .compare-setup-actions-v2 {
        align-items: stretch;
        flex-direction: column;
    }

    .compare-page-v2 .compare-run-v2 {
        width: 100%;
    }

    .compare-page-v2 .compare-player-grid-v1 {
        grid-template-columns: 1fr;
    }

    .compare-page-v2 .compare-player-card-v1:first-child,
    .compare-page-v2 .compare-player-card-v1:last-child {
        border: 0 !important;
    }

    .compare-page-v2 .compare-player-card-v1:first-child {
        border-bottom: 1px solid var(--compare-line-soft) !important;
    }

    .compare-page-v2 .compare-versus-v1 {
        min-height: 34px;
    }

    .compare-page-v2 .compare-two-columns-v1 {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 640px) {

    .compare-page-v2 .compare-main-v1 {
        padding-top: 28px;
    }

    .compare-page-v2 .compare-hero-copy-v2 h1 {
        font-size: clamp(36px, 10vw, 48px);
    }

    .compare-page-v2 .compare-discovery-grid-v2 {
        grid-template-columns: 1fr;
    }

    .compare-page-v2 .compare-shared-sample-v2 {
        align-items: flex-start;
        flex-direction: column;
    }

    .compare-page-v2 .compare-sample-selects-v19 {
        width: 100%;

        grid-template-columns: 1fr 1fr;
    }

    .compare-page-v2 .compare-player-head-v2 {
        align-items: flex-start;
        flex-direction: column;
    }

    .compare-page-v2 .compare-open-profile-v2 {
        width: 100%;
        justify-content: space-between;
    }

    .compare-page-v2 .compare-player-stats-v2 {
        grid-template-columns: 1fr;
    }

    .compare-page-v2 .compare-player-stats-v2 > div + div {
        padding-left: 0;

        border-top: 1px solid var(--compare-line-soft);
        border-left: 0;
    }

    .compare-page-v2 .compare-phase-v2 {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .compare-page-v2 .compare-footer-note-v1 {
        padding: 19px 16px;
    }
}


/* =========================================================
   COMPARE RESULTS V3 — PROFESSIONAL HEAD-TO-HEAD
   2026-09-06

   IMPORTANT:
   This entire redesign is scoped to #compareResults.
   The pre-comparison hero, username inputs, sample selectors,
   discovery area and Compare button are intentionally untouched.

   Visual language:
   - Player A = soft fuchsia identity
   - Player B = bright cyan / turquoise identity
   - green = better metric
   - neutral white = worse/equal metric
   ========================================================= */

.compare-page-v2 #compareResults {
    --compare-result-surface: #0a0a0d;
    --compare-result-card: #0d0d11;
    --compare-result-card-2: #101014;
    --compare-result-line: #292930;
    --compare-result-line-soft: #202027;
    --compare-result-muted: #7c7c87;
    --compare-result-muted-soft: #5f5f69;
    --compare-result-a: 255, 43, 214;
    --compare-result-b: 132, 245, 255;
    gap: 52px;
    margin-top: 30px;
}

/* 01 — MATCHUP HERO */
.compare-page-v2 #compareResults .compare-player-grid-v1 {
    grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--compare-result-line);
    background: #08080a;
    box-shadow: 0 18px 54px rgba(0,0,0,.20);
}
.compare-page-v2 #compareResults .compare-player-card-v1 {
    position: relative;
    min-height: 220px;
    padding: 22px 24px 20px;
    border: 0 !important;
    background: var(--compare-result-card) !important;
}
.compare-page-v2 #compareResults .compare-player-card-v1:first-child {
    border-right: 1px solid var(--compare-result-line-soft) !important;
    background:
        radial-gradient(620px 310px at -8% 12%, rgba(var(--compare-result-a),.105), rgba(var(--compare-result-a),.034) 40%, transparent 72%),
        var(--compare-result-card) !important;
}
.compare-page-v2 #compareResults .compare-player-card-v1:last-child {
    border-left: 1px solid var(--compare-result-line-soft) !important;
    background:
        radial-gradient(620px 310px at -8% 12%, rgba(var(--compare-result-b),.100), rgba(var(--compare-result-b),.030) 40%, transparent 72%),
        var(--compare-result-card) !important;
}
.compare-page-v2 #compareResults .compare-player-head-v2 { min-height: 62px; }
.compare-page-v2 #compareResults .compare-player-identity-v2 { gap: 14px; }
.compare-page-v2 #compareResults .compare-player-avatar-v2 {
    width: 58px; height: 58px; border: 1px solid #303038; background:#151518;
}
.compare-page-v2 #compareResults .compare-player-copy-v2>span {
    margin-bottom:4px; color:#696973; font-size:7.5px; letter-spacing:.09em;
}
.compare-page-v2 #compareResults .compare-player-copy-v2 h2 {
    margin:0 0 5px; font-size:clamp(24px,2.1vw,31px); line-height:1;
}
.compare-page-v2 #compareResults .compare-player-copy-v2 p { color:#858590 !important; font-size:9px; }
.compare-page-v2 #compareResults .compare-open-profile-v2 {
    min-height:36px; padding:0 12px; border-color:#3a3a42; background:rgba(255,255,255,.012); color:#d2d2d7;
}
.compare-page-v2 #compareResults .compare-open-profile-v2:hover {
    border-color:#5b5b65; background:rgba(255,255,255,.028); color:#fff;
}
.compare-page-v2 #compareResults .compare-player-profile-line-v2 {
    margin-top:19px; padding:13px 0; border-color:var(--compare-result-line-soft);
}
.compare-page-v2 #compareResults .compare-player-profile-line-v2 span { color:#686872; }
.compare-page-v2 #compareResults .compare-player-profile-line-v2 strong { color:#f4f4f6; font-size:18px; font-weight:720; }
.compare-page-v2 #compareResults .compare-player-stats-v2 {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:0;
}
.compare-page-v2 #compareResults .compare-player-stats-v2>div { min-width:0; padding:14px 12px 0 0; }
.compare-page-v2 #compareResults .compare-player-stats-v2>div+div { padding-left:14px; border-left:1px solid var(--compare-result-line-soft); }
.compare-page-v2 #compareResults .compare-player-stats-v2 span { color:#61616b; }
.compare-page-v2 #compareResults .compare-player-stats-v2 strong { font-size:17px; font-weight:720; }
.compare-page-v2 #compareResults .compare-versus-v1 {
    position:relative; min-height:100%; margin:0; overflow:hidden;
    border-left:1px solid var(--compare-result-line-soft); border-right:1px solid var(--compare-result-line-soft);
    background:radial-gradient(80px 100px at 50% 50%, rgba(255,43,214,.065), transparent 70%), #09090c;
    color:#f5f5f7; font-size:9px; font-weight:900; letter-spacing:.12em;
}
.compare-page-v2 #compareResults .compare-versus-v1::before,
.compare-page-v2 #compareResults .compare-versus-v1::after {
    content:""; position:absolute; left:50%; width:1px; height:34%; transform:translateX(-50%);
    background:linear-gradient(180deg, transparent, rgba(255,255,255,.12), transparent);
}
.compare-page-v2 #compareResults .compare-versus-v1::before { top:0; }
.compare-page-v2 #compareResults .compare-versus-v1::after { bottom:0; }

/* 02 — SECTION RHYTHM */
.compare-page-v2 #compareResults .compare-section-v1 { gap:14px; }
.compare-page-v2 #compareResults .compare-section-heading-v1 {
    align-items:flex-end; padding-bottom:13px; border-color:var(--compare-result-line);
}
.compare-page-v2 #compareResults .compare-section-heading-v1 h2 {
    margin-top:6px; font-size:clamp(26px,2.35vw,33px); line-height:1.04; letter-spacing:-.038em;
}
.compare-page-v2 #compareResults .compare-section-heading-v1>p {
    max-width:450px; color:#74747e; font-size:9px; line-height:1.55;
}
.compare-page-v2 #compareResults .card-kicker { font-size:8px; letter-spacing:.085em; }

/* 03 — AT A GLANCE */
.compare-page-v2 #compareResults .compare-difference-list-v1 {
    grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; border:0; background:transparent;
}
.compare-page-v2 #compareResults .compare-difference-v2 {
    min-height:138px; padding:17px 18px 18px; border:1px solid var(--compare-result-line); border-top:1px solid #36363f;
    background:radial-gradient(420px 220px at -8% 0%, rgba(255,43,214,.045), transparent 72%), var(--compare-result-card);
    transition:transform 150ms ease,border-color 150ms ease,background 150ms ease;
}
.compare-page-v2 #compareResults .compare-difference-v2:nth-child(2) {
    background:radial-gradient(420px 220px at -8% 0%, rgba(255,255,255,.022), transparent 72%), var(--compare-result-card);
}
.compare-page-v2 #compareResults .compare-difference-v2:nth-child(3) {
    background:radial-gradient(420px 220px at -8% 0%, rgba(var(--compare-result-b),.040), transparent 72%), var(--compare-result-card);
}
.compare-page-v2 #compareResults .compare-difference-v2:hover { transform:translateY(-2px); border-color:#41414b; }
.compare-page-v2 #compareResults .compare-difference-top-v2 { margin-bottom:17px; }
.compare-page-v2 #compareResults .compare-difference-label-v2 { color:#6e6e78; }
.compare-page-v2 #compareResults .compare-difference-v2>strong { font-size:13.5px; line-height:1.5; }

/* 04 — DECISION QUALITY */
.compare-page-v2 #compareResults .compare-metric-table-v1 {
    overflow:hidden; border:1px solid var(--compare-result-line); background:#09090c; box-shadow:0 14px 36px rgba(0,0,0,.12);
}
.compare-page-v2 #compareResults .compare-head-to-head-header-v11 {
    grid-template-columns:minmax(260px,.84fr) minmax(0,1fr) minmax(0,1fr);
    border:0; border-bottom:1px solid var(--compare-result-line); background:#0b0b0e;
}
.compare-page-v2 #compareResults .compare-head-to-head-header-v11>div { min-height:62px; padding:13px 16px; }
.compare-page-v2 #compareResults .compare-head-to-head-header-v11>div+div { border-left:1px solid var(--compare-result-line-soft); }
.compare-page-v2 #compareResults .compare-head-to-head-header-v11>div:nth-child(2) {
    background:radial-gradient(440px 170px at -8% 50%, rgba(var(--compare-result-a),.075), transparent 72%);
}
.compare-page-v2 #compareResults .compare-head-to-head-header-v11>div:nth-child(3) {
    background:radial-gradient(440px 170px at -8% 50%, rgba(var(--compare-result-b),.070), transparent 72%);
}
.compare-page-v2 #compareResults .compare-head-player-copy-v11>span { color:#696973; }
.compare-page-v2 #compareResults .compare-head-player-copy-v11 strong .compare-gold-username { font-size:16px !important; }
.compare-page-v2 #compareResults .compare-head-player-copy-v11 small { color:#868690; }
.compare-page-v2 #compareResults .compare-metric-row-v1 {
    grid-template-columns:minmax(260px,.84fr) minmax(0,1fr) minmax(0,1fr); min-height:64px; border-top:1px solid var(--compare-result-line-soft);
}
.compare-page-v2 #compareResults .compare-metric-row-v1:first-of-type { border-top:0; }
.compare-page-v2 #compareResults .compare-metric-row-v1>div { padding:12px 16px; }
.compare-page-v2 #compareResults .compare-metric-row-v1>div+div { border-left:1px solid var(--compare-result-line-soft); }
.compare-page-v2 #compareResults .compare-metric-label-v1 { background:#0b0b0e; }
.compare-page-v2 #compareResults .compare-metric-label-v1 strong { color:#f0f0f3; font-size:11.5px; font-weight:720; }
.compare-page-v2 #compareResults .compare-metric-label-v1 span { max-width:310px; color:#6f6f79; font-size:7.8px; line-height:1.45; }
.compare-page-v2 #compareResults .compare-metric-row-v1>div:nth-child(2) {
    background:linear-gradient(90deg,rgba(var(--compare-result-a),.018),transparent 52%) !important;
}
.compare-page-v2 #compareResults .compare-metric-row-v1>div:nth-child(3) {
    background:linear-gradient(90deg,rgba(var(--compare-result-b),.018),transparent 52%) !important;
}
.compare-page-v2 #compareResults .compare-metric-value-v1 { align-items:center; justify-content:center; }
.compare-page-v2 #compareResults .compare-metric-value-v1 strong { font-size:21px; font-weight:780; }
.compare-page-v2 #compareResults .compare-metric-value-v1.is-better strong { color:var(--success) !important; }
.compare-page-v2 #compareResults .compare-metric-value-v1.is-worse strong,
.compare-page-v2 #compareResults .compare-metric-value-v1.is-equal strong,
.compare-page-v2 #compareResults .compare-metric-value-v1.is-neutral strong { color:#f4f4f6 !important; }

/* 05 — POSITION STABILITY */
.compare-page-v2 #compareResults .compare-stability-v1 {
    overflow:hidden; border:1px solid var(--compare-result-line); background:#09090c; box-shadow:0 14px 36px rgba(0,0,0,.10);
}
.compare-page-v2 #compareResults .compare-stability-v1 .compare-head-to-head-header-v11 { border-bottom:1px solid var(--compare-result-line); }
.compare-page-v2 #compareResults .compare-stability-row-v1 {
    grid-template-columns:90px minmax(0,1fr) minmax(0,1fr); min-height:66px; border-bottom:1px solid var(--compare-result-line-soft);
}
.compare-page-v2 #compareResults .compare-stability-row-v1:last-child { border-bottom:0; }
.compare-page-v2 #compareResults .compare-stability-row-v1>strong {
    justify-content:center; border-right:1px solid var(--compare-result-line-soft); background:#0b0b0e; color:#73737d; font-size:7.5px;
}
.compare-page-v2 #compareResults .compare-stability-player-v1 {
    grid-template-columns:54px minmax(0,1fr); gap:13px; padding:13px 16px; background:transparent !important;
}
.compare-page-v2 #compareResults .compare-stability-player-v1:nth-child(2) {
    background:linear-gradient(90deg,rgba(var(--compare-result-a),.018),transparent 55%) !important;
}
.compare-page-v2 #compareResults .compare-stability-player-v1:nth-child(3) {
    background:linear-gradient(90deg,rgba(var(--compare-result-b),.018),transparent 55%) !important;
}
.compare-page-v2 #compareResults .compare-stability-player-v1+.compare-stability-player-v1 { border-left:1px solid var(--compare-result-line-soft); }
.compare-page-v2 #compareResults .compare-stability-player-v1>strong { font-size:16px; font-weight:780; }
.compare-page-v2 #compareResults .compare-stability-track-v1 { height:5px; background:#28282e; }
.compare-page-v2 #compareResults .compare-stability-player-v1.is-better>strong { color:var(--success) !important; }
.compare-page-v2 #compareResults .compare-stability-player-v1.is-better .compare-stability-fill-v1 {
    background:linear-gradient(90deg,rgba(108,255,181,.70),var(--success)) !important;
}
.compare-page-v2 #compareResults .compare-stability-player-v1.is-worse .compare-stability-fill-v1,
.compare-page-v2 #compareResults .compare-stability-player-v1.is-equal .compare-stability-fill-v1,
.compare-page-v2 #compareResults .compare-stability-player-v1.is-neutral .compare-stability-fill-v1 {
    background:linear-gradient(90deg,rgba(255,255,255,.46),rgba(255,255,255,.82)) !important;
}

/* 06 — WEAKNESS + LESSONS */
.compare-page-v2 #compareResults .compare-two-columns-v1 { gap:10px; }
.compare-page-v2 #compareResults .compare-weakness-card-v1,
.compare-page-v2 #compareResults .compare-lessons-card-v1 {
    overflow:hidden; border:1px solid var(--compare-result-line); background:var(--compare-result-card);
}
.compare-page-v2 #compareResults .compare-two-columns-v1>:first-child {
    background:radial-gradient(660px 300px at -8% 0%,rgba(var(--compare-result-a),.060),transparent 72%),var(--compare-result-card);
}
.compare-page-v2 #compareResults .compare-two-columns-v1>:last-child {
    background:radial-gradient(660px 300px at -8% 0%,rgba(var(--compare-result-b),.058),transparent 72%),var(--compare-result-card);
}
.compare-page-v2 #compareResults .compare-card-player-v2 {
    padding:14px 16px; border-bottom:1px solid var(--compare-result-line-soft); background:rgba(7,7,9,.72);
}
.compare-page-v2 #compareResults .compare-card-player-v2 img { width:36px; height:36px; border:1px solid #303038; }
.compare-page-v2 #compareResults .compare-card-player-v2>div>span { color:#666670; }
.compare-page-v2 #compareResults .compare-card-player-v2 strong .compare-gold-username { font-size:13px !important; }
.compare-page-v2 #compareResults .compare-priority-v2 {
    grid-template-columns:34px minmax(0,1fr); gap:10px; padding:17px 16px; border-color:var(--compare-result-line-soft);
}
.compare-page-v2 #compareResults .compare-priority-main-v2 {
    background:linear-gradient(90deg,rgba(255,255,255,.022),transparent 56%);
}
.compare-page-v2 #compareResults .compare-priority-v2>span { color:var(--accent); }
.compare-page-v2 #compareResults .compare-priority-v2 small { color:#65656f; }
.compare-page-v2 #compareResults .compare-priority-v2 h3 { margin-bottom:6px; color:#f1f1f4; font-size:17px; font-weight:700; }
.compare-page-v2 #compareResults .compare-priority-v2 p { color:#72727c; font-size:8.5px; line-height:1.5; }
.compare-page-v2 #compareResults .compare-phase-v2 {
    grid-template-columns:145px minmax(0,1fr); padding:14px 16px; border-color:var(--compare-result-line-soft); background:rgba(7,7,9,.55);
}
.compare-page-v2 #compareResults .compare-phase-v2 p { color:#72727c; }
.compare-page-v2 #compareResults .compare-lesson-v2 {
    grid-template-columns:38px minmax(0,1fr); gap:11px; padding:16px; border-color:var(--compare-result-line-soft);
}
.compare-page-v2 #compareResults .compare-lesson-index-v2 { min-height:44px; padding-left:11px; }
.compare-page-v2 #compareResults .compare-lesson-index-v2::before { width:1px; opacity:.75; }
.compare-page-v2 #compareResults .compare-lesson-v2 small { color:#65656f; }
.compare-page-v2 #compareResults .compare-lesson-v2 strong { color:#f0f0f3; font-size:13.5px; font-weight:690; }
.compare-page-v2 #compareResults .compare-lesson-v2 p { color:#71717b; }

/* 08 — CLOSING NOTE */
.compare-page-v2 #compareResults .compare-footer-note-v1 {
    gap:34px; padding:23px 24px; border:1px solid var(--compare-result-line);
    background:
        radial-gradient(700px 280px at -8% 0%,rgba(255,43,214,.050),transparent 72%),
        radial-gradient(620px 260px at 108% 100%,rgba(var(--compare-result-b),.034),transparent 72%),
        #0a0a0d;
}
.compare-page-v2 #compareResults .compare-footer-note-v1 h2 { margin-top:6px; font-size:22px; letter-spacing:-.025em; }
.compare-page-v2 #compareResults .compare-footer-note-v1 p { color:#767680; font-size:10px; }
.compare-page-v2 #compareResults .compare-again-v1 {
    min-width:220px; min-height:46px; border-color:#3b3b43; background:#111115;
}
.compare-page-v2 #compareResults .compare-again-v1:hover { border-color:#5a5a64; background:#151519; }

/* RESPONSIVE — RESULTS ONLY */
@media (max-width:1000px) {
    .compare-page-v2 #compareResults .compare-difference-list-v1 { grid-template-columns:1fr; }
    .compare-page-v2 #compareResults .compare-difference-v2 { min-height:0; }
}
@media (max-width:820px) {
    .compare-page-v2 #compareResults { gap:42px; }
    .compare-page-v2 #compareResults .compare-player-grid-v1 { grid-template-columns:1fr; }
    .compare-page-v2 #compareResults .compare-versus-v1 {
        min-height:38px; border-top:1px solid var(--compare-result-line-soft); border-bottom:1px solid var(--compare-result-line-soft); border-left:0; border-right:0;
    }
    .compare-page-v2 #compareResults .compare-versus-v1::before,
    .compare-page-v2 #compareResults .compare-versus-v1::after { display:none; }
    .compare-page-v2 #compareResults .compare-player-card-v1:first-child,
    .compare-page-v2 #compareResults .compare-player-card-v1:last-child { border:0 !important; }
    .compare-page-v2 #compareResults .compare-section-heading-v1 { align-items:flex-start; flex-direction:column; gap:8px; }
    .compare-page-v2 #compareResults .compare-section-heading-v1>p { max-width:650px; text-align:left; }
    .compare-page-v2 #compareResults .compare-two-columns-v1 { grid-template-columns:1fr; }
}
@media (max-width:680px) {
    .compare-page-v2 #compareResults .compare-player-head-v2 { align-items:flex-start; flex-direction:column; }
    .compare-page-v2 #compareResults .compare-open-profile-v2 { width:100%; justify-content:space-between; }
    .compare-page-v2 #compareResults .compare-player-stats-v2 { grid-template-columns:1fr; }
    .compare-page-v2 #compareResults .compare-player-stats-v2>div { padding:12px 0; }
    .compare-page-v2 #compareResults .compare-player-stats-v2>div+div { padding-left:0; border-top:1px solid var(--compare-result-line-soft); border-left:0; }
    .compare-page-v2 #compareResults .compare-head-to-head-header-v11 { grid-template-columns:1fr 1fr; }
    .compare-page-v2 #compareResults .compare-head-to-head-header-v11 .compare-head-label-v11 {
        grid-column:1/-1; min-height:36px; border-bottom:1px solid var(--compare-result-line-soft);
    }
    .compare-page-v2 #compareResults .compare-head-to-head-header-v11>div:nth-child(2) { border-left:0; }
    .compare-page-v2 #compareResults .compare-metric-row-v1 { grid-template-columns:1fr 1fr; }
    .compare-page-v2 #compareResults .compare-metric-label-v1 { grid-column:1/-1; border-bottom:1px solid var(--compare-result-line-soft); }
    .compare-page-v2 #compareResults .compare-metric-row-v1>div:nth-child(2) { border-left:0; }
    .compare-page-v2 #compareResults .compare-stability-row-v1 { grid-template-columns:1fr 1fr; }
    .compare-page-v2 #compareResults .compare-stability-row-v1>strong {
        grid-column:1/-1; min-height:34px; border-right:0; border-bottom:1px solid var(--compare-result-line-soft);
    }
    .compare-page-v2 #compareResults .compare-stability-player-v1:nth-child(3) { grid-column:auto !important; }
    .compare-page-v2 #compareResults .compare-phase-v2 { grid-template-columns:1fr; gap:7px; }
    .compare-page-v2 #compareResults .compare-footer-note-v1 { grid-template-columns:1fr; padding:20px 17px; }
    .compare-page-v2 #compareResults .compare-again-v1 { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
    .compare-page-v2 #compareResults .compare-difference-v2 { transition:none; }
}


/* =========================================================
   COMPARE RESULTS V3.1 — RICHER INSIGHT SECTIONS
   2026-09-06

   Scope: #compareResults ONLY.
   Pre-comparison setup remains untouched.

   Goal:
   make Decision Quality, Position Stability,
   Weakness Profile and Validated Lessons feel like a premium
   comparison dashboard instead of flat data blocks.
   ========================================================= */


/* =========================================================
   SHARED SECTION DETAIL
   ========================================================= */

.compare-page-v2 #compareResults .compare-section-heading-v1 {
    position: relative;
}

.compare-page-v2 #compareResults .compare-section-heading-v1::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -1px;

    width: 92px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(255,43,214,.95),
            rgba(132,245,255,.62),
            transparent
        );
}


/* =========================================================
   DECISION QUALITY — PREMIUM METRIC BOARD
   ========================================================= */

.compare-page-v2 #compareResults .compare-metric-table-v1 {
    border: 1px solid #2c2c34;

    background:
        radial-gradient(
            780px 320px at 18% -10%,
            rgba(255,43,214,.030),
            transparent 72%
        ),
        radial-gradient(
            780px 320px at 86% -10%,
            rgba(132,245,255,.026),
            transparent 72%
        ),
        #09090c;

    box-shadow:
        0 16px 44px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.012);
}


/* Header feels like a two-player dashboard instead of a plain row. */
.compare-page-v2
#compareResults
.compare-metric-table-v1
.compare-head-to-head-header-v11 {
    background: #0b0b0f;
}

.compare-page-v2
#compareResults
.compare-metric-table-v1
.compare-head-to-head-header-v11
> div:nth-child(2) {
    position: relative;

    background:
        radial-gradient(
            420px 170px at 0% 50%,
            rgba(255,43,214,.090),
            rgba(255,43,214,.026) 44%,
            transparent 74%
        );
}

.compare-page-v2
#compareResults
.compare-metric-table-v1
.compare-head-to-head-header-v11
> div:nth-child(3) {
    position: relative;

    background:
        radial-gradient(
            420px 170px at 0% 50%,
            rgba(132,245,255,.085),
            rgba(47,225,242,.024) 44%,
            transparent 74%
        );
}

.compare-page-v2
#compareResults
.compare-metric-table-v1
.compare-head-to-head-header-v11
> div:nth-child(2)::before,
.compare-page-v2
#compareResults
.compare-metric-table-v1
.compare-head-to-head-header-v11
> div:nth-child(3)::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 2px;
}

.compare-page-v2
#compareResults
.compare-metric-table-v1
.compare-head-to-head-header-v11
> div:nth-child(2)::before {
    background: rgba(255,43,214,.70);
}

.compare-page-v2
#compareResults
.compare-metric-table-v1
.compare-head-to-head-header-v11
> div:nth-child(3)::before {
    background: rgba(132,245,255,.70);
}


/* Metric rows feel like individual insight strips. */
.compare-page-v2 #compareResults .compare-metric-row-v1 {
    position: relative;

    min-height: 72px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.012),
            transparent 42%
        );

    transition:
        background 150ms ease;
}

.compare-page-v2 #compareResults .compare-metric-row-v1:hover {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.022),
            transparent 48%
        );
}

.compare-page-v2 #compareResults .compare-metric-label-v1 {
    position: relative;

    padding-left: 19px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.018),
            transparent 74%
        ) !important;
}

.compare-page-v2 #compareResults .compare-metric-label-v1::before {
    content: "";

    position: absolute;
    left: 10px;
    top: 50%;

    width: 3px;
    height: 24px;

    transform: translateY(-50%);

    background:
        linear-gradient(
            180deg,
            rgba(255,43,214,.78),
            rgba(132,245,255,.55)
        );
}

.compare-page-v2 #compareResults .compare-metric-label-v1 strong {
    font-size: 12px;
    letter-spacing: -.01em;
}

.compare-page-v2 #compareResults .compare-metric-label-v1 span {
    margin-top: 5px;

    color: #74747f;

    font-size: 8px;
}


/* Player A / B cells keep identity without becoming colored panels. */
.compare-page-v2
#compareResults
.compare-metric-row-v1
> div:nth-child(2) {
    background:
        radial-gradient(
            420px 150px at 0% 50%,
            rgba(255,43,214,.030),
            transparent 76%
        ) !important;
}

.compare-page-v2
#compareResults
.compare-metric-row-v1
> div:nth-child(3) {
    background:
        radial-gradient(
            420px 150px at 0% 50%,
            rgba(132,245,255,.028),
            transparent 76%
        ) !important;
}


/* Winning value gets a soft green aura rather than only green text. */
.compare-page-v2
#compareResults
.compare-metric-value-v1.is-better {
    box-shadow:
        inset 0 0 28px rgba(108,255,181,.032) !important;
}

.compare-page-v2
#compareResults
.compare-metric-value-v1.is-better strong {
    text-shadow:
        0 0 18px rgba(108,255,181,.16);
}


/* =========================================================
   POSITION STABILITY — CHECKPOINT CARDS
   ========================================================= */

.compare-page-v2 #compareResults .compare-stability-v1 {
    border: 1px solid #2c2c34;

    background:
        radial-gradient(
            760px 300px at 16% -10%,
            rgba(255,43,214,.026),
            transparent 72%
        ),
        radial-gradient(
            760px 300px at 84% -10%,
            rgba(132,245,255,.024),
            transparent 72%
        ),
        #09090c;

    box-shadow:
        0 16px 44px rgba(0,0,0,.16);
}

.compare-page-v2
#compareResults
.compare-stability-v1
.compare-head-to-head-header-v11
> div:nth-child(2) {
    background:
        radial-gradient(
            420px 170px at 0% 50%,
            rgba(255,43,214,.080),
            transparent 72%
        );
}

.compare-page-v2
#compareResults
.compare-stability-v1
.compare-head-to-head-header-v11
> div:nth-child(3) {
    background:
        radial-gradient(
            420px 170px at 0% 50%,
            rgba(132,245,255,.075),
            transparent 72%
        );
}


.compare-page-v2 #compareResults .compare-stability-row-v1 {
    min-height: 72px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.010),
            transparent 46%
        );

    transition:
        background 150ms ease;
}

.compare-page-v2 #compareResults .compare-stability-row-v1:hover {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.021),
            transparent 50%
        );
}


/* Turn "MOVE 10" into a compact checkpoint badge. */
.compare-page-v2
#compareResults
.compare-stability-row-v1
> strong {
    position: relative;

    justify-content: center;

    margin: 14px 11px;

    min-height: 34px;

    padding: 0 9px;

    border: 1px solid #303038 !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.022),
            transparent
        ) !important;

    color: #8a8a95;

    font-size: 7px;
    letter-spacing: .065em;
}


/* Player lanes get a soft identity wash. */
.compare-page-v2
#compareResults
.compare-stability-player-v1:nth-child(2) {
    background:
        radial-gradient(
            520px 180px at 0% 50%,
            rgba(255,43,214,.028),
            transparent 78%
        ) !important;
}

.compare-page-v2
#compareResults
.compare-stability-player-v1:nth-child(3) {
    background:
        radial-gradient(
            520px 180px at 0% 50%,
            rgba(132,245,255,.026),
            transparent 78%
        ) !important;
}


/* Bars feel more polished. */
.compare-page-v2 #compareResults .compare-stability-track-v1 {
    position: relative;

    height: 6px;

    overflow: visible;

    border-radius: 999px;

    background: #24242b;
}

.compare-page-v2 #compareResults .compare-stability-track-v1::before {
    content: "";

    position: absolute;
    inset: -5px 0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.010),
            rgba(255,255,255,.018),
            rgba(255,255,255,.010)
        );

    pointer-events: none;
}

.compare-page-v2 #compareResults .compare-stability-fill-v1 {
    position: relative;
    z-index: 1;

    height: 6px;

    box-shadow:
        0 0 12px rgba(255,255,255,.045);
}

.compare-page-v2
#compareResults
.compare-stability-player-v1.is-better
.compare-stability-fill-v1 {
    box-shadow:
        0 0 14px rgba(108,255,181,.15);
}


/* =========================================================
   WEAKNESS PROFILE — TWO DISTINCT TRAINING CARDS
   ========================================================= */

.compare-page-v2
#compareResults
.compare-weakness-card-v1 {
    position: relative;

    box-shadow:
        0 14px 38px rgba(0,0,0,.13);
}

.compare-page-v2
#compareResults
.compare-weakness-card-v1::before {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    top: 0;

    height: 2px;
}

.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-weakness-card-v1:first-child::before {
    background:
        linear-gradient(
            90deg,
            rgba(255,43,214,.95),
            rgba(255,43,214,.25),
            transparent
        );
}

.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-weakness-card-v1:last-child::before {
    background:
        linear-gradient(
            90deg,
            rgba(132,245,255,.95),
            rgba(132,245,255,.22),
            transparent
        );
}


/* Add clear A/B identity in the card header without changing HTML. */
.compare-page-v2
#compareResults
.compare-weakness-card-v1
.compare-card-player-v2 {
    position: relative;
}

.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-weakness-card-v1:first-child
.compare-card-player-v2::after {
    content: "PLAYER A";
}

.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-weakness-card-v1:last-child
.compare-card-player-v2::after {
    content: "PLAYER B";
}

.compare-page-v2
#compareResults
.compare-weakness-card-v1
.compare-card-player-v2::after {
    margin-left: auto;

    padding: 5px 7px;

    border: 1px solid #303038;

    color: #71717c;

    font-size: 6.5px;
    font-weight: 900;
    letter-spacing: .08em;
}


/* Main priority becomes the visual anchor. */
.compare-page-v2
#compareResults
.compare-weakness-card-v1
.compare-priority-main-v2 {
    min-height: 96px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.018),
            transparent 68%
        );
}

.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-weakness-card-v1:first-child
.compare-priority-main-v2 {
    background:
        radial-gradient(
            620px 260px at -8% 20%,
            rgba(255,43,214,.060),
            transparent 74%
        );
}

.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-weakness-card-v1:last-child
.compare-priority-main-v2 {
    background:
        radial-gradient(
            620px 260px at -8% 20%,
            rgba(132,245,255,.056),
            transparent 74%
        );
}

.compare-page-v2
#compareResults
.compare-weakness-card-v1
.compare-priority-main-v2 h3 {
    font-size: 19px;
}


/* Secondary row is quieter, but interactive-looking. */
.compare-page-v2
#compareResults
.compare-weakness-card-v1
.compare-priority-v2:not(.compare-priority-main-v2) {
    transition:
        background 140ms ease;
}

.compare-page-v2
#compareResults
.compare-weakness-card-v1
.compare-priority-v2:not(.compare-priority-main-v2):hover {
    background:
        rgba(255,255,255,.018);
}


/* Pressure phase feels like a compact insight footer. */
.compare-page-v2
#compareResults
.compare-weakness-card-v1
.compare-phase-v2 {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.014),
            transparent 74%
        );
}


/* =========================================================
   VALIDATED LESSONS — PREMIUM LESSON STACKS
   ========================================================= */

.compare-page-v2
#compareResults
.compare-lessons-card-v1 {
    position: relative;

    box-shadow:
        0 14px 38px rgba(0,0,0,.13);
}

.compare-page-v2
#compareResults
.compare-lessons-card-v1::before {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    top: 0;

    height: 2px;
}

.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:first-child::before {
    background:
        linear-gradient(
            90deg,
            rgba(255,43,214,.95),
            rgba(255,43,214,.24),
            transparent
        );
}

.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:last-child::before {
    background:
        linear-gradient(
            90deg,
            rgba(132,245,255,.95),
            rgba(132,245,255,.22),
            transparent
        );
}


/* A/B chip in the header */
.compare-page-v2
#compareResults
.compare-lessons-card-v1
.compare-card-player-v2 {
    position: relative;
}

.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:first-child
.compare-card-player-v2::after {
    content: "PLAYER A";
}

.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:last-child
.compare-card-player-v2::after {
    content: "PLAYER B";
}

.compare-page-v2
#compareResults
.compare-lessons-card-v1
.compare-card-player-v2::after {
    margin-left: auto;

    padding: 5px 7px;

    border: 1px solid #303038;

    color: #71717c;

    font-size: 6.5px;
    font-weight: 900;
    letter-spacing: .08em;
}


/* Lesson rows become small insight cards inside the stack. */
.compare-page-v2
#compareResults
.compare-lesson-v2 {
    position: relative;

    min-height: 78px;

    transition:
        background 145ms ease,
        transform 145ms ease;
}

.compare-page-v2
#compareResults
.compare-lesson-v2:hover {
    transform: translateX(2px);

    background:
        rgba(255,255,255,.018);
}


/* Player A lesson rail = fuchsia */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:first-child
.compare-lesson-index-v2 {
    color: rgba(255,43,214,.95);
}

.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:first-child
.compare-lesson-index-v2::before {
    background:
        linear-gradient(
            180deg,
            rgba(255,43,214,.92),
            rgba(255,43,214,.22)
        );
}


/* Player B lesson rail = cyan */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:last-child
.compare-lesson-index-v2 {
    color: rgba(132,245,255,.92);
}

.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:last-child
.compare-lesson-index-v2::before {
    background:
        linear-gradient(
            180deg,
            rgba(132,245,255,.92),
            rgba(132,245,255,.20)
        );
}


/* First lesson gets a very soft signature glow. */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:first-child
.compare-lesson-v2:first-of-type {
    background:
        radial-gradient(
            520px 200px at -8% 20%,
            rgba(255,43,214,.040),
            transparent 74%
        );
}

.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:last-child
.compare-lesson-v2:first-of-type {
    background:
        radial-gradient(
            520px 200px at -8% 20%,
            rgba(132,245,255,.036),
            transparent 74%
        );
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 820px) {

    .compare-page-v2
    #compareResults
    .compare-weakness-card-v1
    .compare-card-player-v2::after,
    .compare-page-v2
    #compareResults
    .compare-lessons-card-v1
    .compare-card-player-v2::after {
        display: none;
    }
}


@media (max-width: 680px) {

    .compare-page-v2
    #compareResults
    .compare-stability-row-v1
    > strong {
        margin: 8px 10px;

        min-height: 30px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .compare-page-v2
    #compareResults
    .compare-metric-row-v1,
    .compare-page-v2
    #compareResults
    .compare-stability-row-v1,
    .compare-page-v2
    #compareResults
    .compare-priority-v2,
    .compare-page-v2
    #compareResults
    .compare-lesson-v2 {
        transition: none;
    }
}



/* =========================================================
   COMPARE RESULTS V3.2 — STABILITY EVAL BARS
   ========================================================= */

.compare-page-v2 #compareResults .compare-stability-v1 {
    border: 1px solid #2c2c34;
    background:
        radial-gradient(820px 260px at 12% -8%, rgba(255,43,214,.032), transparent 72%),
        radial-gradient(820px 260px at 88% -8%, rgba(132,245,255,.028), transparent 72%),
        #09090c;
    box-shadow: 0 18px 44px rgba(0,0,0,.16);
    overflow: hidden;
}

.compare-page-v2 #compareResults .compare-stability-shell-v2 {
    display: grid;
    gap: 22px;
    padding: 26px;
}

.compare-page-v2 #compareResults .compare-stability-legend-v2 {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(260px,1.2fr) minmax(0,1fr);
    gap: 16px;
    align-items: center;
}

.compare-page-v2 #compareResults .compare-stability-legend-player-v2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
}

.compare-page-v2 #compareResults .compare-stability-legend-player-v2.is-a {
    background:
        radial-gradient(240px 90px at 0% 50%, rgba(255,43,214,.08), transparent 74%),
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
}

.compare-page-v2 #compareResults .compare-stability-legend-player-v2.is-b {
    background:
        radial-gradient(240px 90px at 0% 50%, rgba(132,245,255,.08), transparent 74%),
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
    justify-self: end;
}

.compare-page-v2 #compareResults .compare-stability-legend-dot-v2 {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.compare-page-v2 #compareResults .compare-stability-legend-player-v2.is-a .compare-stability-legend-dot-v2 {
    background: #ff2bd6;
    box-shadow: 0 0 14px rgba(255,43,214,.35);
}

.compare-page-v2 #compareResults .compare-stability-legend-player-v2.is-b .compare-stability-legend-dot-v2 {
    background: #84f5ff;
    box-shadow: 0 0 14px rgba(132,245,255,.35);
}

.compare-page-v2 #compareResults .compare-stability-legend-role-v2 {
    color: #7f7f89;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.compare-page-v2 #compareResults .compare-stability-legend-player-v2 strong {
    color: #f4d79f;
    font-size: 16px;
    font-weight: 760;
}

.compare-page-v2 #compareResults .compare-stability-legend-note-v2 {
    padding: 0 8px;
    color: #7d7d87;
    font-size: 11px;
    line-height: 1.55;
    text-align: center;
}

.compare-page-v2 #compareResults .compare-stability-grid-v2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.compare-page-v2 #compareResults .compare-stability-card-v2 {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 360px;
    padding: 22px 18px 18px;
    border: 1px solid rgba(255,255,255,.075);
    background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006));
    overflow: hidden;
}

.compare-page-v2 #compareResults .compare-stability-card-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.015), transparent 32%);
}

.compare-page-v2 #compareResults .compare-stability-card-v2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,43,214,.45), rgba(132,245,255,.4));
    opacity: .8;
}

.compare-page-v2 #compareResults .compare-stability-bars-v2 {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 20px;
    min-height: 290px;
}

.compare-page-v2 #compareResults .compare-stability-bar-player-v2 {
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    gap: 12px;
    min-width: 80px;
}

.compare-page-v2 #compareResults .compare-stability-value-v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(8,8,11,.86);
    color: #fff;
    font-size: 20px;
    font-weight: 780;
    line-height: 1;
}

.compare-page-v2 #compareResults .compare-stability-bar-player-v2.is-better .compare-stability-value-v2 {
    color: #8dffc0;
}

.compare-page-v2 #compareResults .compare-stability-column-v2 {
    display: flex;
    align-items: flex-end;
    min-height: 210px;
}

.compare-page-v2 #compareResults .compare-stability-column-track-v2 {
    position: relative;
    width: 54px;
    height: 210px;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 22%, rgba(255,255,255,.02));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}

.compare-page-v2 #compareResults .compare-stability-column-track-v2::before {
    content: "";
    position: absolute;
    inset: 10px 11px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
    opacity: .55;
}

.compare-page-v2 #compareResults .compare-stability-column-fill-v2 {
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 7px;
    height: 0;
    min-height: 8px;
    border-radius: 12px;
}

.compare-page-v2 #compareResults .compare-stability-bar-a-v2 .compare-stability-column-fill-v2 {
    background: linear-gradient(180deg, rgba(255,104,228,.95), rgba(255,43,214,.85));
    box-shadow: 0 0 24px rgba(255,43,214,.26);
}

.compare-page-v2 #compareResults .compare-stability-bar-b-v2 .compare-stability-column-fill-v2 {
    background: linear-gradient(180deg, rgba(145,248,255,.96), rgba(71,228,255,.84));
    box-shadow: 0 0 24px rgba(71,228,255,.24);
}

.compare-page-v2 #compareResults .compare-stability-bar-player-v2.is-better .compare-stability-column-track-v2 {
    box-shadow: inset 0 0 0 1px rgba(108,255,181,.06), 0 0 20px rgba(108,255,181,.05);
}

.compare-page-v2 #compareResults .compare-stability-player-label-v2 {
    width: 100%;
    max-width: 84px;
    color: #868691;
    font-size: 9px;
    line-height: 1.35;
    text-align: center;
    word-break: break-word;
}

.compare-page-v2 #compareResults .compare-stability-move-v2 {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.07);
    color: #f2f2f6;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: .02em;
    text-align: center;
    text-transform: uppercase;
}

@media (max-width: 1180px) {
    .compare-page-v2 #compareResults .compare-stability-grid-v2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .compare-page-v2 #compareResults .compare-stability-legend-v2 {
        grid-template-columns: 1fr;
    }
    .compare-page-v2 #compareResults .compare-stability-legend-player-v2.is-b {
        justify-self: stretch;
    }
    .compare-page-v2 #compareResults .compare-stability-legend-note-v2 {
        text-align: left;
        padding: 0;
    }
}

@media (max-width: 640px) {
    .compare-page-v2 #compareResults .compare-stability-shell-v2 {
        padding: 18px;
    }
    .compare-page-v2 #compareResults .compare-stability-grid-v2 {
        grid-template-columns: 1fr;
    }
    .compare-page-v2 #compareResults .compare-stability-card-v2 {
        min-height: 320px;
    }
    .compare-page-v2 #compareResults .compare-stability-bars-v2 {
        min-height: 250px;
    }
    .compare-page-v2 #compareResults .compare-stability-column-track-v2 {
        width: 48px;
        height: 180px;
    }
    .compare-page-v2 #compareResults .compare-stability-column-v2 {
        min-height: 180px;
    }
}


/* =========================================================
   COMPARE RESULTS V3.3 — PREMIUM THIN EVAL BARS

   Position Stability only.

   Changes:
   - no rounded bars / no pill UI
   - thinner vertical eval bars
   - fuchsia gradient = Player A
   - cyan/turquoise gradient = Player B
   - better value is indicated by a gradient number in that player's color
   - worse/equal value stays neutral white
   - checkpoint layout is cleaner and less "boxed"
   ========================================================= */


/* ---------------------------------------------------------
   MAIN SHELL
   --------------------------------------------------------- */

.compare-page-v2
#compareResults
.compare-stability-shell-v2 {
    gap: 18px;
    padding: 22px 24px 20px;
}


/* ---------------------------------------------------------
   LEGEND — lighter, less card-like
   --------------------------------------------------------- */

.compare-page-v2
#compareResults
.compare-stability-legend-v2 {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 1.25fr)
        minmax(0, 1fr);

    gap: 20px;

    padding-bottom: 16px;

    border-bottom: 1px solid rgba(255,255,255,.07);
}


.compare-page-v2
#compareResults
.compare-stability-legend-player-v2 {
    min-height: 0;

    padding: 0;

    border: 0;

    background: transparent !important;
}


.compare-page-v2
#compareResults
.compare-stability-legend-player-v2.is-b {
    justify-self: end;
}


.compare-page-v2
#compareResults
.compare-stability-legend-dot-v2 {
    width: 18px;
    height: 2px;

    border-radius: 0;
}


.compare-page-v2
#compareResults
.compare-stability-legend-player-v2.is-a
.compare-stability-legend-dot-v2 {
    background:
        linear-gradient(
            90deg,
            #ff2bd6,
            #ff68e4
        );

    box-shadow:
        0 0 12px rgba(255,43,214,.18);
}


.compare-page-v2
#compareResults
.compare-stability-legend-player-v2.is-b
.compare-stability-legend-dot-v2 {
    background:
        linear-gradient(
            90deg,
            #42dff2,
            #93f6ff
        );

    box-shadow:
        0 0 12px rgba(66,223,242,.16);
}


.compare-page-v2
#compareResults
.compare-stability-legend-role-v2 {
    color: #74747e;

    font-size: 8px;
}


.compare-page-v2
#compareResults
.compare-stability-legend-player-v2 strong {
    color: #f0d39a;

    font-size: 15px;
    font-weight: 760;
}


.compare-page-v2
#compareResults
.compare-stability-legend-note-v2 {
    color: #777782;

    font-size: 10px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   CHECKPOINT GRID — continuous board, not four heavy cards
   --------------------------------------------------------- */

.compare-page-v2
#compareResults
.compare-stability-grid-v2 {
    gap: 0;

    border-top: 1px solid rgba(255,255,255,.055);
    border-bottom: 1px solid rgba(255,255,255,.055);
}


.compare-page-v2
#compareResults
.compare-stability-card-v2 {
    min-height: 330px;

    padding: 18px 20px 14px;

    border: 0;
    border-right: 1px solid rgba(255,255,255,.065);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.012),
            transparent 46%
        );

    overflow: visible;
}


.compare-page-v2
#compareResults
.compare-stability-card-v2:last-child {
    border-right: 0;
}


.compare-page-v2
#compareResults
.compare-stability-card-v2::before,
.compare-page-v2
#compareResults
.compare-stability-card-v2::after {
    display: none;
}


/* ---------------------------------------------------------
   TWO BAR GROUP
   --------------------------------------------------------- */

.compare-page-v2
#compareResults
.compare-stability-bars-v2 {
    gap: 30px;

    min-height: 260px;
}


.compare-page-v2
#compareResults
.compare-stability-bar-player-v2 {
    grid-template-rows:
        auto
        1fr
        auto;

    gap: 10px;

    min-width: 70px;
}


/* ---------------------------------------------------------
   VALUES — no box, premium typography
   --------------------------------------------------------- */

.compare-page-v2
#compareResults
.compare-stability-value-v2 {
    min-width: 0;
    min-height: 0;

    padding: 0;

    border: 0;

    background: transparent;

    color: #f3f3f6;

    font-size: 19px;
    font-weight: 790;
    line-height: 1;

    letter-spacing: -.035em;

    font-variant-numeric:
        tabular-nums;

    text-shadow: none;
}


/* Player A better -> fuchsia gradient number */
.compare-page-v2
#compareResults
.compare-stability-bar-a-v2.is-better
.compare-stability-value-v2 {
    background:
        linear-gradient(
            90deg,
            #ff2bd6 0%,
            #ff83ea 48%,
            #ff2bd6 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* Player B better -> cyan/turquoise gradient number */
.compare-page-v2
#compareResults
.compare-stability-bar-b-v2.is-better
.compare-stability-value-v2 {
    background:
        linear-gradient(
            90deg,
            #39d9ed 0%,
            #a2f8ff 50%,
            #48e5f6 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* No green signal in this section anymore. */
.compare-page-v2
#compareResults
.compare-stability-bar-player-v2.is-better
.compare-stability-value-v2 {
    text-shadow: none;
}


/* ---------------------------------------------------------
   THIN EVAL BARS
   --------------------------------------------------------- */

.compare-page-v2
#compareResults
.compare-stability-column-v2 {
    min-height: 205px;
}


.compare-page-v2
#compareResults
.compare-stability-column-track-v2 {
    width: 22px;
    height: 205px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.085);

    border-radius: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018) 22%,
            rgba(255,255,255,.010)
        );

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.012);
}


.compare-page-v2
#compareResults
.compare-stability-column-track-v2::before {
    inset: 0;

    border-radius: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.028),
            transparent 34%,
            rgba(255,255,255,.012)
        );

    opacity: 1;
}


/* Fill becomes thinner inside the track and fully squared. */
.compare-page-v2
#compareResults
.compare-stability-column-fill-v2 {
    left: 4px;
    right: 4px;
    bottom: 4px;

    min-height: 4px;

    border-radius: 0;
}


/* Player A = multi-stop fuchsia gradient */
.compare-page-v2
#compareResults
.compare-stability-bar-a-v2
.compare-stability-column-fill-v2 {
    background:
        linear-gradient(
            180deg,
            #ff9bec 0%,
            #ff55dd 28%,
            #ff2bd6 62%,
            #bd0e9f 100%
        );

    box-shadow:
        0 0 14px rgba(255,43,214,.16);
}


/* Player B = multi-stop cyan/turquoise gradient */
.compare-page-v2
#compareResults
.compare-stability-bar-b-v2
.compare-stability-column-fill-v2 {
    background:
        linear-gradient(
            180deg,
            #b4fbff 0%,
            #79effa 28%,
            #42dff2 62%,
            #169ebd 100%
        );

    box-shadow:
        0 0 14px rgba(66,223,242,.15);
}


/* Better result gets only a slightly stronger color-specific glow. */
.compare-page-v2
#compareResults
.compare-stability-bar-a-v2.is-better
.compare-stability-column-fill-v2 {
    box-shadow:
        0 0 17px rgba(255,43,214,.24);
}


.compare-page-v2
#compareResults
.compare-stability-bar-b-v2.is-better
.compare-stability-column-fill-v2 {
    box-shadow:
        0 0 17px rgba(66,223,242,.23);
}


/* Remove the old green "better" track treatment. */
.compare-page-v2
#compareResults
.compare-stability-bar-player-v2.is-better
.compare-stability-column-track-v2 {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.012);
}


/* ---------------------------------------------------------
   PLAYER LABELS
   --------------------------------------------------------- */

.compare-page-v2
#compareResults
.compare-stability-player-label-v2 {
    max-width: 76px;

    color: #777782;

    font-size: 8px;
    line-height: 1.3;
}


/* ---------------------------------------------------------
   MOVE LABEL — cleaner footer
   --------------------------------------------------------- */

.compare-page-v2
#compareResults
.compare-stability-move-v2 {
    margin-top: 4px;
    padding-top: 13px;

    border-top: 1px solid rgba(255,255,255,.065);

    color: #ececf0;

    font-size: 10px;
    font-weight: 820;
    letter-spacing: .08em;
}


/* Tiny fuchsia-to-cyan rule below each checkpoint */
.compare-page-v2
#compareResults
.compare-stability-move-v2::after {
    content: "";

    display: block;

    width: 38px;
    height: 1px;

    margin: 8px auto 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,43,214,.72),
            rgba(132,245,255,.70)
        );
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1180px) {

    .compare-page-v2
    #compareResults
    .compare-stability-card-v2 {
        border-bottom: 1px solid rgba(255,255,255,.065);
    }

    .compare-page-v2
    #compareResults
    .compare-stability-card-v2:nth-child(2n) {
        border-right: 0;
    }
}


@media (max-width: 640px) {

    .compare-page-v2
    #compareResults
    .compare-stability-card-v2 {
        min-height: 300px;

        border-right: 0;
    }

    .compare-page-v2
    #compareResults
    .compare-stability-bars-v2 {
        min-height: 230px;
    }

    .compare-page-v2
    #compareResults
    .compare-stability-column-v2 {
        min-height: 176px;
    }

    .compare-page-v2
    #compareResults
    .compare-stability-column-track-v2 {
        width: 20px;
        height: 176px;
    }
}


/* =========================================================
   COMPARE RESULTS V3.4 — INPUT-MATCHED PLAYER PALETTES

   Goal:
   use the SAME visual family as the two username fields.

   Player A:
   dark premium fuchsia / burgundy-magenta

   Player B:
   dark premium teal / blue-green

   This replaces the previous bright cyan / near-white look.
   ========================================================= */

.compare-page-v2 #compareResults {
    --compare-player-a-deep: 46, 12, 41;
    --compare-player-a-mid: 92, 25, 78;
    --compare-player-a-soft: 128, 39, 108;

    --compare-player-b-deep: 34, 58, 62;
    --compare-player-b-mid: 52, 91, 96;
    --compare-player-b-soft: 76, 126, 132;

    /* override the old bright cyan result identity */
    --compare-result-b: 34, 58, 62;
}


/* =========================================================
   PLAYER HEAD-TO-HEAD
   ========================================================= */

/* Player A — same dark fuchsia family as the left username field */
.compare-page-v2
#compareResults
.compare-player-card-v1:first-child {
    background:
        radial-gradient(
            680px 330px at -8% 10%,
            rgba(var(--compare-player-a-deep), .82),
            rgba(var(--compare-player-a-mid), .18) 42%,
            transparent 74%
        ),
        #0d0d10 !important;
}


/* Player B — same dark teal family as the right username field */
.compare-page-v2
#compareResults
.compare-player-card-v1:last-child {
    background:
        radial-gradient(
            680px 330px at -8% 10%,
            rgba(var(--compare-player-b-deep), .84),
            rgba(var(--compare-player-b-mid), .20) 42%,
            transparent 74%
        ),
        #0d0d10 !important;
}


/* =========================================================
   SECTION ACCENT RULE
   ========================================================= */

.compare-page-v2
#compareResults
.compare-section-heading-v1::after {
    background:
        linear-gradient(
            90deg,
            rgba(128,39,108,.92),
            rgba(76,126,132,.76),
            transparent
        );
}


/* =========================================================
   AT A GLANCE
   ========================================================= */

.compare-page-v2
#compareResults
.compare-difference-v2:first-child {
    background:
        radial-gradient(
            460px 230px at -8% 0%,
            rgba(var(--compare-player-a-deep), .56),
            transparent 74%
        ),
        var(--compare-result-card);
}


.compare-page-v2
#compareResults
.compare-difference-v2:nth-child(3) {
    background:
        radial-gradient(
            460px 230px at -8% 0%,
            rgba(var(--compare-player-b-deep), .58),
            transparent 74%
        ),
        var(--compare-result-card);
}


/* =========================================================
   DECISION QUALITY
   ========================================================= */

/* A header */
.compare-page-v2
#compareResults
.compare-metric-table-v1
.compare-head-to-head-header-v11
> div:nth-child(2) {
    background:
        radial-gradient(
            480px 180px at 0% 50%,
            rgba(var(--compare-player-a-deep), .74),
            rgba(var(--compare-player-a-mid), .15) 46%,
            transparent 76%
        );
}


/* B header */
.compare-page-v2
#compareResults
.compare-metric-table-v1
.compare-head-to-head-header-v11
> div:nth-child(3) {
    background:
        radial-gradient(
            480px 180px at 0% 50%,
            rgba(var(--compare-player-b-deep), .78),
            rgba(var(--compare-player-b-mid), .16) 46%,
            transparent 76%
        );
}


.compare-page-v2
#compareResults
.compare-metric-table-v1
.compare-head-to-head-header-v11
> div:nth-child(2)::before {
    background:
        linear-gradient(
            180deg,
            #8a286f,
            #451238
        );
}


.compare-page-v2
#compareResults
.compare-metric-table-v1
.compare-head-to-head-header-v11
> div:nth-child(3)::before {
    background:
        linear-gradient(
            180deg,
            #4d7e83,
            #243e42
        );
}


/* A data lane */
.compare-page-v2
#compareResults
.compare-metric-row-v1
> div:nth-child(2) {
    background:
        radial-gradient(
            460px 155px at 0% 50%,
            rgba(var(--compare-player-a-deep), .30),
            transparent 78%
        ) !important;
}


/* B data lane */
.compare-page-v2
#compareResults
.compare-metric-row-v1
> div:nth-child(3) {
    background:
        radial-gradient(
            460px 155px at 0% 50%,
            rgba(var(--compare-player-b-deep), .34),
            transparent 78%
        ) !important;
}


/* =========================================================
   POSITION STABILITY — WHOLE PALETTE
   ========================================================= */

/* remove the old bright cyan ambience */
.compare-page-v2
#compareResults
.compare-stability-v1 {
    background:
        radial-gradient(
            820px 260px at 12% -8%,
            rgba(var(--compare-player-a-deep), .42),
            transparent 72%
        ),
        radial-gradient(
            820px 260px at 88% -8%,
            rgba(var(--compare-player-b-deep), .46),
            transparent 72%
        ),
        #09090c;
}


/* legend A */
.compare-page-v2
#compareResults
.compare-stability-legend-player-v2.is-a
.compare-stability-legend-dot-v2 {
    background:
        linear-gradient(
            90deg,
            #551345,
            #8a2872
        );

    box-shadow:
        0 0 10px rgba(92,25,78,.20);
}


/* legend B */
.compare-page-v2
#compareResults
.compare-stability-legend-player-v2.is-b
.compare-stability-legend-dot-v2 {
    background:
        linear-gradient(
            90deg,
            #243f43,
            #4b777c
        );

    box-shadow:
        0 0 10px rgba(52,91,96,.20);
}


/* Better A number = dark fuchsia gradient */
.compare-page-v2
#compareResults
.compare-stability-bar-a-v2.is-better
.compare-stability-value-v2 {
    background:
        linear-gradient(
            90deg,
            #7a2167 0%,
            #b54599 48%,
            #6a1a59 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* Better B number = dark teal gradient */
.compare-page-v2
#compareResults
.compare-stability-bar-b-v2.is-better
.compare-stability-value-v2 {
    background:
        linear-gradient(
            90deg,
            #38656a 0%,
            #64949a 50%,
            #31585d 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* A vertical bar — deliberately darker than V3.3 */
.compare-page-v2
#compareResults
.compare-stability-bar-a-v2
.compare-stability-column-fill-v2 {
    background:
        linear-gradient(
            180deg,
            #81236d 0%,
            #651954 30%,
            #49113d 66%,
            #280a22 100%
        );

    box-shadow:
        0 0 13px rgba(92,25,78,.22);
}


/* B vertical bar — dark teal, never white / bright cyan */
.compare-page-v2
#compareResults
.compare-stability-bar-b-v2
.compare-stability-column-fill-v2 {
    background:
        linear-gradient(
            180deg,
            #527d82 0%,
            #3d6469 30%,
            #2a484c 66%,
            #172c30 100%
        );

    box-shadow:
        0 0 13px rgba(52,91,96,.22);
}


/* Better bar gets only a restrained same-color bloom */
.compare-page-v2
#compareResults
.compare-stability-bar-a-v2.is-better
.compare-stability-column-fill-v2 {
    box-shadow:
        0 0 16px rgba(128,39,108,.28);
}


.compare-page-v2
#compareResults
.compare-stability-bar-b-v2.is-better
.compare-stability-column-fill-v2 {
    box-shadow:
        0 0 16px rgba(76,126,132,.27);
}


/* bottom rule follows the same dark player palette */
.compare-page-v2
#compareResults
.compare-stability-move-v2::after {
    background:
        linear-gradient(
            90deg,
            #6d1b5b,
            #416a6f
        );
}


/* =========================================================
   WEAKNESS PROFILE
   ========================================================= */

/* A card */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-weakness-card-v1:first-child {
    background:
        radial-gradient(
            680px 310px at -8% 0%,
            rgba(var(--compare-player-a-deep), .62),
            transparent 74%
        ),
        var(--compare-result-card);
}


/* B card */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-weakness-card-v1:last-child {
    background:
        radial-gradient(
            680px 310px at -8% 0%,
            rgba(var(--compare-player-b-deep), .64),
            transparent 74%
        ),
        var(--compare-result-card);
}


/* A top rail */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-weakness-card-v1:first-child::before {
    background:
        linear-gradient(
            90deg,
            #7f226b,
            #451239,
            transparent
        );
}


/* B top rail */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-weakness-card-v1:last-child::before {
    background:
        linear-gradient(
            90deg,
            #4b777c,
            #273f43,
            transparent
        );
}


/* A main priority */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-weakness-card-v1:first-child
.compare-priority-main-v2 {
    background:
        radial-gradient(
            640px 270px at -8% 20%,
            rgba(var(--compare-player-a-deep), .62),
            transparent 74%
        );
}


/* B main priority */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-weakness-card-v1:last-child
.compare-priority-main-v2 {
    background:
        radial-gradient(
            640px 270px at -8% 20%,
            rgba(var(--compare-player-b-deep), .65),
            transparent 74%
        );
}


/* =========================================================
   VALIDATED LESSONS
   ========================================================= */

/* A card */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:first-child {
    background:
        radial-gradient(
            680px 300px at -8% 0%,
            rgba(var(--compare-player-a-deep), .48),
            transparent 74%
        ),
        var(--compare-result-card);
}


/* B card */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:last-child {
    background:
        radial-gradient(
            680px 300px at -8% 0%,
            rgba(var(--compare-player-b-deep), .52),
            transparent 74%
        ),
        var(--compare-result-card);
}


/* A top rail */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:first-child::before {
    background:
        linear-gradient(
            90deg,
            #7f226b,
            #451239,
            transparent
        );
}


/* B top rail */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:last-child::before {
    background:
        linear-gradient(
            90deg,
            #4b777c,
            #273f43,
            transparent
        );
}


/* A lesson index / rail */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:first-child
.compare-lesson-index-v2 {
    color: #a63c8c;
}


.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:first-child
.compare-lesson-index-v2::before {
    background:
        linear-gradient(
            180deg,
            #8b2a75,
            #3e1035
        );
}


/* B lesson index / rail */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:last-child
.compare-lesson-index-v2 {
    color: #5c898f;
}


.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:last-child
.compare-lesson-index-v2::before {
    background:
        linear-gradient(
            180deg,
            #527d82,
            #253f43
        );
}


/* First lesson A */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:first-child
.compare-lesson-v2:first-of-type {
    background:
        radial-gradient(
            540px 210px at -8% 20%,
            rgba(var(--compare-player-a-deep), .38),
            transparent 74%
        );
}


/* First lesson B */
.compare-page-v2
#compareResults
.compare-two-columns-v1
> .compare-lessons-card-v1:last-child
.compare-lesson-v2:first-of-type {
    background:
        radial-gradient(
            540px 210px at -8% 20%,
            rgba(var(--compare-player-b-deep), .42),
            transparent 74%
        );
}


/* =========================================================
   CLOSING NOTE
   ========================================================= */

.compare-page-v2
#compareResults
.compare-footer-note-v1 {
    background:
        radial-gradient(
            720px 290px at -8% 0%,
            rgba(var(--compare-player-a-deep), .50),
            transparent 72%
        ),
        radial-gradient(
            660px 280px at 108% 100%,
            rgba(var(--compare-player-b-deep), .42),
            transparent 72%
        ),
        #0a0a0d;
}


/* =========================================================
   COMPARE RESULTS V3.5 — DECISION QUALITY SCORECARDS

   Decision Quality only.
   Uses the same dark player palettes as the username fields:
   A = dark fuchsia
   B = dark teal

   Winner signal:
   gradient number in that player's own palette.
   No green.
   ========================================================= */


/* The old table container becomes a clean card grid. */
.compare-page-v2
#compareResults
#compareDecisionTable.compare-metric-table-v1 {
    overflow: visible;

    border: 0;

    background: transparent;

    box-shadow: none;
}


/* =========================================================
   GRID
   ========================================================= */

.compare-page-v2
#compareResults
.compare-decision-grid-v2 {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


/* Final positive-decision metric gets a full-width summary treatment. */
.compare-page-v2
#compareResults
.compare-decision-card-v2.is-featured {
    grid-column: 1 / -1;
}


/* =========================================================
   METRIC CARD
   ========================================================= */

.compare-page-v2
#compareResults
.compare-decision-card-v2 {
    position: relative;

    min-width: 0;

    padding: 18px 18px 16px;

    border: 1px solid #2b2b33;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.016),
            rgba(255,255,255,.006)
        ),
        #0a0a0d;

    box-shadow:
        0 12px 30px rgba(0,0,0,.12);

    overflow: hidden;
}


/* Quiet two-player atmosphere inside each card. */
.compare-page-v2
#compareResults
.compare-decision-card-v2::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            440px 220px at -8% 90%,
            rgba(var(--compare-player-a-deep), .36),
            transparent 72%
        ),
        radial-gradient(
            440px 220px at 108% 90%,
            rgba(var(--compare-player-b-deep), .38),
            transparent 72%
        );
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.compare-page-v2
#compareResults
.compare-decision-card-head-v2 {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(190px, .9fr)
        minmax(0, 1.15fr);

    gap: 22px;

    align-items: end;

    padding-bottom: 15px;

    border-bottom:
        1px solid rgba(255,255,255,.065);
}


.compare-page-v2
#compareResults
.compare-decision-direction-v2 {
    display: block;

    margin-bottom: 6px;

    color: #6f6f79;

    font-size: 7px;
    font-weight: 850;
    letter-spacing: .09em;

    text-transform: uppercase;
}


.compare-page-v2
#compareResults
.compare-decision-card-head-v2 h3 {
    margin: 0;

    color: #f2f2f5;

    font-size: 16px;
    font-weight: 720;
    line-height: 1.12;

    letter-spacing: -.022em;
}


.compare-page-v2
#compareResults
.compare-decision-card-head-v2 p {
    margin: 0;

    color: #72727c;

    font-size: 9px;
    line-height: 1.48;

    text-align: right;
}


/* =========================================================
   SCOREBOARD
   ========================================================= */

.compare-page-v2
#compareResults
.compare-decision-score-v2 {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        34px
        minmax(0, 1fr);

    align-items: stretch;

    margin-top: 14px;
}


/* Vertical separator / VS instead of a table divider. */
.compare-page-v2
#compareResults
.compare-decision-vs-v2 {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #55555f;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: .12em;
}


/* =========================================================
   PLAYER RESULT BLOCKS
   ========================================================= */

.compare-page-v2
#compareResults
.compare-decision-player-v2 {
    position: relative;

    display: grid;
    grid-template-columns:
        1fr auto;

    grid-template-areas:
        "role value"
        "name value"
        "line line";

    gap: 2px 16px;

    min-height: 92px;

    padding: 14px 14px 11px;

    border: 1px solid rgba(255,255,255,.055);

    background:
        rgba(7,7,10,.62);
}


/* A uses the same dark fuchsia family as the left username field. */
.compare-page-v2
#compareResults
.compare-decision-player-a-v2 {
    background:
        radial-gradient(
            420px 180px at -8% 50%,
            rgba(var(--compare-player-a-deep), .68),
            rgba(var(--compare-player-a-mid), .12) 48%,
            transparent 76%
        ),
        rgba(7,7,10,.72);
}


/* B uses the same dark teal family as the right username field. */
.compare-page-v2
#compareResults
.compare-decision-player-b-v2 {
    background:
        radial-gradient(
            420px 180px at -8% 50%,
            rgba(var(--compare-player-b-deep), .72),
            rgba(var(--compare-player-b-mid), .13) 48%,
            transparent 76%
        ),
        rgba(7,7,10,.72);
}


.compare-page-v2
#compareResults
.compare-decision-player-role-v2 {
    grid-area: role;

    align-self: end;

    color: #696973;

    font-size: 7px;
    font-weight: 850;
    letter-spacing: .09em;

    text-transform: uppercase;
}


.compare-page-v2
#compareResults
.compare-decision-player-v2 small {
    grid-area: name;

    align-self: start;

    overflow: hidden;

    color: #d7bc87;

    font-size: 10px;
    font-weight: 680;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.compare-page-v2
#compareResults
.compare-decision-number-v2 {
    grid-area: value;

    align-self: center;

    color: #f3f3f6;

    font-size: 29px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: -.045em;

    font-variant-numeric:
        tabular-nums;

    text-align: right;
}


/* =========================================================
   PLAYER COLOR LINES
   ========================================================= */

.compare-page-v2
#compareResults
.compare-decision-player-line-v2 {
    grid-area: line;

    display: block;

    height: 2px;

    margin-top: 10px;
}


.compare-page-v2
#compareResults
.compare-decision-player-a-v2
.compare-decision-player-line-v2 {
    background:
        linear-gradient(
            90deg,
            #4a113e,
            #7f226b,
            transparent
        );
}


.compare-page-v2
#compareResults
.compare-decision-player-b-v2
.compare-decision-player-line-v2 {
    background:
        linear-gradient(
            90deg,
            #223c40,
            #4b777c,
            transparent
        );
}


/* =========================================================
   BETTER RESULT — NO GREEN
   ========================================================= */

/* A wins -> fuchsia gradient text. */
.compare-page-v2
#compareResults
.compare-decision-player-a-v2.is-better
.compare-decision-number-v2 {
    background:
        linear-gradient(
            90deg,
            #7b2168 0%,
            #b7479b 50%,
            #6b1a59 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* B wins -> dark teal gradient text. */
.compare-page-v2
#compareResults
.compare-decision-player-b-v2.is-better
.compare-decision-number-v2 {
    background:
        linear-gradient(
            90deg,
            #385f64 0%,
            #6b979c 50%,
            #31565a 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* Winner line is a little richer, still restrained. */
.compare-page-v2
#compareResults
.compare-decision-player-a-v2.is-better
.compare-decision-player-line-v2 {
    background:
        linear-gradient(
            90deg,
            #6c1a5a,
            #a43a89,
            #581449
        );

    box-shadow:
        0 0 12px rgba(128,39,108,.14);
}


.compare-page-v2
#compareResults
.compare-decision-player-b-v2.is-better
.compare-decision-player-line-v2 {
    background:
        linear-gradient(
            90deg,
            #315459,
            #608b90,
            #29494d
        );

    box-shadow:
        0 0 12px rgba(76,126,132,.13);
}


/* Ensure legacy green winner styling cannot leak into this section. */
.compare-page-v2
#compareResults
.compare-decision-player-v2.is-better
strong,
.compare-page-v2
#compareResults
.compare-decision-player-v2.is-worse
strong,
.compare-page-v2
#compareResults
.compare-decision-player-v2.is-equal
strong,
.compare-page-v2
#compareResults
.compare-decision-player-v2.is-neutral
strong {
    text-shadow: none;
}


/* =========================================================
   FEATURED FINAL METRIC
   ========================================================= */

.compare-page-v2
#compareResults
.compare-decision-card-v2.is-featured {
    background:
        radial-gradient(
            620px 250px at -8% 80%,
            rgba(var(--compare-player-a-deep), .24),
            transparent 72%
        ),
        radial-gradient(
            620px 250px at 108% 80%,
            rgba(var(--compare-player-b-deep), .26),
            transparent 72%
        ),
        #0a0a0d;
}


.compare-page-v2
#compareResults
.compare-decision-card-v2.is-featured
.compare-decision-card-head-v2 h3 {
    font-size: 18px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .compare-page-v2
    #compareResults
    .compare-decision-grid-v2 {
        grid-template-columns: 1fr;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-card-v2.is-featured {
        grid-column: auto;
    }
}


@media (max-width: 620px) {

    .compare-page-v2
    #compareResults
    .compare-decision-card-head-v2 {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-card-head-v2 p {
        text-align: left;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-score-v2 {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-vs-v2 {
        min-height: 20px;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-player-v2 {
        min-height: 82px;
    }
}




/* =========================================================
   COMPARE RESULTS V3.6 — DECISION QUALITY GRAPHIC LAYOUT

   Rebuilds Decision Quality into a more readable visual dashboard.
   - removes the card grid feeling
   - uses mirrored comparison fills
   - keeps player palettes from the username inputs
   - better result is shown through longer fill + gradient value
   ========================================================= */

.compare-page-v2
#compareResults
.compare-metric-table-v1 {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.compare-page-v2
#compareResults
.compare-decision-dashboard-v3 {
    position: relative;
    padding: 20px 22px 22px;
    border: 1px solid var(--compare-line);
    background:
        radial-gradient(
            560px 220px at -4% 12%,
            rgba(var(--compare-player-a-deep), .22),
            transparent 72%
        ),
        radial-gradient(
            560px 220px at 104% 12%,
            rgba(var(--compare-player-b-deep), .24),
            transparent 72%
        ),
        #0a0a0d;
}

.compare-page-v2
#compareResults
.compare-decision-legend-v3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 1.2fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.compare-page-v2
#compareResults
.compare-decision-legend-player-v3 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.compare-page-v2
#compareResults
.compare-decision-legend-player-v3.is-b {
    justify-content: flex-end;
}

.compare-page-v2
#compareResults
.compare-decision-legend-player-v3 span {
    display: block;
    width: 10px;
    height: 10px;
}

.compare-page-v2
#compareResults
.compare-decision-legend-player-v3.is-a span {
    background: linear-gradient(90deg, #511347, #8d2e76);
    box-shadow: 0 0 16px rgba(141, 46, 118, .18);
}

.compare-page-v2
#compareResults
.compare-decision-legend-player-v3.is-b span {
    background: linear-gradient(90deg, #2a494d, #5f9095);
    box-shadow: 0 0 16px rgba(95, 144, 149, .18);
}

.compare-page-v2
#compareResults
.compare-decision-legend-player-v3 strong {
    color: #d7bc87;
    font-size: 12px;
    font-weight: 730;
}

.compare-page-v2
#compareResults
.compare-decision-legend-v3 p {
    margin: 0;
    color: #7a7a84;
    font-size: 10px;
    line-height: 1.55;
    text-align: center;
}

.compare-page-v2
#compareResults
.compare-decision-rows-v3 {
    display: grid;
    gap: 0;
    margin-top: 4px;
}

.compare-page-v2
#compareResults
.compare-decision-row-v3 {
    position: relative;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.compare-page-v2
#compareResults
.compare-decision-row-v3:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

.compare-page-v2
#compareResults
.compare-decision-row-v3.is-featured {
    padding-top: 20px;
}

.compare-page-v2
#compareResults
.compare-decision-row-head-v3 {
    display: grid;
    grid-template-columns: minmax(240px, .9fr) minmax(0, 1fr);
    gap: 24px;
    align-items: end;
    margin-bottom: 14px;
}

.compare-page-v2
#compareResults
.compare-decision-direction-v3 {
    display: block;
    margin-bottom: 6px;
    color: #6b6b74;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.compare-page-v2
#compareResults
.compare-decision-row-head-v3 h3 {
    margin: 0;
    color: #f4f4f7;
    font-size: 18px;
    font-weight: 740;
    letter-spacing: -.025em;
}

.compare-page-v2
#compareResults
.compare-decision-row-v3.is-featured .compare-decision-row-head-v3 h3 {
    font-size: 20px;
}

.compare-page-v2
#compareResults
.compare-decision-row-head-v3 p {
    margin: 0;
    color: #75757f;
    font-size: 10px;
    line-height: 1.5;
    text-align: right;
}

.compare-page-v2
#compareResults
.compare-decision-graphic-v3 {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 180px;
    gap: 18px;
    align-items: center;
}

.compare-page-v2
#compareResults
.compare-decision-readout-v3 {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(8,8,11,.72);
}

.compare-page-v2
#compareResults
.compare-decision-readout-a-v3 {
    background:
        linear-gradient(90deg, rgba(var(--compare-player-a-deep), .56), transparent 90%),
        rgba(8,8,11,.76);
}

.compare-page-v2
#compareResults
.compare-decision-readout-b-v3 {
    background:
        linear-gradient(90deg, rgba(var(--compare-player-b-deep), .58), transparent 90%),
        rgba(8,8,11,.76);
}

.compare-page-v2
#compareResults
.compare-decision-readout-role-v3 {
    display: block;
    margin-bottom: 6px;
    color: #6b6b74;
    font-size: 7px;
    font-weight: 840;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.compare-page-v2
#compareResults
.compare-decision-value-v3 {
    display: block;
    margin-bottom: 3px;
    color: #f4f4f7;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

.compare-page-v2
#compareResults
.compare-decision-readout-v3 small {
    display: block;
    overflow: hidden;
    color: #d7bc87;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-page-v2
#compareResults
.compare-decision-readout-a-v3.is-better .compare-decision-value-v3 {
    background: linear-gradient(90deg, #621753 0%, #b13f91 52%, #7a2166 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.compare-page-v2
#compareResults
.compare-decision-readout-b-v3.is-better .compare-decision-value-v3 {
    background: linear-gradient(90deg, #355b60 0%, #74a0a5 52%, #436f74 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.compare-page-v2
#compareResults
.compare-decision-track-wrap-v3 {
    min-width: 0;
}

.compare-page-v2
#compareResults
.compare-decision-track-v3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
    gap: 0;
    align-items: center;
}

.compare-page-v2
#compareResults
.compare-decision-half-v3 {
    position: relative;
    height: 18px;
    border-top: 1px solid rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.05);
    background: rgba(255,255,255,.018);
    overflow: hidden;
}

.compare-page-v2
#compareResults
.compare-decision-half-v3.is-left {
    display: flex;
    justify-content: flex-end;
    border-left: 1px solid rgba(255,255,255,.05);
}

.compare-page-v2
#compareResults
.compare-decision-half-v3.is-right {
    display: flex;
    justify-content: flex-start;
    border-right: 1px solid rgba(255,255,255,.05);
}

.compare-page-v2
#compareResults
.compare-decision-fill-v3 {
    display: block;
    height: 100%;
    min-width: 2px;
}

.compare-page-v2
#compareResults
.compare-decision-fill-a-v3 {
    background: linear-gradient(90deg, #3e1036 0%, #6a1d59 55%, #ae3f8f 100%);
    box-shadow: 0 0 18px rgba(137, 49, 114, .18);
}

.compare-page-v2
#compareResults
.compare-decision-fill-b-v3 {
    background: linear-gradient(90deg, #355a5f 0%, #4f7d82 55%, #709fa4 100%);
    box-shadow: 0 0 18px rgba(96, 145, 151, .18);
}

.compare-page-v2
#compareResults
.compare-decision-spine-v3 {
    position: relative;
    display: block;
    width: 32px;
    height: 1px;
    justify-self: center;
    background: rgba(255,255,255,.12);
}

.compare-page-v2
#compareResults
.compare-decision-spine-v3::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,.18);
    transform: translate(-50%, -50%);
}

@media (max-width: 980px) {
    .compare-page-v2
    #compareResults
    .compare-decision-graphic-v3 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-legend-v3 {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-legend-player-v3.is-b {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .compare-page-v2
    #compareResults
    .compare-decision-row-head-v3 {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-row-head-v3 p {
        text-align: left;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-dashboard-v3 {
        padding: 16px;
    }
}


/* =========================================================
   COMPARE RESULTS V3.7 — COMPACT STACKED DECISION QUALITY

   Decision Quality only.

   Per metric:
   - metric title on the left
   - Player A row
   - Player B row directly underneath
   - one slim bar per player
   - value at the far right

   No green winner state.
   Winner value uses that player's own gradient.
   ========================================================= */


/* ---------------------------------------------------------
   RESET THE V3.6 VISUAL BOARD
   --------------------------------------------------------- */

.compare-page-v2
#compareResults
#compareDecisionTable.compare-metric-table-v1 {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}


.compare-page-v2
#compareResults
.compare-decision-dashboard-v4 {
    border: 1px solid #2a2a31;

    background:
        radial-gradient(
            520px 200px at -4% 0%,
            rgba(var(--compare-player-a-deep), .20),
            transparent 72%
        ),
        radial-gradient(
            520px 200px at 104% 0%,
            rgba(var(--compare-player-b-deep), .22),
            transparent 72%
        ),
        #0a0a0d;

    padding: 18px 20px 8px;
}


/* ---------------------------------------------------------
   SMALL PLAYER KEY
   --------------------------------------------------------- */

.compare-page-v2
#compareResults
.compare-decision-key-v4 {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    gap: 18px;
    align-items: center;

    padding-bottom: 13px;

    border-bottom:
        1px solid rgba(255,255,255,.055);
}


.compare-page-v2
#compareResults
.compare-decision-key-player-v4 {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    min-width: 0;
}


.compare-page-v2
#compareResults
.compare-decision-key-player-v4.is-b {
    justify-content: flex-end;
}


.compare-page-v2
#compareResults
.compare-decision-key-player-v4 > span {
    width: 18px;
    height: 2px;

    flex: 0 0 auto;
}


.compare-page-v2
#compareResults
.compare-decision-key-player-v4.is-a > span {
    background:
        linear-gradient(
            90deg,
            #49113d,
            #8b2c75
        );
}


.compare-page-v2
#compareResults
.compare-decision-key-player-v4.is-b > span {
    background:
        linear-gradient(
            90deg,
            #29484c,
            #608e93
        );
}


.compare-page-v2
#compareResults
.compare-decision-key-player-v4 strong {
    overflow: hidden;

    color: #d7bc87;

    font-size: 11px;
    font-weight: 720;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.compare-page-v2
#compareResults
.compare-decision-key-v4 > p {
    margin: 0;

    color: #6e6e78;

    font-size: 9px;
    line-height: 1.4;

    text-align: center;
}


/* ---------------------------------------------------------
   METRIC LIST
   --------------------------------------------------------- */

.compare-page-v2
#compareResults
.compare-decision-rows-v4 {
    display: grid;
}


.compare-page-v2
#compareResults
.compare-decision-row-v4 {
    display: grid;
    grid-template-columns:
        minmax(220px, .65fr)
        minmax(0, 1.35fr);

    gap: 30px;

    align-items: center;

    padding: 17px 0;

    border-bottom:
        1px solid rgba(255,255,255,.05);
}


.compare-page-v2
#compareResults
.compare-decision-row-v4:last-child {
    border-bottom: 0;
}


.compare-page-v2
#compareResults
.compare-decision-row-v4.is-featured {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.010),
            transparent 72%
        );
}


/* ---------------------------------------------------------
   METRIC COPY
   --------------------------------------------------------- */

.compare-page-v2
#compareResults
.compare-decision-meta-v4 {
    min-width: 0;
}


.compare-page-v2
#compareResults
.compare-decision-direction-v4 {
    display: block;

    margin-bottom: 5px;

    color: #666670;

    font-size: 6.5px;
    font-weight: 850;
    letter-spacing: .09em;

    text-transform: uppercase;
}


.compare-page-v2
#compareResults
.compare-decision-meta-v4 h3 {
    margin: 0 0 5px;

    color: #f3f3f6;

    font-size: 15px;
    font-weight: 720;
    line-height: 1.14;

    letter-spacing: -.018em;
}


.compare-page-v2
#compareResults
.compare-decision-row-v4.is-featured
.compare-decision-meta-v4 h3 {
    font-size: 16px;
}


.compare-page-v2
#compareResults
.compare-decision-meta-v4 p {
    max-width: 330px;

    margin: 0;

    color: #71717b;

    font-size: 8.5px;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   STACKED PLAYER LANES
   --------------------------------------------------------- */

.compare-page-v2
#compareResults
.compare-decision-lanes-v4 {
    display: grid;

    gap: 9px;
}


.compare-page-v2
#compareResults
.compare-decision-lane-v4 {
    display: grid;
    grid-template-columns:
        118px
        minmax(0, 1fr)
        64px;

    gap: 14px;

    align-items: center;

    min-height: 42px;

    padding: 7px 0;
}


/* ---------------------------------------------------------
   PLAYER LABEL
   --------------------------------------------------------- */

.compare-page-v2
#compareResults
.compare-decision-lane-player-v4 {
    min-width: 0;
}


.compare-page-v2
#compareResults
.compare-decision-lane-player-v4 > span {
    display: block;

    margin-bottom: 3px;

    color: #62626c;

    font-size: 6.5px;
    font-weight: 850;
    letter-spacing: .08em;

    text-transform: uppercase;
}


.compare-page-v2
#compareResults
.compare-decision-lane-player-v4 > strong {
    display: block;
    overflow: hidden;

    color: #d7bc87;

    font-size: 10px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   MINIMAL GRAPHIC BARS
   --------------------------------------------------------- */

.compare-page-v2
#compareResults
.compare-decision-lane-track-v4 {
    position: relative;

    height: 7px;

    overflow: hidden;

    border-top:
        1px solid rgba(255,255,255,.055);
    border-bottom:
        1px solid rgba(255,255,255,.035);

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,.030),
            rgba(255,255,255,.018)
        );
}


.compare-page-v2
#compareResults
.compare-decision-lane-fill-v4 {
    display: block;

    height: 100%;

    min-width: 2px;
}


/* A — dark fuchsia gradient */
.compare-page-v2
#compareResults
.compare-decision-lane-fill-a-v4 {
    background:
        linear-gradient(
            90deg,
            #3a0d31 0%,
            #641953 50%,
            #9d3484 100%
        );

    box-shadow:
        0 0 12px rgba(128,39,108,.15);
}


/* B — dark teal gradient */
.compare-page-v2
#compareResults
.compare-decision-lane-fill-b-v4 {
    background:
        linear-gradient(
            90deg,
            #20383b 0%,
            #385f64 50%,
            #628f94 100%
        );

    box-shadow:
        0 0 12px rgba(76,126,132,.14);
}


/* ---------------------------------------------------------
   VALUES
   --------------------------------------------------------- */

.compare-page-v2
#compareResults
.compare-decision-lane-value-v4 {
    color: #f3f3f6;

    font-size: 18px;
    font-weight: 790;
    line-height: 1;

    letter-spacing: -.035em;

    font-variant-numeric:
        tabular-nums;

    text-align: right;
}


/* Better A = fuchsia gradient value */
.compare-page-v2
#compareResults
.compare-decision-lane-a-v4.is-better
.compare-decision-lane-value-v4 {
    background:
        linear-gradient(
            90deg,
            #6a1a59,
            #ad3f91,
            #7c2168
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* Better B = teal gradient value */
.compare-page-v2
#compareResults
.compare-decision-lane-b-v4.is-better
.compare-decision-lane-value-v4 {
    background:
        linear-gradient(
            90deg,
            #34595e,
            #729ca1,
            #446f74
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* No green winner leak */
.compare-page-v2
#compareResults
.compare-decision-lane-v4.is-better strong,
.compare-page-v2
#compareResults
.compare-decision-lane-v4.is-worse strong,
.compare-page-v2
#compareResults
.compare-decision-lane-v4.is-equal strong,
.compare-page-v2
#compareResults
.compare-decision-lane-v4.is-neutral strong {
    text-shadow: none;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .compare-page-v2
    #compareResults
    .compare-decision-row-v4 {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-meta-v4 p {
        max-width: 620px;
    }
}


@media (max-width: 650px) {

    .compare-page-v2
    #compareResults
    .compare-decision-dashboard-v4 {
        padding: 14px 14px 4px;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-key-v4 {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-key-player-v4.is-b {
        justify-content: flex-start;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-key-v4 > p {
        text-align: left;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-lane-v4 {
        grid-template-columns:
            92px
            minmax(0, 1fr)
            56px;

        gap: 10px;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-lane-value-v4 {
        font-size: 16px;
    }
}


/* =========================================================
   COMPARE RESULTS V3.8 — TRUE VALUE SCALE + TIGHTER ALIGNMENT

   Decision Quality only.

   - chart starts further left
   - bar length follows raw numeric magnitude
   - top explanatory sentence removed
   ========================================================= */


/* Two-player key only. */
.compare-page-v2
#compareResults
.compare-decision-key-v4 {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 18px;
}


.compare-page-v2
#compareResults
.compare-decision-key-player-v4.is-b {
    justify-self: end;
}


/* Bring Player A/B rows and bars visibly closer to the metric labels. */
.compare-page-v2
#compareResults
.compare-decision-row-v4 {
    grid-template-columns:
        minmax(180px, .40fr)
        minmax(0, 1.60fr);

    gap: 14px;
}


/* Narrow the player-name column so the actual bars begin sooner. */
.compare-page-v2
#compareResults
.compare-decision-lane-v4 {
    grid-template-columns:
        98px
        minmax(0, 1fr)
        64px;

    gap: 11px;
}


.compare-page-v2
#compareResults
.compare-decision-meta-v4 p {
    max-width: 275px;
}


@media (max-width: 900px) {

    .compare-page-v2
    #compareResults
    .compare-decision-row-v4 {
        grid-template-columns: 1fr;

        gap: 12px;
    }
}


@media (max-width: 650px) {

    .compare-page-v2
    #compareResults
    .compare-decision-key-v4 {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-key-player-v4.is-b {
        justify-self: start;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-lane-v4 {
        grid-template-columns:
            86px
            minmax(0, 1fr)
            56px;

        gap: 9px;
    }
}


/* =========================================================
   COMPARE RESULTS V4.0 — DECISION QUALITY VISUAL CARDS

   Only the Decision Quality section was rebuilt.

   Goals:
   - easier to read at a glance
   - more visual without being overwhelming
   - clear side-by-side comparison
   - no arrows / no "better" tags
   ========================================================= */

.compare-page-v2
#compareResults
#compareDecisionTable.compare-metric-table-v1 {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.compare-page-v2
#compareResults
.compare-decision-dashboard-v5 {
    border: 1px solid #2a2a31;

    background:
        radial-gradient(
            520px 220px at 0% 0%,
            rgba(var(--compare-player-a-deep), .16),
            transparent 74%
        ),
        radial-gradient(
            520px 220px at 100% 0%,
            rgba(var(--compare-player-b-deep), .16),
            transparent 74%
        ),
        #0a0a0d;

    padding: 18px;
}

.compare-page-v2
#compareResults
.compare-decision-key-v5 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;

    padding-bottom: 14px;

    border-bottom: 1px solid rgba(255,255,255,.055);
}

.compare-page-v2
#compareResults
.compare-decision-key-player-v5 {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}

.compare-page-v2
#compareResults
.compare-decision-key-player-v5 > span {
    width: 20px;
    height: 2px;

    flex: 0 0 auto;
}

.compare-page-v2
#compareResults
.compare-decision-key-player-v5.is-a > span {
    background:
        linear-gradient(
            90deg,
            #4d123f 0%,
            #7f296b 52%,
            #b24493 100%
        );
}

.compare-page-v2
#compareResults
.compare-decision-key-player-v5.is-b > span {
    background:
        linear-gradient(
            90deg,
            #21393d 0%,
            #3d676c 52%,
            #6f9fa4 100%
        );
}

.compare-page-v2
#compareResults
.compare-decision-key-player-v5 strong {
    overflow: hidden;

    color: #d7bc87;

    font-size: 11px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-page-v2
#compareResults
.compare-decision-grid-v5 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;

    padding-top: 16px;
}

.compare-page-v2
#compareResults
.compare-decision-card-v5 {
    border: 1px solid rgba(255,255,255,.055);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.014),
            rgba(255,255,255,.005)
        );

    padding: 16px;
}

.compare-page-v2
#compareResults
.compare-decision-card-v5.is-featured {
    grid-column: 1 / -1;
}

.compare-page-v2
#compareResults
.compare-decision-card-top-v5 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;

    margin-bottom: 14px;
    padding-bottom: 12px;

    border-bottom: 1px solid rgba(255,255,255,.045);
}

.compare-page-v2
#compareResults
.compare-decision-copy-v5 {
    min-width: 0;
}

.compare-page-v2
#compareResults
.compare-decision-direction-v5 {
    display: block;

    margin-bottom: 5px;

    color: #666670;
    font-size: 6.5px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.compare-page-v2
#compareResults
.compare-decision-copy-v5 h3 {
    margin: 0 0 5px;

    color: #f3f3f6;
    font-size: 19px;
    font-weight: 760;
    line-height: 1.12;
    letter-spacing: -.025em;
}

.compare-page-v2
#compareResults
.compare-decision-copy-v5 p {
    max-width: 340px;

    margin: 0;

    color: #767680;
    font-size: 8.5px;
    line-height: 1.5;
}

.compare-page-v2
#compareResults
.compare-decision-gap-v5 {
    min-width: 88px;

    padding-top: 2px;

    text-align: right;
}

.compare-page-v2
#compareResults
.compare-decision-gap-v5 > span {
    display: block;

    margin-bottom: 4px;

    color: #676771;
    font-size: 6.5px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.compare-page-v2
#compareResults
.compare-decision-gap-v5 > strong {
    display: block;

    color: #f2f2f5;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.compare-page-v2
#compareResults
.compare-decision-gap-v5.is-a > strong {
    background:
        linear-gradient(
            90deg,
            #651a55 0%,
            #b24493 55%,
            #7a2368 100%
        );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.compare-page-v2
#compareResults
.compare-decision-gap-v5.is-b > strong {
    background:
        linear-gradient(
            90deg,
            #355b60 0%,
            #6d9aa0 55%,
            #426d72 100%
        );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.compare-page-v2
#compareResults
.compare-decision-gap-v5.is-equal > strong {
    color: #b9b9c1;
}

.compare-page-v2
#compareResults
.compare-decision-duel-v5 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.compare-page-v2
#compareResults
.compare-decision-player-v5 {
    padding: 12px 12px 11px;

    border-top: 1px solid rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.03);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.012),
            rgba(255,255,255,.004)
        );
}

.compare-page-v2
#compareResults
.compare-decision-player-v5.is-a {
    background:
        linear-gradient(
            90deg,
            rgba(var(--compare-player-a-deep), .17),
            transparent 88%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.012),
            rgba(255,255,255,.004)
        );
}

.compare-page-v2
#compareResults
.compare-decision-player-v5.is-b {
    background:
        linear-gradient(
            90deg,
            rgba(var(--compare-player-b-deep), .17),
            transparent 88%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.012),
            rgba(255,255,255,.004)
        );
}

.compare-page-v2
#compareResults
.compare-decision-player-head-v5 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;

    margin-bottom: 10px;
}

.compare-page-v2
#compareResults
.compare-decision-player-head-v5 > div:first-child {
    min-width: 0;
}

.compare-page-v2
#compareResults
.compare-decision-player-head-v5 span {
    display: block;

    margin-bottom: 3px;

    color: #666670;
    font-size: 6.5px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.compare-page-v2
#compareResults
.compare-decision-player-head-v5 strong {
    display: block;
    overflow: hidden;

    color: #d7bc87;
    font-size: 11px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compare-page-v2
#compareResults
.compare-decision-player-value-v5 {
    flex: 0 0 auto;

    color: #f3f3f6;
    font-size: 26px;
    font-weight: 820;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.compare-page-v2
#compareResults
.compare-decision-player-v5.is-a
.compare-decision-player-value-v5 {
    background:
        linear-gradient(
            90deg,
            #631953 0%,
            #b14392 55%,
            #7c2369 100%
        );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.compare-page-v2
#compareResults
.compare-decision-player-v5.is-b
.compare-decision-player-value-v5 {
    background:
        linear-gradient(
            90deg,
            #34595e 0%,
            #709ba0 55%,
            #456f74 100%
        );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.compare-page-v2
#compareResults
.compare-decision-player-v5:not(.is-better)
.compare-decision-player-value-v5 {
    opacity: .88;
    filter: saturate(.85);
}

.compare-page-v2
#compareResults
.compare-decision-player-track-v5 {
    position: relative;

    height: 5px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.02),
            rgba(255,255,255,.045),
            rgba(255,255,255,.02)
        );
}

.compare-page-v2
#compareResults
.compare-decision-player-fill-v5 {
    display: block;

    height: 100%;
    min-width: 2px;
}

.compare-page-v2
#compareResults
.compare-decision-player-fill-a-v5 {
    background:
        linear-gradient(
            90deg,
            #3a0d30 0%,
            #6a1d59 52%,
            #a63d8a 100%
        );

    box-shadow: 0 0 14px rgba(128, 39, 108, .18);
}

.compare-page-v2
#compareResults
.compare-decision-player-fill-b-v5 {
    background:
        linear-gradient(
            90deg,
            #20373b 0%,
            #426c71 52%,
            #709ea3 100%
        );

    box-shadow: 0 0 14px rgba(79, 128, 134, .18);
}

@media (max-width: 1040px) {
    .compare-page-v2
    #compareResults
    .compare-decision-grid-v5 {
        grid-template-columns: 1fr;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-card-v5.is-featured {
        grid-column: auto;
    }
}

@media (max-width: 720px) {
    .compare-page-v2
    #compareResults
    .compare-decision-dashboard-v5 {
        padding: 14px;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-key-v5 {
        flex-direction: column;
        align-items: flex-start;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-duel-v5 {
        grid-template-columns: 1fr;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-card-top-v5 {
        flex-direction: column;
        align-items: flex-start;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-gap-v5 {
        text-align: left;
    }
}


/* =========================================================
   COMPARE RESULTS V5.0 — BALANCED DECISION QUALITY BOARD

   Decision Quality ONLY.

   New structure:
   Player A value | metric + balance graphic | Player B value

   Every metric is one full-width row.
   No arrows.
   No "Better" tags.
   No uneven 2+1 card layout.
   ========================================================= */


.compare-page-v2
#compareResults
#compareDecisionTable.compare-metric-table-v1 {
    overflow: hidden;

    border:
        1px solid #2b2b32;

    background:
        #09090c;

    box-shadow:
        0 14px 38px rgba(0,0,0,.14);
}


/* =========================================================
   BOARD
   ========================================================= */

.compare-page-v2
#compareResults
.compare-decision-board-v6 {
    background:
        radial-gradient(
            520px 230px at -5% 0%,
            rgba(var(--compare-player-a-deep), .22),
            transparent 72%
        ),
        radial-gradient(
            520px 230px at 105% 0%,
            rgba(var(--compare-player-b-deep), .22),
            transparent 72%
        ),
        #09090c;
}


/* =========================================================
   BOARD HEADER
   ========================================================= */

.compare-page-v2
#compareResults
.compare-decision-board-head-v6 {
    display: grid;

    grid-template-columns:
        minmax(150px, .72fr)
        minmax(360px, 1.65fr)
        minmax(150px, .72fr);

    align-items: center;

    min-height: 64px;

    border-bottom:
        1px solid rgba(255,255,255,.065);

    background:
        rgba(10,10,13,.82);
}


.compare-page-v2
#compareResults
.compare-decision-board-player-v6 {
    min-width: 0;

    padding:
        13px
        18px;
}


.compare-page-v2
#compareResults
.compare-decision-board-player-v6.is-a {
    background:
        linear-gradient(
            90deg,
            rgba(var(--compare-player-a-deep), .42),
            transparent 92%
        );
}


.compare-page-v2
#compareResults
.compare-decision-board-player-v6.is-b {
    text-align: right;

    background:
        linear-gradient(
            270deg,
            rgba(var(--compare-player-b-deep), .46),
            transparent 92%
        );
}


.compare-page-v2
#compareResults
.compare-decision-board-player-v6 > span {
    display: block;

    margin-bottom: 4px;

    color:
        #6b6b75;

    font-size:
        6.5px;

    font-weight:
        850;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


.compare-page-v2
#compareResults
.compare-decision-board-player-v6 > strong {
    display: block;

    overflow: hidden;

    color:
        #d7bc87;

    font-size:
        13px;

    font-weight:
        730;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.compare-page-v2
#compareResults
.compare-decision-board-center-v6 {
    position: relative;

    text-align:
        center;
}


.compare-page-v2
#compareResults
.compare-decision-board-center-v6::before,
.compare-page-v2
#compareResults
.compare-decision-board-center-v6::after {
    content: "";

    position: absolute;

    top:
        50%;

    width:
        calc(50% - 82px);

    height:
        1px;

    background:
        rgba(255,255,255,.055);
}


.compare-page-v2
#compareResults
.compare-decision-board-center-v6::before {
    left: 0;
}


.compare-page-v2
#compareResults
.compare-decision-board-center-v6::after {
    right: 0;
}


.compare-page-v2
#compareResults
.compare-decision-board-center-v6 > span {
    color:
        #6c6c76;

    font-size:
        7px;

    font-weight:
        850;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


/* =========================================================
   METRIC ROW
   ========================================================= */

.compare-page-v2
#compareResults
.compare-decision-row-v6 {
    display: grid;

    grid-template-columns:
        minmax(150px, .72fr)
        minmax(360px, 1.65fr)
        minmax(150px, .72fr);

    align-items:
        stretch;

    min-height:
        128px;

    border-bottom:
        1px solid rgba(255,255,255,.052);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.008),
            transparent
        );
}


.compare-page-v2
#compareResults
.compare-decision-row-v6:last-child {
    border-bottom:
        0;
}


/* =========================================================
   PLAYER VALUES
   ========================================================= */

.compare-page-v2
#compareResults
.compare-decision-result-v6 {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-width:
        0;

    padding:
        18px;
}


.compare-page-v2
#compareResults
.compare-decision-result-v6.is-a {
    border-right:
        1px solid rgba(255,255,255,.045);

    background:
        linear-gradient(
            90deg,
            rgba(var(--compare-player-a-deep), .22),
            transparent 92%
        );
}


.compare-page-v2
#compareResults
.compare-decision-result-v6.is-b {
    align-items:
        flex-end;

    border-left:
        1px solid rgba(255,255,255,.045);

    background:
        linear-gradient(
            270deg,
            rgba(var(--compare-player-b-deep), .24),
            transparent 92%
        );
}


.compare-page-v2
#compareResults
.compare-decision-result-v6 > span {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #62626c;

    font-size:
        6.5px;

    font-weight:
        850;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


.compare-page-v2
#compareResults
.compare-decision-result-v6 > strong {
    color:
        #f3f3f6;

    font-size:
        29px;

    font-weight:
        820;

    line-height:
        1;

    letter-spacing:
        -.045em;

    font-variant-numeric:
        tabular-nums;
}


/* Winner A — same dark fuchsia player palette */
.compare-page-v2
#compareResults
.compare-decision-result-v6.is-a.is-better
> strong {
    background:
        linear-gradient(
            90deg,
            #691a58 0%,
            #b64698 52%,
            #782064 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    color:
        transparent;
}


/* Winner B — same dark teal player palette */
.compare-page-v2
#compareResults
.compare-decision-result-v6.is-b.is-better
> strong {
    background:
        linear-gradient(
            90deg,
            #34595e 0%,
            #709ba0 52%,
            #426c71 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    color:
        transparent;
}


/* =========================================================
   CENTER METRIC
   ========================================================= */

.compare-page-v2
#compareResults
.compare-decision-metric-v6 {
    display:
        grid;

    grid-template-rows:
        auto
        auto;

    align-content:
        center;

    gap:
        16px;

    min-width:
        0;

    padding:
        17px
        26px;
}


.compare-page-v2
#compareResults
.compare-decision-metric-copy-v6 {
    display:
        grid;

    grid-template-columns:
        minmax(170px, .8fr)
        minmax(0, 1fr);

    gap:
        22px;

    align-items:
        end;
}


.compare-page-v2
#compareResults
.compare-decision-direction-v6 {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #666670;

    font-size:
        6.5px;

    font-weight:
        850;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


.compare-page-v2
#compareResults
.compare-decision-metric-copy-v6 h3 {
    margin:
        0;

    color:
        #f2f2f5;

    font-size:
        15px;

    font-weight:
        730;

    line-height:
        1.12;

    letter-spacing:
        -.02em;
}


.compare-page-v2
#compareResults
.compare-decision-metric-copy-v6 p {
    margin:
        0;

    color:
        #70707a;

    font-size:
        8.5px;

    line-height:
        1.48;

    text-align:
        right;
}


/* =========================================================
   BALANCE GRAPHIC
   ========================================================= */

.compare-page-v2
#compareResults
.compare-decision-balance-v6 {
    min-width:
        0;
}


.compare-page-v2
#compareResults
.compare-decision-balance-track-v6 {
    position:
        relative;

    height:
        14px;

    margin:
        0
        4px;
}


.compare-page-v2
#compareResults
.compare-decision-balance-half-v6 {
    position:
        absolute;

    top:
        6px;

    height:
        2px;
}


.compare-page-v2
#compareResults
.compare-decision-balance-half-v6.is-a {
    left:
        0;

    right:
        50%;

    background:
        linear-gradient(
            90deg,
            #32102c 0%,
            #6a1d59 100%
        );
}


.compare-page-v2
#compareResults
.compare-decision-balance-half-v6.is-b {
    left:
        50%;

    right:
        0;

    background:
        linear-gradient(
            90deg,
            #29484c 0%,
            #507b80 100%
        );
}


.compare-page-v2
#compareResults
.compare-decision-balance-mid-v6 {
    position:
        absolute;

    left:
        50%;

    top:
        1px;

    width:
        1px;

    height:
        12px;

    transform:
        translateX(-50%);

    background:
        #565660;
}


.compare-page-v2
#compareResults
.compare-decision-balance-marker-v6 {
    position:
        absolute;

    top:
        0;

    width:
        14px;

    height:
        14px;

    transform:
        translateX(-50%);

    border:
        3px solid #09090c;

    background:
        #9a9aa2;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.10);
}


.compare-page-v2
#compareResults
.compare-decision-balance-marker-v6.is-a {
    background:
        linear-gradient(
            135deg,
            #6a1a59,
            #b54498
        );

    box-shadow:
        0 0 13px rgba(128,39,108,.25);
}


.compare-page-v2
#compareResults
.compare-decision-balance-marker-v6.is-b {
    background:
        linear-gradient(
            135deg,
            #34595e,
            #6e999e
        );

    box-shadow:
        0 0 13px rgba(76,126,132,.24);
}


.compare-page-v2
#compareResults
.compare-decision-balance-caption-v6 {
    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    margin-top:
        5px;
}


.compare-page-v2
#compareResults
.compare-decision-balance-caption-v6 > span {
    color:
        #5e5e68;

    font-size:
        6.5px;

    font-weight:
        900;
}


.compare-page-v2
#compareResults
.compare-decision-balance-caption-v6 > small {
    justify-self:
        center;

    color:
        #64646e;

    font-size:
        6.5px;

    font-weight:
        780;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;
}


.compare-page-v2
#compareResults
.compare-decision-balance-caption-v6 > small
> strong {
    margin-left:
        5px;

    color:
        #a1a1aa;

    font-size:
        8px;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {

    .compare-page-v2
    #compareResults
    .compare-decision-board-head-v6,
    .compare-page-v2
    #compareResults
    .compare-decision-row-v6 {
        grid-template-columns:
            130px
            minmax(280px, 1fr)
            130px;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-metric-v6 {
        padding-left:
            18px;

        padding-right:
            18px;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-metric-copy-v6 {
        grid-template-columns:
            1fr;

        gap:
            6px;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-metric-copy-v6 p {
        text-align:
            left;
    }
}


@media (max-width: 720px) {

    .compare-page-v2
    #compareResults
    .compare-decision-board-head-v6 {
        grid-template-columns:
            1fr
            1fr;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-board-center-v6 {
        display:
            none;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-row-v6 {
        grid-template-columns:
            1fr
            1fr;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-metric-v6 {
        grid-column:
            1 / -1;

        grid-row:
            1;

        padding:
            15px
            16px;

        border-bottom:
            1px solid rgba(255,255,255,.045);
    }

    .compare-page-v2
    #compareResults
    .compare-decision-result-v6 {
        grid-row:
            2;

        min-height:
            84px;

        padding:
            15px
            16px;
    }

    .compare-page-v2
    #compareResults
    .compare-decision-result-v6.is-a {
        border-right:
            1px solid rgba(255,255,255,.045);
    }

    .compare-page-v2
    #compareResults
    .compare-decision-result-v6.is-b {
        border-left:
            0;
    }
}


/* =========================================================
   COMPARE RESULTS V5.1 — PROPORTIONAL DECISION BAR

   Decision Quality ONLY.

   The A/B colored portions now reflect the raw statistic values.

   Example:
   A = 1
   B = 2
   -> A fuchsia = 33.33%
   -> B teal    = 66.67%

   The existing square marker remains and sits on the exact
   boundary between both proportions.
   ========================================================= */


/* Replace the fixed 50 / 50 halves from V5.0. */
.compare-page-v2
#compareResults
.compare-decision-balance-half-v6,
.compare-page-v2
#compareResults
.compare-decision-balance-mid-v6 {
    display: none;
}


/* Full proportional graphic track. */
.compare-page-v2
#compareResults
.compare-decision-balance-track-v6 {
    position: relative;

    height: 16px;

    margin:
        0
        4px;

    overflow: visible;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,.030),
            rgba(255,255,255,.018)
        );

    border-top:
        1px solid rgba(255,255,255,.045);

    border-bottom:
        1px solid rgba(255,255,255,.035);
}


/* Shared segment. */
.compare-page-v2
#compareResults
.compare-decision-balance-segment-v61 {
    position: absolute;

    top: 5px;

    height: 4px;
}


/* Player A proportion. */
.compare-page-v2
#compareResults
.compare-decision-balance-segment-v61.is-a {
    left: 0;

    background:
        linear-gradient(
            90deg,
            #35102f 0%,
            #631a54 52%,
            #a03987 100%
        );

    box-shadow:
        0 0 12px rgba(128,39,108,.16);
}


/* Player B proportion. */
.compare-page-v2
#compareResults
.compare-decision-balance-segment-v61.is-b {
    background:
        linear-gradient(
            90deg,
            #29474b 0%,
            #456e73 52%,
            #6f9ca1 100%
        );

    box-shadow:
        0 0 12px rgba(76,126,132,.15);
}


/* Keep the square, but make it slightly cleaner as the split point. */
.compare-page-v2
#compareResults
.compare-decision-balance-marker-v6 {
    top: 1px;

    width: 14px;
    height: 14px;

    z-index: 2;

    border:
        3px solid #09090c;
}


/* Square remains player-colored according to the better result. */
.compare-page-v2
#compareResults
.compare-decision-balance-marker-v6.is-a {
    background:
        linear-gradient(
            135deg,
            #681a57,
            #b44497
        );
}


.compare-page-v2
#compareResults
.compare-decision-balance-marker-v6.is-b {
    background:
        linear-gradient(
            135deg,
            #34595e,
            #719ca1
        );
}


/* Equal result = neutral square exactly in the middle. */
.compare-page-v2
#compareResults
.compare-decision-balance-marker-v6.is-equal {
    background:
        #8c8c95;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.10);
}