/* ══════════════════════════════════════════════════════════════════
   profile.css — Profile screen elevation (own dossier + player view)
   Loads AFTER obsidian-vault.css. All new classes are pf-* and scoped
   to the two profile screens so nothing leaks into other surfaces.
   Palette: lodge gold (#e9c349 / #f2ca50 / #c5a12a) on near-black,
   Bodoni Moda italic display, Manrope text — tokens.css families.
   ══════════════════════════════════════════════════════════════════ */

/* ── Section rhythm: one eyebrow/title voice for every section ──── */
#profile-screen .pf-eyebrow,
#player-profile-screen .pf-eyebrow {
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ov-primary, #e9c349);
}
#profile-screen .pf-title,
#player-profile-screen .pf-title {
    font-family: var(--font-display, 'Bodoni Moda', Georgia, serif);
    font-style: italic;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: #f3efe4;
    margin-top: 4px;
}
#profile-screen .pf-section-note,
#player-profile-screen .pf-section-note {
    font-size: 11px;
    line-height: 1.45;
    color: #8e877d;
}

/* ── Identity block ──────────────────────────────────────────────── */
#profile-screen .pf-avatar-wrap,
#player-profile-screen .pf-avatar-wrap {
    position: relative;
    display: inline-block;
}

/* Rank-colored ring: conic metal band keyed to --pf-rank (whitelisted
   hex injected from JS), with an upper-left key light and a soft rank
   glow. 4px band + 2px dark gap reads as a mounted medallion. */
#profile-screen .pf-avatar-ring,
#player-profile-screen .pf-avatar-ring {
    position: relative;
    display: block;
    padding: 4px;
    border-radius: 50%;
    background:
        conic-gradient(from 215deg,
            #f8e7b0 0%,
            var(--pf-rank, #e9c349) 18%,
            #8a6a2c 38%,
            #5c4517 52%,
            var(--pf-rank, #e9c349) 72%,
            #f8e7b0 88%,
            var(--pf-rank, #e9c349) 100%);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.55),
        0 0 24px color-mix(in srgb, var(--pf-rank, #e9c349) 30%, transparent),
        inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
#profile-screen .pf-avatar-core,
#player-profile-screen .pf-avatar-core {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    background: #14130e;
    border: 2px solid rgba(8, 7, 5, 0.9);   /* dark gap between metal and photo */
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
#profile-screen .pf-avatar-core img,
#profile-screen .pf-avatar-core .profile-avatar-fallback,
#player-profile-screen .pf-avatar-core img,
#player-profile-screen .pf-avatar-core .profile-avatar-fallback {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display, Georgia, serif);
    font-size: 34px;
    color: #bfb79c;
    background: radial-gradient(circle at 35% 28%, #2c2618 0%, #14130e 70%);
}
@media (min-width: 768px) {
    #profile-screen .pf-avatar-core,
    #player-profile-screen .pf-avatar-core { width: 120px; height: 120px; }
}

/* Level chip: minted gold plaque pinned to the ring's south point. */
#profile-screen .pf-level-chip,
#player-profile-screen .pf-level-chip {
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    z-index: 3;   /* above the avatar core/fallback, which legacy CSS promotes */
    padding: 3px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f8e7b0 0%, #e9c349 42%, #c5a12a 100%);
    color: #3c2f00;
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    white-space: nowrap;
    border: 1px solid rgba(60, 47, 0, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),
        0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Camera edit button rides the ring's NE corner (own profile only).
   Overrides the obsidian-vault absolute placement for the new circle. */
#profile-screen .pf-avatar-wrap .ov-prof-avatar-edit {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(20%, -12%);
    z-index: 2;
}

#profile-screen .pf-name,
#player-profile-screen .pf-name {
    font-family: var(--font-display, 'Bodoni Moda', Georgia, serif);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(30px, 9vw, 46px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #f3efe4;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
#profile-screen .pf-name-rule,
#player-profile-screen .pf-name-rule {
    width: 72px;
    height: 2px;
    margin-top: 8px;
    background: linear-gradient(90deg, #f2ca50 0%, rgba(242, 202, 80, 0) 100%);
}
#profile-screen .pf-rank-line,
#player-profile-screen .pf-rank-line {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--pf-rank, #e9c349);
}
#profile-screen .pf-member-line,
#player-profile-screen .pf-member-line {
    margin-top: 4px;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8e877d;
}

/* ── Standing plaque (compact, replaces the flat block) ──────────── */
#profile-screen .pf-standing,
#player-profile-screen .pf-standing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 200px;
    padding: 14px 20px;
    border-left: 3px solid var(--ov-primary, #e9c349);
    background: linear-gradient(165deg, rgba(44, 38, 24, 0.7) 0%, rgba(14, 12, 8, 0.95) 70%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
#profile-screen .pf-standing-value,
#player-profile-screen .pf-standing-value {
    font-family: var(--font-display, 'Bodoni Moda', Georgia, serif);
    font-style: italic;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.06em;
    color: #f3efe4;
}

/* ── Lodge plaque (stat cells, mastery cards) ────────────────────── */
#profile-screen .pf-plaque,
#player-profile-screen .pf-plaque {
    position: relative;
    background: linear-gradient(165deg, rgba(44, 38, 24, 0.82) 0%, rgba(18, 16, 11, 0.96) 52%, rgba(10, 9, 6, 0.98) 100%);
    border: 1px solid rgba(233, 195, 73, 0.20);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55),
        0 8px 20px rgba(0, 0, 0, 0.35);
    padding: 16px 18px;
    transition: border-color 160ms ease, transform 140ms ease;
}
#profile-screen .pf-plaque::before,
#player-profile-screen .pf-plaque::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 30%);
}
#profile-screen .pf-plaque:hover,
#player-profile-screen .pf-plaque:hover {
    border-color: rgba(233, 195, 73, 0.42);
}
#profile-screen .pf-plaque-label,
#player-profile-screen .pf-plaque-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #bfb79c;
}
#profile-screen .pf-plaque-value,
#player-profile-screen .pf-plaque-value {
    font-family: var(--font-display, 'Bodoni Moda', Georgia, serif);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: #f2ca50;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    margin-top: 6px;
}
#profile-screen .pf-plaque-value.pf-pos { color: #7fcf96; }
#profile-screen .pf-plaque-value.pf-neg { color: #d97757; }
#profile-screen .pf-plaque-sub,
#player-profile-screen .pf-plaque-sub {
    font-size: 11px;
    color: #8e877d;
    margin-top: 4px;
}

