/* ════════════════════════════════════════════════════════════════
   AuraChess Profiler — V5 compact UX (presentation layer only)
   Sections on top of profiler.css: identity strip, Closest-Legend hero
   (+why-closest, compact runner-ups, all-legends modal), 8-axis grid,
   Playing Style groups, Opening Repertoire, Chess DNA Personality
   (+key traits), Strengths & Development (+execution-quality mini),
   and the collapsed Advanced Analysis block. Reuses the site's existing
   dark/cyan/magenta tokens from css/styles.css (--bg-surface, --accent,
   --accent-secondary, ...).
   ════════════════════════════════════════════════════════════════ */

/* ── shared section shell (matches existing .fp-section / card look) ── */
.style-groups-section, .opening-repertoire-section, .dna-personality-section,
.strengths-dev-section {
    background: linear-gradient(135deg, rgba(15, 20, 30, 0.85), rgba(5, 5, 10, 0.95));
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 18px 20px;
    margin-bottom: 18px;
}

.style-groups-header, .opening-repertoire-header, .dna-personality-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin-bottom: 8px;
}
.style-groups-header i, .opening-repertoire-header i, .dna-personality-header i {
    color: var(--accent, #00C8FF);
}
.opening-repertoire-header .pr-info-btn { margin-inline-start: auto; }

/* ══ IDENTITY STRIP ══ */
.dna-hero {
    position: relative;
    background: linear-gradient(150deg, rgba(0, 200, 255, 0.10), rgba(255, 0, 212, 0.08) 60%, rgba(5, 5, 10, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 24px;
    padding: 20px 28px;
    margin-bottom: 20px;
    overflow: hidden;
}
.dna-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.dna-hero-identity { display: flex; align-items: center; gap: 14px; }
.dna-hero-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-gradient, linear-gradient(135deg,#00C8FF,#FF00D4));
    color: #000; font-size: 1.2rem; flex-shrink: 0;
}
.dna-hero-username { font-weight: 700; font-size: 1rem; color: var(--text-primary,#fff); }
.dna-hero-platform { font-size: 0.8rem; color: var(--text-secondary,#94a3b8); }
.dna-hero-share {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
    color: var(--text-primary,#fff); border-radius: 999px; padding: 9px 16px;
    font-size: 0.85rem; cursor: pointer; transition: background .2s ease, border-color .2s ease;
    white-space: nowrap;
}
.dna-hero-share:hover { background: rgba(0,200,255,0.15); border-color: var(--accent,#00C8FF); }

.dna-hero-meta {
    display: flex; flex-wrap: wrap; gap: 22px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 12px;
    margin-top: 12px;
}
.dna-hero-meta-item { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--text-secondary,#94a3b8); }
.dna-hero-meta-item i { color: var(--accent,#00C8FF); }
.dna-hero-meta-item span { color: var(--text-primary,#fff); font-weight: 700; }

/* ══ CLOSEST LEGEND HERO block ══ */
.legend-hero-block { margin-bottom: 28px; }
.legend-hero-block .gm-match-card,
.legend-hero-block .known-player-card,
.legend-hero-block .gm-description-card { margin-bottom: 18px; }

/* ══ WHY THIS LEGEND IS CLOSEST (max 3 reasons) ══ */
.why-closest { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); }
.why-closest h3 { font-size: 1rem; color: var(--text-primary,#fff); margin: 0 0 12px; }
.why-closest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.why-closest-item {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px; padding: 10px 12px;
}
.why-closest-item-label { font-size: 0.8rem; color: var(--text-primary,#fff); font-weight: 600; margin-bottom: 4px; }
.why-closest-item-note { font-size: 0.74rem; color: var(--text-muted,#64748b); }

/* ══ ALL LEGENDS CTA + MODAL ══ */
.all-legends-cta-wrap { display: flex; justify-content: center; margin-top: 4px; }
.all-legends-cta-wrap[hidden] { display: none !important; }
.all-legends-cta {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
    color: var(--text-primary,#fff); border-radius: 999px; padding: 12px 26px;
    font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all .2s ease;
}
.all-legends-cta:hover { border-color: var(--accent,#00C8FF); background: rgba(0,200,255,0.1); }
.all-legends-modal { max-width: 620px; width: 92vw; max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; }
.all-legends-roster-note { font-size: 0.82rem; color: var(--text-muted,#64748b); margin: 0 0 10px; }
.all-legends-list {
    min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; display: flex; flex-direction: column;
    gap: 6px; padding-inline-end: 4px; scrollbar-gutter: stable;
}
.all-legends-row {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 8px 12px; text-decoration: none;
}
.all-legends-row.is-top-match {
    border-color: rgba(0,200,255,0.7); background: rgba(0,200,255,0.1);
    box-shadow: inset 3px 0 0 var(--accent,#00C8FF);
}
[dir="rtl"] .all-legends-row.is-top-match { box-shadow: inset -3px 0 0 var(--accent,#00C8FF); }
.all-legends-rank { width: 24px; text-align: center; font-weight: 800; color: var(--text-muted,#64748b); font-size: 0.85rem; }
.all-legends-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.all-legends-identity { min-width: 0; flex: 1; }
.all-legends-name { flex: 1; color: var(--text-primary,#fff); font-size: 0.88rem; font-weight: 600; }
.all-legends-era { margin-top: 2px; color: var(--text-muted,#64748b); font-size: 0.7rem; }
.all-legends-top-badge {
    display: inline-flex; margin-inline-start: 7px; padding: 2px 6px; border-radius: 999px;
    background: rgba(0,200,255,0.16); color: var(--accent,#00C8FF); font-size: 0.62rem;
    vertical-align: middle;
}
.all-legends-match { width: 118px; flex-shrink: 0; text-align: end; }
.all-legends-sim { font-size: 0.82rem; color: var(--accent,#00C8FF); font-weight: 700; }
.all-legends-band { font-size: 0.68rem; color: var(--text-muted,#64748b); }
.all-legends-bar { height: 4px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.09); }
.all-legends-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent,#00C8FF); }
.all-legends-unavailable {
    padding: 28px 18px; text-align: center; color: var(--text-secondary,#94a3b8);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(255,255,255,0.03);
}
.all-legends-unavailable[hidden] { display: none !important; }
.all-legends-unavailable > i { color: #fbbf24; font-size: 1.5rem; }
.all-legends-unavailable p { margin: 10px auto 14px; max-width: 390px; line-height: 1.6; }
.all-legends-unavailable button {
    border: 1px solid rgba(0,200,255,0.5); border-radius: 999px; padding: 9px 18px;
    background: rgba(0,200,255,0.12); color: var(--text-primary,#fff); cursor: pointer;
}

/* ══ OPENING REPERTOIRE ══ */
.opening-repertoire-summary {
    display: flex; flex-wrap: wrap; gap: 10px 22px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.82rem; color: var(--text-secondary,#94a3b8);
}
.opening-repertoire-summary strong { color: var(--text-primary,#fff); }
.opening-best-performing-note {
    width: 100%; font-size: 0.76rem; color: var(--text-muted,#64748b); font-style: italic; margin-top: 4px;
}

/* ══ PLAYING STYLE (Attack / Strategy / Risk / Endgame) — 4 compact always-visible cards, max 3 signals each ══ */
.style-groups-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.style-group {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; padding: 12px 14px;
}
.style-group-title {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; color: var(--text-primary,#fff); font-size: 0.9rem;
    margin-bottom: 8px;
}
.style-group-title i.group-icon { color: var(--accent-secondary,#FF00D4); }
.style-group-body { display: flex; flex-direction: column; gap: 6px; }
.style-group-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; gap: 10px; }
.style-group-row-label { color: var(--text-secondary,#94a3b8); }
.style-group-row-value { color: var(--text-primary,#fff); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ══ OPENING REPERTOIRE — compact White/Black split ══ */
#topOpeningsGrid[hidden], #topOpeningsCoverage[hidden] { display: none; }
.openings-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.openings-split-col {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; padding: 12px 14px;
}
.openings-split-col-title { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary,#94a3b8); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.openings-split-col-body { display: flex; flex-direction: column; gap: 6px; }
.openings-split-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.84rem; gap: 10px; }
.openings-split-name { color: var(--text-primary,#fff); }
.openings-split-pct { color: var(--accent,#00C8FF); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ══ CHESS DNA PERSONALITY — key traits ══ */
.personality-traits { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.personality-traits-label { font-size: 0.82rem; font-weight: 700; color: var(--text-secondary,#94a3b8); margin-bottom: 8px; }
.personality-traits-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.personality-traits-list li {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px; padding: 10px 14px; font-size: 0.86rem; color: var(--text-secondary,#94a3b8); line-height: 1.6;
}

/* ══ STRENGTHS & DEVELOPMENT (+ execution-quality mini) ══ */
.strengths-dev-section { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.strengths-dev-col h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--text-primary,#fff); margin: 0 0 12px; }
.strengths-dev-col:first-child h3 i { color: #facc15; }
.strengths-dev-col:last-child h3 i { color: var(--accent,#00C8FF); }
.strengths-dev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.strengths-dev-list li {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px; padding: 12px 14px; font-size: 0.86rem; color: var(--text-secondary,#94a3b8); line-height: 1.6;
}
.exec-mini-wrap {
    grid-column: 1 / -1;
    margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08);
}
.exec-mini-wrap h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--text-primary,#fff); margin: 0 0 12px; }
.exec-mini-wrap h3 i { color: var(--accent,#00C8FF); }
.exec-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.exec-mini-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 12px; text-align: center; }
.exec-mini-value { font-size: 1.3rem; font-weight: 800; color: var(--accent,#00C8FF); }
.exec-mini-label { font-size: 0.76rem; color: var(--text-secondary,#94a3b8); margin-top: 2px; }

/* ══ ADVANCED ANALYSIS (always visible) ══
   Was a <details> accordion; the summary rules went with it. The block keeps
   its own top padding now that no summary header supplies it, so removing the
   toggle leaves no empty strip above the first card. */
.advanced-details-block { padding: 0; overflow: hidden; }
.advanced-inner { padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.advanced-block { padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.07); }
.advanced-inner > .advanced-block:first-child { padding-top: 0; border-top: none; }
.advanced-block > h4 { font-size: 0.95rem; font-weight: 700; color: var(--text-primary,#fff); margin: 0 0 8px; }

.sac-profile-grid, .endgame-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 8px; }
.sac-stat, .endgame-stat {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px; padding: 12px; text-align: center;
}
.sac-stat-value, .endgame-stat-value { font-size: 1.3rem; font-weight: 800; color: var(--accent,#00C8FF); }
.sac-stat-label, .endgame-stat-label { font-size: 0.74rem; color: var(--text-secondary,#94a3b8); margin-top: 2px; }
.sac-safeguard-note { grid-column: 1 / -1; font-size: 0.74rem; color: var(--text-muted,#64748b); font-style: italic; margin-top: 4px; }

/* ── empty-state placeholders (never show NaN/undefined/0-by-default) ── */
.dna-section-empty { color: var(--text-muted,#64748b); font-size: 0.85rem; font-style: italic; padding: 8px 0; }

/* ══════════════════════════════════════════════════════════════
   V5-ONLY COMPACTION (scoped to body.profiler-v5-ux so V4's stable
   legacy presentation of these SHARED components is never touched —
   V4 never gets this class, per the isCandidateModeUx gate in
   js/profiler.js). Covers: identity strip folded into the hero,
   compact hero card, compact 8-axis grid.
   ══════════════════════════════════════════════════════════════ */

/* Identity strip relocated inside #legendHeroBlock (js relocateIdentityStrip)
   — collapse it from a standalone card into one subtle meta line attached
   to the top of the hero, per §7 ("no separate 150-250px identity card"). */
body.profiler-v5-ux .dna-hero-compact {
    background: none; border: none; border-radius: 0;
    padding: 0 0 10px; margin: 0 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
body.profiler-v5-ux .dna-hero-compact .dna-hero-avatar { width: 30px; height: 30px; font-size: 0.85rem; }
body.profiler-v5-ux .dna-hero-compact .dna-hero-username { font-size: 0.86rem; }
body.profiler-v5-ux .dna-hero-compact .dna-hero-platform { font-size: 0.72rem; }
body.profiler-v5-ux .dna-hero-compact .dna-hero-share { padding: 6px 12px; font-size: 0.78rem; }
body.profiler-v5-ux .dna-hero-compact .dna-hero-meta {
    border-top: none; padding-top: 6px; margin-top: 6px; gap: 14px;
}
body.profiler-v5-ux .dna-hero-compact .dna-hero-meta-item { font-size: 0.78rem; }

/* Compact Closest-Legend hero — target ~500-650px total incl. runner-ups.
   #gmDescription is hidden separately by js hideDuplicateDescription(). */
body.profiler-v5-ux .legend-hero-block .gm-match-card {
    padding: 20px; gap: 22px; margin-bottom: 14px; border-radius: 18px;
}
body.profiler-v5-ux .legend-hero-block .gm-photo-wrap { width: 110px; height: 110px; border-radius: 16px; }
body.profiler-v5-ux .legend-hero-block .gm-match-name { font-size: clamp(20px, 3.4vw, 28px); margin-bottom: 6px; }
body.profiler-v5-ux .legend-hero-block .gm-match-label { font-size: 11px; margin-bottom: 4px; }
body.profiler-v5-ux .legend-hero-block .gm-similarity-badge { padding: 3px 12px; font-size: 12px; margin-bottom: 8px; }
body.profiler-v5-ux .legend-hero-block .gm-quote { font-size: 13px; margin-bottom: 10px; padding-inline-start: 14px; }
body.profiler-v5-ux .legend-hero-block .gm-match-btn { padding: 9px 18px; font-size: 13px; }
body.profiler-v5-ux .legend-hero-block .gm-description-card { padding: 14px 18px; margin-bottom: 14px; }
body.profiler-v5-ux .legend-hero-block .known-player-card { margin-bottom: 14px; padding: 14px 18px; }
body.profiler-v5-ux .why-closest { margin-top: 12px; padding-top: 12px; }
body.profiler-v5-ux .why-closest h3 { font-size: 0.9rem; margin-bottom: 8px; }
body.profiler-v5-ux .runner-up-section { margin-bottom: 14px; }
body.profiler-v5-ux .all-legends-cta-wrap { margin-bottom: 0; }

/* Compact 8-axis grid: 2 columns x 4 rows desktop, target ~500-700px total. */
body.profiler-v5-ux #styleAxesSection.fp-section { padding: 16px 20px; margin-bottom: 18px; }
body.profiler-v5-ux #styleAxesSection .axes-header { margin-bottom: 10px; font-size: 1rem; }
body.profiler-v5-ux #styleAxesSection .axes-note { margin: -4px 0 10px; font-size: 0.78rem; }
body.profiler-v5-ux #styleAxesSection .fp-identity { margin-bottom: 12px; padding: 8px 14px; }
body.profiler-v5-ux #styleAxesSection .fp-identity-sentence { font-size: 0.94rem; }
body.profiler-v5-ux #styleAxesGrid.fp-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px;
}
body.profiler-v5-ux #styleAxesGrid .fp-axis { gap: 4px; }
body.profiler-v5-ux #styleAxesGrid .fp-axis-qual { font-size: 0.86rem; }
body.profiler-v5-ux #styleAxesGrid .fp-evidence { font-size: 0.74rem; line-height: 1.4; }
body.profiler-v5-ux #styleAxesGrid .fp-end { min-width: 54px; font-size: 0.72rem; }

/* ════════════════════════ RESPONSIVE ════════════════════════ */
@media (max-width: 900px) {
    .style-groups-grid { grid-template-columns: 1fr; }
    .openings-split-grid { grid-template-columns: 1fr; }
    .strengths-dev-section { grid-template-columns: 1fr; gap: 18px; }
    .exec-mini-wrap { grid-column: 1; }
    body.profiler-v5-ux #styleAxesGrid.fp-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .dna-hero { padding: 16px 18px; border-radius: 18px; }
    .dna-hero-top { flex-wrap: wrap; }
    .dna-hero-share span { display: none; }
    .dna-hero-share { padding: 10px; }
    .dna-hero-meta { gap: 14px; }
    .style-groups-section, .opening-repertoire-section, .dna-personality-section,
    .strengths-dev-section { padding: 14px 16px; border-radius: 16px; }
    .sac-profile-grid, .endgame-profile-grid, .exec-mini-grid { grid-template-columns: repeat(2, 1fr); }
    .all-legends-modal { width: 96vw; max-height: 88vh; }
    .all-legends-row { gap: 8px; padding: 8px; }
    .all-legends-rank { width: 20px; font-size: 0.76rem; }
    .all-legends-img { width: 32px; height: 32px; }
    .all-legends-match { width: 88px; }
    .all-legends-band { display: none; }
    .advanced-inner { padding: 0 16px 20px; }
    body.profiler-v5-ux .legend-hero-block .gm-match-card { flex-direction: column; text-align: center; padding: 18px; gap: 14px; }
    body.profiler-v5-ux .legend-hero-block .gm-photo-wrap { width: 90px; height: 90px; margin: 0 auto; }
}

/* Theme parity: this page is dark-only by design (matches the rest of the
   profiler), but keep contrast sane if a future light-mode toggle lands. */
@media (prefers-color-scheme: light) {
    .dna-hero, .style-groups-section, .opening-repertoire-section,
    .dna-personality-section, .strengths-dev-section { background: linear-gradient(135deg, rgba(15,20,30,0.92), rgba(5,5,10,0.97)); }
}

/* ════════════════════════════════════════
   Era-diverse legend cards ("Closest Legend from Each Era") — reuses the
   site's existing .runner-up-card layout (css/profiler.css) for the base
   image/name/similarity, adding only an era-label chip and rank badge.
   ════════════════════════════════════════ */
.era-legend-card { position: relative; }
.era-legend-rank {
    position: absolute; top: 6px; inset-inline-end: 6px;
    background: rgba(0,0,0,0.55); color: var(--text-primary, #fff);
    font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: 999px;
    line-height: 1.4;
}
.era-legend-era {
    font-size: 0.72rem; color: var(--accent, #00C8FF); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.02em;
}