/* ====================================================================
   player_mm.css — Page-scoped styles for player_mm.php
   Production public MatchMaking player profile styles. Reuses shared tokens from
   styles.css (--color-ps-*, badge classes). Owns layout, sparkline,
   mode shelf, kpi strip, map mastery, combat radar, match feed,
   synergy panel, microinteractions.
   See PLAN-redesign-player-mm-claude.md.
   ==================================================================== */

/* ---------- Page shell ---------------------------------------------- */
.pmc-page {
    --pmc-accent: #2C12D9;
    --pmc-accent-soft: rgba(44, 18, 217, 0.18);
    --pmc-accent-hairline: rgba(44, 18, 217, 0.42);
    --pmc-mode-tint: rgba(255, 255, 255, 0.04);
    --pmc-row-spine: 4px;
    --pmc-radius-card: 0;
    --pmc-radius-pill: 0;
    --pmc-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 6px 24px rgba(0, 0, 0, 0.35);
    overflow-x: clip;
}

/* P9.6: smooth surface cross-fade on theme switch. */
.pmc-page,
.pmc-page .pmc-card,
.pmc-page .pmc-mode-card,
.pmc-page .pmc-kpi,
.pmc-page .pmc-map-mastery,
.pmc-page .pmc-combat-radar,
.pmc-page .pmc-feed-shell,
.pmc-page .pmc-social-card,
.pmc-page .pmc-ladder-tape {
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.pmc-shell {
    max-width: 1240px;
    margin-inline: auto;
    padding: 28px 20px 80px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: relative;
}

@media (min-width: 1024px) {
    .pmc-shell {
        padding: 36px 28px 96px;
        gap: 36px;
    }
}

.pmc-backlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-ps-muted);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 160ms ease;
    width: fit-content;
}
.pmc-backlink:hover { color: var(--color-ps-primary); }

/* ---------- Section headers (replaces the over-used uppercase recipe) - */
.pmc-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.pmc-section-title .pmc-rule {
    width: 4px;
    height: 18px;
    background: var(--pmc-accent);
    border-radius: 0;
}
.pmc-section-title h2 {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 13px;
    color: var(--color-ps-dark);
}
.pmc-section-title .pmc-section-meta {
    margin-left: auto;
    color: var(--color-ps-dimmed);
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.02em;
}

/* ---------- Surfaces ------------------------------------------------- */
.pmc-card {
    background: var(--color-ps-surface);
    border: 1px solid var(--color-ps-border-subtle);
    border-radius: 0;
    padding: 20px;
    box-shadow: var(--pmc-shadow-card);
}
@media (min-width: 768px) {
    .pmc-card { padding: 24px; }
}

html[data-theme="light"] .pmc-page .pmc-card {
    background: #FFFFFF;
    border-color: rgba(20, 22, 36, 0.08);
    box-shadow: 0 1px 2px rgba(20, 22, 36, 0.04), 0 12px 28px rgba(20, 22, 36, 0.06);
}
@media (prefers-color-scheme: light) {
    html[data-theme="auto"] .pmc-page .pmc-card {
        background: #FFFFFF;
        border-color: rgba(20, 22, 36, 0.08);
        box-shadow: 0 1px 2px rgba(20, 22, 36, 0.04), 0 12px 28px rgba(20, 22, 36, 0.06);
    }
}

/* ---------- Phase 3: Ladder Tape (hero) ----------------------------- */
.pmc-ladder-tape {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
    background:
        radial-gradient(1100px 360px at 6% 0%, rgba(44, 18, 217, 0.18), transparent 65%),
        radial-gradient(900px 320px at 100% 110%, rgba(255, 255, 255, 0.05), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
    border: 1px solid var(--color-ps-border-subtle);
    border-radius: 0;
    padding: 22px;
    position: relative;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .pmc-ladder-tape {
        grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 360px);
        align-items: stretch;
        padding: 28px;
        gap: 28px;
    }
}

html[data-theme="light"] .pmc-page .pmc-ladder-tape {
    background:
        radial-gradient(900px 320px at 6% 0%, rgba(44, 18, 217, 0.10), transparent 65%),
        linear-gradient(180deg, rgba(20, 22, 36, 0.02), rgba(20, 22, 36, 0));
    border-color: rgba(20, 22, 36, 0.10);
}
@media (prefers-color-scheme: light) {
    html[data-theme="auto"] .pmc-page .pmc-ladder-tape {
        background:
            radial-gradient(900px 320px at 6% 0%, rgba(44, 18, 217, 0.10), transparent 65%),
            linear-gradient(180deg, rgba(20, 22, 36, 0.02), rgba(20, 22, 36, 0));
        border-color: rgba(20, 22, 36, 0.10);
    }
}