/* Vault Statistics: 2-col plaque grid with 1px gold grout. */
#profile-screen .pf-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Win-rate bar inside plaques */
#profile-screen .pf-bar,
#player-profile-screen .pf-bar {
    height: 3px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
#profile-screen .pf-bar-fill,
#player-profile-screen .pf-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #c5a12a 0%, #f2ca50 100%);
    box-shadow: 0 0 6px rgba(242, 202, 80, 0.5);
    transition: width 600ms cubic-bezier(0.22, 0.8, 0.26, 1);
}

/* ── Emblems (minted-token SVGs from profile.js) ─────────────────── */
#profile-screen .pf-emblem,
#player-profile-screen .pf-emblem {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

/* ── Table Mastery cards ─────────────────────────────────────────── */
#profile-screen .pf-mastery-grid,
#player-profile-screen .pf-mastery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
#profile-screen .pf-mastery-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
#profile-screen .pf-mastery-name {
    font-family: var(--font-display, 'Bodoni Moda', Georgia, serif);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    color: #e5e2e1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Chronicle rows ──────────────────────────────────────────────── */
#profile-screen .pf-chron-row,
#player-profile-screen .pf-chron-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(165deg, rgba(30, 27, 18, 0.65) 0%, rgba(14, 13, 9, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 140ms ease;
}
#profile-screen .pf-chron-row:hover,
#player-profile-screen .pf-chron-row:hover {
    border-color: rgba(233, 195, 73, 0.25);
}

/* ── Achievements shelf ──────────────────────────────────────────── */
#profile-screen .pf-ach-shelf,
#player-profile-screen .pf-ach-shelf {
    position: relative;
    padding-bottom: 14px;
}
/* Wooden shelf ledge under the trophy grid: thin gold-lit edge. */
#profile-screen .pf-ach-shelf::after,
#player-profile-screen .pf-ach-shelf::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(180deg, rgba(233, 195, 73, 0.35) 0%, rgba(90, 70, 20, 0.6) 45%, rgba(0, 0, 0, 0.7) 100%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55);
}
#profile-screen .pf-ach-empty,
#player-profile-screen .pf-ach-empty {
    grid-column: 1 / -1;   /* recon fix: empty state was crushed into one 2-col cell at 375px */
}

/* ── Empty states (shared look) ──────────────────────────────────── */
#profile-screen .pf-empty,
#player-profile-screen .pf-empty {
    text-align: center;
    padding: 28px 20px;
    background: linear-gradient(165deg, rgba(30, 27, 18, 0.5) 0%, rgba(14, 13, 9, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.04);
}
#profile-screen .pf-empty .pf-emblem,
#player-profile-screen .pf-empty .pf-emblem {
    opacity: 0.85;
    margin-bottom: 10px;
}
#profile-screen .pf-empty-title,
#player-profile-screen .pf-empty-title {
    color: #bfb79c;
    font-size: 13px;
    margin-bottom: 4px;
}
#profile-screen .pf-empty-sub,
#player-profile-screen .pf-empty-sub {
    color: #8e877d;
    font-size: 11px;
    line-height: 1.5;
}