/* Identity cell ------------------------------------------------------- */
.pmc-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-width: 0;
}
.pmc-identity-avatar {
    width: 88px;
    height: 88px;
    border-radius: 0;
    border: 1px solid var(--color-ps-border);
    object-fit: cover;
    background: var(--color-ps-elevated);
}
.pmc-identity-name {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 700;
    line-height: 1.05;
    min-width: 0;
    word-break: break-word;
}
.pmc-identity-login {
    color: var(--color-ps-dimmed);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    margin-top: 4px;
    word-break: break-all;
}
.pmc-identity-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.pmc-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-ps-elevated);
    border: 1px solid var(--color-ps-border);
    color: var(--color-ps-muted);
    padding: 4px 10px;
    border-radius: 0;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.pmc-pill.is-accent {
    background: var(--pmc-accent-soft);
    border-color: var(--pmc-accent-hairline);
    color: var(--pmc-accent);
}

/* Active Ladder cell -------------------------------------------------- */
.pmc-active-ladder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--color-ps-border-subtle);
}
@media (min-width: 1024px) {
    .pmc-active-ladder {
        padding: 0 28px;
        border-top: none;
        border-left: 1px solid var(--color-ps-border-subtle);
        border-right: 1px solid var(--color-ps-border-subtle);
    }
}
.pmc-active-mode {
    color: var(--color-ps-muted);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 800;
}
.pmc-active-elo {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 900;
    font-size: clamp(56px, 9vw, 88px);
    line-height: 0.95;
    color: var(--pmc-accent);
    font-feature-settings: "tnum";
    letter-spacing: -0.02em;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.pmc-active-elo .pmc-elo-suffix {
    font-size: 14px;
    color: var(--color-ps-dimmed);
    letter-spacing: 0.18em;
    font-weight: 800;
    text-transform: uppercase;
}
.pmc-active-tier-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.pmc-active-tier-row .badge { font-size: 11px; padding: 3px 10px; }
.pmc-active-rank {
    color: var(--color-ps-muted);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.pmc-rank-bar {
    height: 4px;
    background: var(--color-ps-elevated);
    border-radius: 0;
    overflow: hidden;
    position: relative;
}
.pmc-rank-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--pmc-accent), var(--color-ps-primary-light));
    border-radius: 0;
    transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pmc-tier-progress-line {
    color: var(--color-ps-dimmed);
    font-size: 12px;
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    column-gap: 0;
}
.pmc-tier-progress-line strong {
    color: var(--color-ps-dark);
    font-weight: 700;
}
.pmc-tier-progress-line .pmc-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 0 12px;
    white-space: nowrap;
}
.pmc-tier-progress-line .pmc-stat:first-child { padding-left: 0; }
.pmc-tier-progress-line .pmc-stat + .pmc-stat {
    border-left: 1px solid var(--color-ps-border);
}
.pmc-tier-progress-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pmc-tier-progress-line.is-split {
    flex-wrap: nowrap;
}

/* Trajectory cell ----------------------------------------------------- */
.pmc-trajectory {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--color-ps-border-subtle);
}
@media (min-width: 1024px) {
    .pmc-trajectory {
        padding-top: 0;
        border-top: none;
    }
}
.pmc-trajectory-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.pmc-trajectory-title {
    color: var(--color-ps-muted);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.pmc-trajectory-net {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.04em;
    font-feature-settings: "tnum";
}
.pmc-trajectory-net.is-positive { color: #4ADE80; }
.pmc-trajectory-net.is-negative { color: #F87171; }
.pmc-trajectory-net.is-neutral  { color: var(--color-ps-muted); }

.pmc-spark {
    width: 100%;
    height: 92px;
    display: block;
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), transparent 70%),
        radial-gradient(40% 90% at 0% 100%, rgba(44, 18, 217, 0.12), transparent 60%);
    overflow: visible;
}
.pmc-spark-path {
    fill: none;
    stroke: var(--pmc-accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: var(--pmc-spark-len, 600);
    stroke-dashoffset: var(--pmc-spark-len, 600);
    transition: stroke-dashoffset 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pmc-spark.is-revealed .pmc-spark-path { stroke-dashoffset: 0; }
.pmc-spark-area {
    fill: url(#pmc-spark-fill);
    opacity: 0.55;
}
.pmc-spark-empty {
    color: var(--color-ps-dimmed);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    text-align: center;
    padding: 24px 0;
}
.pmc-spark-zero {
    stroke: var(--color-ps-border);
    stroke-width: 1;
    stroke-dasharray: 3 4;
    fill: none;
}
.pmc-spark-dot {
    fill: var(--pmc-accent);
    transform-origin: center;
}
.pmc-spark-dot.is-loss { fill: #F87171; }
.pmc-spark-dot.is-win  { fill: #4ADE80; }

.pmc-deltas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pmc-delta-pip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    min-width: 38px;
    padding: 0 8px;
    border-radius: 0;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 0.04em;
    font-feature-settings: "tnum";
    background: var(--color-ps-elevated);
    color: var(--color-ps-muted);
}
.pmc-delta-pip.is-positive { background: rgba(74, 222, 128, 0.12); color: #4ADE80; }
.pmc-delta-pip.is-positive.is-strong { background: rgba(74, 222, 128, 0.22); }
.pmc-delta-pip.is-negative { background: rgba(248, 113, 113, 0.12); color: #F87171; }
.pmc-delta-pip.is-negative.is-strong { background: rgba(248, 113, 113, 0.22); }
.pmc-delta-pip.is-empty { color: var(--color-ps-dimmed); }

/* Tier ring ---------------------------------------------------------- */
.pmc-ring {
    --pmc-ring-size: 96px;
    --pmc-ring-stroke: 6px;
    width: var(--pmc-ring-size);
    height: var(--pmc-ring-size);
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.pmc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pmc-ring .pmc-ring-track {
    fill: none;
    stroke: var(--color-ps-elevated);
    stroke-width: var(--pmc-ring-stroke);
}
.pmc-ring .pmc-ring-fill {
    fill: none;
    stroke: var(--pmc-tier-color, var(--pmc-accent));
    stroke-width: var(--pmc-ring-stroke);
    stroke-linecap: round;
    stroke-dasharray: var(--pmc-ring-circ, 240);
    stroke-dashoffset: var(--pmc-ring-circ, 240);
    transition: stroke-dashoffset 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pmc-ring.is-revealed .pmc-ring-fill { stroke-dashoffset: var(--pmc-ring-offset, 0); }
.pmc-ring .pmc-ring-glyph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    pointer-events: none;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 900;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pmc-tier-color, var(--pmc-accent));
    line-height: 1;
}
.pmc-ring .pmc-ring-glyph .pmc-ring-pct {
    font-size: 20px;
    line-height: 1;
    font-feature-settings: "tnum";
}
.pmc-ring .pmc-ring-glyph .pmc-ring-tier {
    margin-top: 4px;
    color: var(--pmc-tier-color, var(--pmc-accent));
    font-size: 9px;
    letter-spacing: 0.18em;
    font-weight: 900;
    line-height: 1;
}
.pmc-ring .pmc-ring-glyph .pmc-ring-label {
    margin-top: 2px;
    color: var(--color-ps-muted);
    font-size: 8px;
    letter-spacing: 0.10em;
    line-height: 1;
}

/* Tier color overrides for the ring (mirrors styles.css .b-* gradients) */
.pmc-ring[data-tier="b-bronze"]   { --pmc-tier-color: #cd7f32; }
.pmc-ring[data-tier="b-silver"]   { --pmc-tier-color: #B0BEC5; }
.pmc-ring[data-tier="b-gold"]     { --pmc-tier-color: #f0c420; }
.pmc-ring[data-tier="b-platinum"] { --pmc-tier-color: #B0CFE0; }
.pmc-ring[data-tier="b-diamond"]  { --pmc-tier-color: #7c8cf8; }
.pmc-ring[data-tier="b-master"]   { --pmc-tier-color: #ff6b00; }

/* Identity layout: avatar + name (top), then ring + pills + streak (bottom). */
.pmc-identity-stack {
    display: grid;
    grid-template-rows: auto auto;
    gap: 14px;
    min-width: 0;
}
.pmc-identity-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
}
.pmc-identity-bottom {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
}
.pmc-identity-bottom .pmc-ring {
    --pmc-ring-size: 84px;
    --pmc-ring-stroke: 6px;
}
.pmc-identity-bottom .pmc-ring .pmc-ring-glyph .pmc-ring-pct { font-size: 16px; }
.pmc-identity-bottom .pmc-ring .pmc-ring-glyph .pmc-ring-tier {
    font-size: 9px;
    letter-spacing: 0.16em;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 3px;
}
.pmc-identity-bottom .pmc-ring .pmc-ring-glyph .pmc-ring-label {
    display: none;
}
.pmc-identity-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.pmc-streak-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-ps-elevated);
    border: 1px solid var(--color-ps-border);
    color: var(--color-ps-dark);
    padding: 4px 10px;
    border-radius: 0;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    font-feature-settings: "tnum";
}
.pmc-streak-chip .pmc-streak-dot {
    width: 6px;
    height: 6px;
    border-radius: 0;
}
.pmc-streak-chip[data-streak="W"] .pmc-streak-dot { background: #4ADE80; }
.pmc-streak-chip[data-streak="L"] .pmc-streak-dot { background: #F87171; }
.pmc-streak-chip[data-streak="-"] .pmc-streak-dot { background: var(--color-ps-dimmed); }

/* ---------- Mode Shelf ---------------------------------------------- */
.pmc-mode-shelf {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 980px) {
    .pmc-mode-shelf {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .pmc-mode-shelf {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        padding-bottom: 6px;
    }
    .pmc-mode-card { min-width: 240px; scroll-snap-align: start; }
}

.pmc-mode-card {
    --pmc-mode-accent: var(--pmc-accent);
    position: relative;
    background: var(--color-ps-surface);
    border: 1px solid var(--color-ps-border-subtle);
    border-radius: 0;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    display: grid;
    grid-template-rows: auto auto auto auto;
    gap: 10px;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
    overflow: hidden;
}
.pmc-mode-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--pmc-mode-accent);
    opacity: 0;
    transition: opacity 200ms ease;
}
.pmc-mode-card:hover {
    border-color: var(--pmc-accent-hairline);
    transform: translateY(-1px);
}
.pmc-mode-card.is-active {
    border-color: var(--pmc-mode-accent);
    background: linear-gradient(135deg, var(--pmc-accent-soft), var(--color-ps-surface) 70%);
}
.pmc-mode-card.is-active::before { opacity: 1; }
.pmc-mode-card.is-summary {
    grid-column: 1 / -1;
}
.pmc-mode-head {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    min-width: 0;
}
.pmc-mode-name {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-ps-dark);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pmc-mode-size {
    background: var(--color-ps-elevated);
    border: 1px solid var(--color-ps-border);
    color: var(--color-ps-muted);
    border-radius: 0;
    padding: 2px 8px;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.pmc-mode-card.is-active .pmc-mode-size {
    background: var(--pmc-accent-soft);
    border-color: var(--pmc-accent-hairline);
    color: var(--pmc-mode-accent);
}
.pmc-mode-meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}
.pmc-mode-mini-spark {
    height: 32px;
    width: 100%;
    display: block;
}
.pmc-mode-mini-spark path {
    fill: none;
    stroke: var(--pmc-mode-accent);
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    opacity: 0.85;
}
.pmc-mode-elo {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 900;
    font-size: 26px;
    line-height: 1;
    color: var(--pmc-mode-accent);
    font-feature-settings: "tnum";
}
.pmc-mode-rank {
    color: var(--color-ps-muted);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
}
.pmc-mode-rank strong { color: var(--color-ps-dark); }
.pmc-mode-tier {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pmc-mode-tier .badge { font-size: 10px; padding: 2px 8px; }
.pmc-mode-pips {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    margin-top: 2px;
    white-space: nowrap;
}
.pmc-mode-pip {
    width: 16px;
    height: 16px;
    border-radius: 0;
    background: var(--color-ps-elevated);
    border: 1px solid var(--color-ps-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    color: var(--color-ps-muted);
    text-transform: uppercase;
    padding: 0;
    box-sizing: border-box;
}
.pmc-mode-pip.is-w { background: rgba(74, 222, 128, 0.18); color: #4ADE80; border-color: rgba(74, 222, 128, 0.32); }
.pmc-mode-pip.is-l { background: rgba(248, 113, 113, 0.16); color: #F87171; border-color: rgba(248, 113, 113, 0.30); }

.pmc-mode-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 12px;
    align-items: center;
    color: var(--color-ps-dimmed);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.pmc-mode-foot .pmc-mode-foot-wr {
    color: var(--color-ps-muted);
    text-align: right;
    white-space: nowrap;
}
.pmc-mode-card .pmc-mode-foot-wr.is-positive { color: #4ADE80; }
.pmc-mode-card .pmc-mode-foot-wr.is-negative { color: #F87171; }

/* Summary card variant ----------------------------------------------- */
.pmc-mode-card.is-summary {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), var(--color-ps-surface) 65%);
}
.pmc-mode-card.is-summary.is-active {
    background: linear-gradient(135deg, var(--pmc-accent-soft), var(--color-ps-surface) 70%);
}
.pmc-mode-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}
.pmc-mode-summary-grid > div { display: flex; flex-direction: column; gap: 2px; }
.pmc-mode-summary-grid .pmc-summary-num {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
    font-feature-settings: "tnum";
}
.pmc-mode-summary-grid .pmc-summary-label {
    color: var(--color-ps-dimmed);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ---------- Phase 4: KPI Strip -------------------------------------- */
.pmc-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 12px;
}
.pmc-kpi {
    background: var(--color-ps-surface);
    border: 1px solid var(--color-ps-border-subtle);
    border-radius: 0;
    padding: 14px 16px;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 4px;
    min-height: 84px;
}
.pmc-kpi-label {
    color: var(--color-ps-dimmed);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.pmc-kpi-value {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 900;
    font-size: 26px;
    line-height: 1.05;
    color: var(--color-ps-dark);
    font-feature-settings: "tnum";
}
.pmc-kpi-value.is-positive { color: #4ADE80; }
.pmc-kpi-value.is-negative { color: #F87171; }
.pmc-kpi-value.is-neutral  { color: var(--color-ps-muted); }
.pmc-kpi-help {
    color: var(--color-ps-muted);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.35;
}
.pmc-kpi-baseline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.pmc-kpi-baseline-bar {
    flex: 1;
    height: 4px;
    border-radius: 0;
    background: var(--color-ps-elevated);
    position: relative;
    overflow: hidden;
}
.pmc-kpi-baseline-bar > span {
    display: block;
    position: absolute;
    inset: 0 auto 0 var(--pmc-baseline-pos, 50%);
    width: 6px;
    transform: translateX(-50%);
    background: var(--pmc-accent);
    border-radius: 0;
}
.pmc-kpi-baseline-text {
    color: var(--color-ps-dimmed);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ---------- Phase 5: Map Mastery + Combat Radar --------------------- */
.pmc-insights {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}
@media (min-width: 1024px) {
    .pmc-insights {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        align-items: stretch;
    }
}
.pmc-map-mastery, .pmc-combat-radar {
    background: var(--color-ps-surface);
    border: 1px solid var(--color-ps-border-subtle);
    border-radius: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
html[data-theme="light"] .pmc-page .pmc-map-mastery,
html[data-theme="light"] .pmc-page .pmc-combat-radar {
    background: #FFFFFF;
    border-color: rgba(20, 22, 36, 0.08);
}
@media (prefers-color-scheme: light) {
    html[data-theme="auto"] .pmc-page .pmc-map-mastery,
    html[data-theme="auto"] .pmc-page .pmc-combat-radar {
        background: #FFFFFF;
        border-color: rgba(20, 22, 36, 0.08);
    }
}
.pmc-map-list {
    display: grid;
    gap: 12px;
}
.pmc-map-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}
.pmc-map-thumb {
    width: 36px;
    height: 24px;
    border-radius: 0;
    background:
        linear-gradient(135deg, var(--pmc-accent-soft), rgba(255,255,255,0.06)),
        var(--color-ps-elevated);
    border: 1px solid var(--color-ps-border);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.pmc-map-thumb[data-art] {
    background-size: cover;
    background-position: center;
}
.pmc-map-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--color-ps-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pmc-map-meta {
    color: var(--color-ps-dimmed);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-feature-settings: "tnum";
    white-space: nowrap;
}
.pmc-map-meta .pmc-map-wr.is-positive { color: #4ADE80; }
.pmc-map-meta .pmc-map-wr.is-negative { color: #F87171; }
.pmc-map-meta .pmc-map-wr.is-neutral  { color: var(--color-ps-muted); }
.pmc-map-bar {
    grid-column: 1 / -1;
    height: 6px;
    background: var(--color-ps-elevated);
    border-radius: 0;
    overflow: hidden;
    position: relative;
}
.pmc-map-bar > span {
    display: block;
    height: 100%;
    border-radius: 0;
    transform-origin: left center;
    transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pmc-map-bar.is-positive > span { background: linear-gradient(90deg, #34D399, #10B981); }
.pmc-map-bar.is-mixed    > span { background: linear-gradient(90deg, #F59E0B, #D97706); }
.pmc-map-bar.is-negative > span { background: linear-gradient(90deg, #F87171, #EF4444); }
.pmc-map-bar.is-low-sample > span {
    background-image: repeating-linear-gradient(45deg, currentColor 0 4px, transparent 4px 8px);
    color: var(--color-ps-muted);
    opacity: 0.55;
}
.pmc-map-row.is-low-sample .pmc-map-name { color: var(--color-ps-muted); }
.pmc-map-row.is-low-sample .pmc-map-meta { color: var(--color-ps-dimmed); }
.pmc-map-row.is-low-sample .pmc-map-meta::after {
    content: " · low sample";
    color: var(--color-ps-dimmed);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
}

.pmc-toggle-pill {
    display: inline-flex;
    background: var(--color-ps-elevated);
    border: 1px solid var(--color-ps-border);
    border-radius: 0;
    padding: 2px;
    gap: 2px;
}
.pmc-toggle-pill button {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--color-ps-muted);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 0;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease;
}
.pmc-toggle-pill button.is-active {
    background: var(--pmc-accent-soft);
    color: var(--pmc-accent);
}
.pmc-toggle-pill button:hover:not(.is-active) { color: var(--color-ps-dark); }

.pmc-radar-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}
.pmc-radar-svg {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    height: 260px;
    display: block;
    overflow: visible;
}
.pmc-radar-axis {
    fill: none;
    stroke: var(--color-ps-border);
    stroke-width: 1;
}
.pmc-radar-grid {
    fill: none;
    stroke: var(--color-ps-border-subtle);
    stroke-dasharray: 2 4;
}
.pmc-radar-baseline {
    fill: rgba(255, 255, 255, 0.04);
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 1;
}
.pmc-radar-player {
    fill: rgba(44, 18, 217, 0.32);
    stroke: var(--pmc-accent);
    stroke-width: 1.5;
}
.pmc-radar-label {
    fill: var(--color-ps-muted);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 800;
}
.pmc-radar-num {
    fill: var(--color-ps-dark);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    font-weight: 900;
    font-feature-settings: "tnum";
}
.pmc-radar-caption {
    color: var(--color-ps-dimmed);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.4;
}

/* ---------- Phase 6: Match Feed ------------------------------------- */
.pmc-feed-shell {
    background: var(--color-ps-surface);
    border: 1px solid var(--color-ps-border-subtle);
    border-radius: 0;
    overflow: hidden;
}
html[data-theme="light"] .pmc-page .pmc-feed-shell {
    background: #FFFFFF;
    border-color: rgba(20, 22, 36, 0.08);
}
@media (prefers-color-scheme: light) {
    html[data-theme="auto"] .pmc-page .pmc-feed-shell {
        background: #FFFFFF;
        border-color: rgba(20, 22, 36, 0.08);
    }
}
.pmc-feed-head {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-ps-border-subtle);
}
@media (min-width: 768px) {
    .pmc-feed-head {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}
.pmc-feed-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pmc-chip {
    appearance: none;
    background: var(--color-ps-elevated);
    border: 1px solid var(--color-ps-border);
    color: var(--color-ps-muted);
    border-radius: 0;
    padding: 6px 12px;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.pmc-chip[aria-pressed="true"] {
    background: var(--pmc-accent-soft);
    border-color: var(--pmc-accent-hairline);
    color: var(--pmc-accent);
}
.pmc-chip:hover { border-color: var(--pmc-accent-hairline); color: var(--color-ps-dark); }

.pmc-feed-body {
    display: flex;
    flex-direction: column;
}
.pmc-day-group { padding: 0; }
.pmc-day-head {
    position: sticky;
    top: 0;
    background: var(--color-ps-elevated);
    border-bottom: 1px solid var(--color-ps-border-subtle);
    padding: 10px 18px;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-ps-muted);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pmc-day-head .pmc-day-count {
    color: var(--color-ps-dimmed);
}

.pmc-match-row {
    display: grid;
    grid-template-columns: var(--pmc-row-spine) 96px 96px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-ps-border-subtle);
    cursor: pointer;
    transition: background 160ms ease;
    position: relative;
}
.pmc-match-row:hover { background: var(--color-ps-hover); }
.pmc-match-row.is-expanded { background: var(--color-ps-active); }
.pmc-match-row::before {
    content: "";
    grid-column: 1;
    align-self: stretch;
    background: var(--pmc-row-mode, var(--color-ps-border));
    border-radius: 0;
}
.pmc-match-row[data-status="CANCELLED"] { opacity: 0.6; }

.pmc-match-outcome {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'Chakra Petch', sans-serif;
    font-feature-settings: "tnum";
}
.pmc-match-outcome .pmc-outcome-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    width: fit-content;
}
.pmc-outcome-chip.is-win  { background: rgba(74, 222, 128, 0.18); color: #4ADE80; }
.pmc-outcome-chip.is-loss { background: rgba(248, 113, 113, 0.18); color: #F87171; }
.pmc-outcome-chip.is-cancelled { background: rgba(148, 163, 184, 0.16); color: #94A3B8; }
.pmc-match-outcome .pmc-mode-tag {
    color: var(--color-ps-dimmed);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 800;
}
.pmc-match-score {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: 'Chakra Petch', sans-serif;
    font-feature-settings: "tnum";
}
.pmc-score-blue { color: #60A5FA; font-weight: 900; font-size: 18px; }
.pmc-score-red  { color: #F87171; font-weight: 900; font-size: 18px; }
.pmc-score-sep  { color: var(--color-ps-dimmed); font-weight: 800; }
.pmc-match-map {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
}
.pmc-match-map .pmc-map-thumb { width: 36px; height: 24px; }
.pmc-match-map .pmc-match-map-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--color-ps-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pmc-match-map .pmc-match-round {
    color: var(--color-ps-dimmed);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    margin-top: 2px;
}
.pmc-match-time {
    color: var(--color-ps-dimmed);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
}
.pmc-match-chevron {
    width: 16px;
    height: 16px;
    color: var(--color-ps-dimmed);
    transition: transform 200ms ease;
}
.pmc-match-row.is-expanded .pmc-match-chevron { transform: rotate(180deg); }

.pmc-match-detail {
    grid-column: 1 / -1;
    display: none;
    padding: 14px 18px 18px;
    background: var(--color-ps-elevated);
    border-bottom: 1px solid var(--color-ps-border-subtle);
}
.pmc-match-detail.is-open { display: block; }
.pmc-match-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
}
@media (max-width: 720px) {
    .pmc-match-detail-grid { grid-template-columns: minmax(0, 1fr); }
}
.pmc-roster-title {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.pmc-roster-blue .pmc-roster-title { color: #60A5FA; }
.pmc-roster-red  .pmc-roster-title { color: #F87171; }
.pmc-roster-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pmc-roster-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.02);
    text-decoration: none;
    color: inherit;
    transition: background 160ms ease;
    font-size: 12px;
    line-height: 1.2;
}
.pmc-roster-row:hover { background: rgba(255, 255, 255, 0.06); }
.pmc-roster-row.is-self { background: var(--pmc-accent-soft); }
.pmc-roster-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmc-roster-delta {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    font-weight: 800;
    font-feature-settings: "tnum";
    letter-spacing: 0.04em;
}
.pmc-roster-delta.is-positive { color: #4ADE80; }
.pmc-roster-delta.is-negative { color: #F87171; }
.pmc-roster-delta.is-neutral  { color: var(--color-ps-dimmed); }

.pmc-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pmc-detail-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 0;
    background: var(--color-ps-elevated);
    border: 1px solid var(--color-ps-border);
    color: var(--color-ps-muted);
    text-decoration: none;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: border-color 160ms ease, color 160ms ease;
}
.pmc-detail-actions a:hover { border-color: var(--pmc-accent-hairline); color: var(--pmc-accent); }

/* Cancelled accordion ------------------------------------------------- */
.pmc-cancelled-row {
    padding: 10px 18px;
    background: rgba(148, 163, 184, 0.06);
    color: var(--color-ps-muted);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-ps-border-subtle);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pmc-cancelled-row .pmc-cancelled-count {
    color: var(--color-ps-dark);
    font-weight: 900;
}

/* Skeleton rows ------------------------------------------------------- */
.pmc-skeleton-row {
    display: grid;
    grid-template-columns: var(--pmc-row-spine) 96px 96px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-ps-border-subtle);
}
.pmc-skeleton-block {
    height: 14px;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%);
    background-size: 240% 100%;
    animation: pmc-shimmer 1.4s linear infinite;
}
@keyframes pmc-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.pmc-feed-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--color-ps-border-subtle);
}
.pmc-feed-pagination[aria-hidden="true"] { display: none; }
.pmc-feed-pagination .pmc-page-info {
    color: var(--color-ps-dimmed);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
}
.pmc-feed-pagination .pmc-page-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pmc-feed-pagination button {
    appearance: none;
    background: var(--color-ps-elevated);
    border: 1px solid var(--color-ps-border);
    color: var(--color-ps-muted);
    border-radius: 0;
    padding: 6px 10px;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease;
}
.pmc-feed-pagination button:not(:disabled):hover { border-color: var(--pmc-accent-hairline); color: var(--pmc-accent); }
.pmc-feed-pagination button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- Phase 7: Synergy & Rivalry ------------------------------ */
.pmc-social {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
    .pmc-social { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.pmc-social-card {
    background: var(--color-ps-surface);
    border: 1px solid var(--color-ps-border-subtle);
    border-radius: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
html[data-theme="light"] .pmc-page .pmc-social-card {
    background: #FFFFFF;
    border-color: rgba(20, 22, 36, 0.08);
}
@media (prefers-color-scheme: light) {
    html[data-theme="auto"] .pmc-page .pmc-social-card {
        background: #FFFFFF;
        border-color: rgba(20, 22, 36, 0.08);
    }
}
.pmc-social-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pmc-social-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.02);
    transition: background 160ms ease, transform 160ms ease;
}
.pmc-social-row:hover { background: rgba(44, 18, 217, 0.10); transform: translateY(-1px); }
.pmc-social-rank {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: var(--color-ps-dimmed);
    width: 22px;
    text-align: right;
    font-feature-settings: "tnum";
}
.pmc-social-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}
.pmc-social-nickname {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0;
    word-spacing: 0;
}
.pmc-social-tier { flex: 0 0 auto; font-size: 9px; padding: 2px 6px; }
.pmc-social-meta {
    color: var(--color-ps-muted);
    font-family: 'Chakra Petch', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-feature-settings: "tnum";
    text-align: right;
    line-height: 1.3;
}
.pmc-social-meta .pmc-wr-with.is-positive { color: #4ADE80; }
.pmc-social-meta .pmc-wr-with.is-negative { color: #F87171; }
.pmc-social-meta .pmc-wr-with.is-neutral  { color: var(--color-ps-muted); }
.pmc-social-empty {
    color: var(--color-ps-dimmed);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

/* ---------- Phase 8: empty state CTAs ------------------------------- */
.pmc-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pmc-accent);
    color: #FFFFFF;
    border-radius: 0;
    padding: 8px 14px;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 160ms ease, transform 160ms ease;
}
.pmc-cta:hover { background: var(--color-ps-primary-light); transform: translateY(-1px); }
.pmc-cta.is-ghost {
    background: transparent;
    color: var(--pmc-accent);
    border: 1px solid var(--pmc-accent-hairline);
    border-radius: 0;
}
.pmc-cta.is-ghost:hover { background: var(--pmc-accent-soft); }

.pmc-empty-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
    padding: 28px 14px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--color-ps-border);
    color: var(--color-ps-muted);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

/* ---------- Mobile breakpoints -------------------------------------- */
@media (max-width: 720px) {
    .pmc-match-row {
        grid-template-columns: var(--pmc-row-spine) minmax(0, 1fr) auto;
        gap: 10px;
    }
    .pmc-match-score, .pmc-match-time { display: none; }
    .pmc-match-map { grid-column: 1 / -1; }
    .pmc-skeleton-row { grid-template-columns: var(--pmc-row-spine) minmax(0, 1fr); }
}