/* ── Bonus-code form (Track H.8 markup, lodge dress) ──────────────
   The obsidian-vault reset strips input borders/button backgrounds
   (computed: border 0, background transparent, submit at 0.4 opacity)
   so the style.css treatment never lands on this screen. Re-dress the
   field as a dark inset well + minted gold submit, both squared —
   the lodge language has no 6px radii. */
body.ov #profile-screen.ov-profile .profile-bonus-code__input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(8, 7, 5, 0.92) 0%, rgba(24, 21, 13, 0.75) 100%);
    border: 1px solid rgba(233, 195, 73, 0.28);
    border-color: rgba(233, 195, 73, 0.28);   /* explicit longhand — a later `color` change must not tint the border via currentColor */
    border-radius: 0;
    color: #f3efe4;
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.22em;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
body.ov #profile-screen.ov-profile .profile-bonus-code__input::placeholder {
    color: #6e6a62;
    font-weight: 500;
    letter-spacing: 0.12em;
}
body.ov #profile-screen.ov-profile .profile-bonus-code__input:focus {
    outline: none;
    border-color: rgba(233, 195, 73, 0.72);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(233, 195, 73, 0.35),
        0 0 14px rgba(233, 195, 73, 0.18);
}
body.ov #profile-screen.ov-profile .profile-bonus-code__submit {
    padding: 12px 18px;
    background: linear-gradient(180deg, #f2ca50 0%, #c5a12a 100%);
    border: 1px solid rgba(60, 47, 0, 0.55);
    border-radius: 0;
    color: #3c2f00;
    font-family: var(--font-body, 'Manrope', sans-serif);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),
        0 4px 12px rgba(0, 0, 0, 0.45);
    transition: transform 140ms ease, opacity 140ms ease, box-shadow 140ms ease;
}
body.ov #profile-screen.ov-profile .profile-bonus-code__submit:not(:disabled):hover {
    transform: translateY(-1px);
    opacity: 0.95;
}
body.ov #profile-screen.ov-profile .profile-bonus-code__submit:disabled {
    background: transparent;
    border: 1px solid rgba(233, 195, 73, 0.25);
    color: rgba(233, 195, 73, 0.5);
    opacity: 1;                 /* override the style.css 0.4 fade — ghost outline reads cleaner */
    cursor: not-allowed;
    box-shadow: none;
}
body.ov #profile-screen.ov-profile .profile-codes-divider {
    height: 1px;
    margin: 16px 0 12px;
    background: linear-gradient(90deg, rgba(233, 195, 73, 0.35) 0%, rgba(233, 195, 73, 0.05) 100%);
}
body.ov #profile-screen.ov-profile .profile-codes-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ov-primary, #e9c349);
    margin: 0 0 4px;
}
body.ov #profile-screen.ov-profile .profile-codes-hint {
    font-size: 11px;
    font-style: italic;
    color: #8e877d;
    margin: 0 0 12px;
}
body.ov #profile-screen.ov-profile .profile-bonus-code__last {
    margin-top: 10px;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: #8e877d;
}

/* ── Gamer Tag row (Account section) ──────────────────────────────
   Same OV-reset problem as the bonus-code form: the input loses its
   border and the .gold-gradient class on the SAVE button is scoped to
   other screens. Re-dress both at (1,3,1)+ specificity. */
body.ov #profile-screen.ov-profile #gamer-tag-input {
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(8, 7, 5, 0.92) 0%, rgba(24, 21, 13, 0.75) 100%);
    border: 1px solid rgba(233, 195, 73, 0.24);
    border-color: rgba(233, 195, 73, 0.24);
    border-radius: 0;
    color: #f3efe4;
    font-size: 14px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
body.ov #profile-screen.ov-profile #gamer-tag-input::placeholder { color: #6e6a62; }
body.ov #profile-screen.ov-profile #gamer-tag-input:focus {
    outline: none;
    border-color: rgba(233, 195, 73, 0.7);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(233, 195, 73, 0.3);
}
body.ov #profile-screen.ov-profile button[onclick="saveGamerTag()"] {
    padding: 10px 16px;
    background: linear-gradient(180deg, #f2ca50 0%, #c5a12a 100%);
    border: 1px solid rgba(60, 47, 0, 0.55);
    color: #3c2f00;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),
        0 4px 10px rgba(0, 0, 0, 0.4);
    transition: transform 140ms ease, opacity 140ms ease;
}
body.ov #profile-screen.ov-profile button[onclick="saveGamerTag()"]:hover {
    transform: translateY(-1px);
    opacity: 0.95;
}

/* ── Count-up targets ────────────────────────────────────────────── */
#profile-screen [data-pf-count],
#player-profile-screen [data-pf-count] {
    font-variant-numeric: tabular-nums;
}

/* Reduced motion: bars snap, no transform hovers */
@media (prefers-reduced-motion: reduce) {
    #profile-screen .pf-bar-fill,
    #player-profile-screen .pf-bar-fill { transition: none; }
    #profile-screen .pf-plaque,
    #player-profile-screen .pf-plaque { transition: none; }
}