/* =====================================================================
   Player profile (/profile/{userId}) and the owner's editor (/profile/edit).
   Every class is prefixed "pf-" so nothing collides with app.css, Bootstrap
   or page-local styles. Palette matches announcements.css so the profile
   sits in the same world as the member home.
   ===================================================================== */

/* Tokens live on both the page and .pf-overlay: a modal is positioned against the viewport, so
   it has to render outside .pf-page and would otherwise inherit none of these. */
.pf-page,
.pf-overlay {
    --pf-gold: #caa24b;
    --pf-gold-hi: #ffd86b;
    --pf-ink: #ece9e2;
    --pf-ink-muted: rgba(236, 233, 226, 0.84);
    --pf-ink-dim: rgba(236, 233, 226, 0.52);
    --pf-bg: #1b1e22;
    --pf-panel: #23272b;
    --pf-panel-2: #2a2f34;
    --pf-card: rgba(22, 25, 29, 0.96);
    --pf-border: rgba(202, 162, 75, 0.35);
    --pf-border-dim: rgba(236, 233, 226, 0.13);
    --pf-discord: #5865F2;
    --pf-ok: #7fc79a;
    --pf-warn: #e2bc61;
    /* Deliberately below --pf-bg: a dialog over the page should read as further back, not level
       with it, and the page behind stays visible through the backdrop. */
    --pf-modal-bg: #121417;
    --pf-modal-panel: #191d21;
}

/* No cg-paper on the wrapper. That class paints a pale handmade-paper texture, and on a page
   container the card covers only the middle of it - so the padding showed the texture as a
   light frame down both sides and across the top. It belongs on surfaces (cards, modals),
   which still get it through the .cg-guild .card rules in guild-theme.css. */
.pf-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    color: var(--pf-ink);
}

.pf-overlay { color: var(--pf-ink); }

/* ---------- shell ---------- */
/* No outer border: the card already separates itself from the page by being darker, and the
   pale hairline read as a silver frame around everything. */
.pf-shell {
    background-color: var(--pf-card);
    border-radius: 14px;
    overflow: hidden;
}

/* ---------- banner ---------- */
.pf-banner { position: relative; }

.pf-banner-art {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(180deg, #1d2530 0%, #35414b 42%, #6d6549 74%, #a98a55 100%);
}

    /* An uploaded or stock banner covers the painted gradient behind it. The picture is an
       <img>, not a background, so the member's crop can be object-position and their zoom a
       transform - both of which a background-image cannot express together. */
    .pf-banner-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
    }

        .pf-banner-art.has-image::before { content: none; }

    /* Stand-in when there is no banner at all: a horizon glow over the page ground. */
    .pf-banner-art::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 52% 44% at 62% 60%, rgba(255, 216, 107, 0.24), transparent 70%);
    }

    .pf-banner-art::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(23,25,28,0.34) 0%, rgba(23,25,28,0) 34%, rgba(22,25,29,0.74) 78%, var(--pf-card) 100%);
    }

.pf-banner-body {
    position: relative;
    margin-top: -86px;
    padding: 0 1.6rem 1.4rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.3rem;
    align-items: flex-end;
}

.pf-portrait {
    width: 124px;
    height: 148px;
    border-radius: 6px;
    border: 3px solid var(--pf-gold);
    background: linear-gradient(165deg, #3a4048 0%, #22262b 100%);
    display: grid;
    place-items: center;
    overflow: hidden;
    font-family: Garamond, Georgia, serif;
    font-size: 3.2rem;
    color: var(--pf-gold-hi);
    box-shadow: 0 10px 28px rgba(0,0,0,0.55);
    flex: 0 0 auto;
}

    .pf-portrait img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pf-ident { min-width: 0; padding-bottom: 0.25rem; }

.pf-name {
    font-family: Garamond, Georgia, serif;
    font-size: 2.7rem;
    font-weight: 600;
    line-height: 1.04;
    margin: 0 0 0.55rem;
}

.pf-titles { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.55rem; }

.pf-title-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--pf-border);
    background: rgba(35, 39, 43, 0.85);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pf-gold-hi);
}

.pf-chip-discord {
    border-color: var(--pf-discord);
    color: #c3c8ff;
    background: rgba(88, 101, 242, 0.16);
}

.pf-joined { font-size: 0.875rem; color: var(--pf-ink-dim); margin-bottom: 0.6rem; }

.pf-statement {
    font-family: Garamond, Georgia, serif;
    font-size: 1.2rem;
    line-height: 1.4;
    margin: 0;
    max-width: 46ch;
}

.pf-banner-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 0.35rem; align-items: flex-start; }

/* ---------- member search ---------- */
.pf-search { position: relative; flex: 0 0 auto; }

.pf-search-input {
    width: 12.5rem;
    max-width: 100%;
    padding: 0.4rem 0.7rem;
    font-size: 0.875rem;
    color: var(--pf-ink);
    background-color: rgba(12, 14, 17, 0.82);
    border: 1px solid var(--pf-border-dim);
    border-radius: 999px;
}

    .pf-search-input::placeholder { color: var(--pf-ink-dim); }

    .pf-search-input:focus {
        outline: none;
        border-color: var(--pf-border);
        background-color: rgba(12, 14, 17, 0.95);
    }

.pf-search-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 30;
    width: min(18rem, 78vw);
    max-height: 17rem;
    overflow-y: auto;
    padding: 0.3rem;
    background-color: var(--pf-modal-bg);
    border: 1px solid var(--pf-border);
    border-radius: 10px;
    box-shadow: 0 16px 34px rgba(0,0,0,0.55);
}

.pf-search-note { padding: 0.5rem 0.6rem; font-size: 0.8125rem; color: var(--pf-ink-dim); }

.pf-search-hit {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 7px;
    color: var(--pf-ink);
    text-decoration: none;
}

    .pf-search-hit:hover { background-color: var(--pf-modal-panel); color: var(--pf-gold-hi); }

.pf-search-face {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    flex: 0 0 auto;
    background: linear-gradient(165deg, #3a4048, #22262b);
    border: 1px solid var(--pf-border-dim);
    display: grid;
    place-items: center;
    font-family: Garamond, Georgia, serif;
    color: var(--pf-gold);
    overflow: hidden;
}

    .pf-search-face img { width: 100%; height: 100%; object-fit: cover; }

.pf-search-name { font-size: 0.9375rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- buttons ---------- */
.pf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--pf-border-dim);
    background: rgba(35, 39, 43, 0.9);
    color: var(--pf-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

    .pf-btn:hover, .pf-btn:focus {
        border-color: var(--pf-gold);
        color: var(--pf-gold-hi);
        text-decoration: none;
    }

.pf-btn-primary {
    background: var(--pf-gold);
    color: #1b1e22;
    border-color: var(--pf-gold-hi);
    font-weight: 700;
}

    .pf-btn-primary:hover, .pf-btn-primary:focus { background: var(--pf-gold-hi); color: #1b1e22; }

.pf-btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8125rem; }

/* ---------- sections ---------- */
.pf-body { padding: 0.5rem 1.6rem 1.8rem; display: grid; gap: 2rem; }

.pf-sec-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.pf-sec-title {
    font-family: Garamond, Georgia, serif;
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.15;
}

.pf-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 2rem; align-items: start; }

/* ---------- showcase ---------- */
.pf-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.pf-hl {
    position: relative;
    border: 1px solid var(--pf-border-dim);
    border-radius: 10px;
    padding: 1.1rem 1rem;
    text-align: center;
    background-color: var(--pf-panel);
    background-image: radial-gradient(ellipse 80% 70% at 50% 28%, rgba(255,216,107,0.06), transparent 72%);
}

.pf-hl-kicker {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--pf-ink-muted);
    border: 1px solid var(--pf-border-dim);
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    margin-bottom: 0.8rem;
}

.pf-hl-num {
    font-family: Garamond, Georgia, serif;
    font-size: 3.4rem;
    line-height: 0.98;
}

.pf-hl-name { font-family: Garamond, Georgia, serif; font-size: 1.25rem; margin-top: 0.3rem; }
.pf-hl-desc { font-size: 0.8125rem; color: var(--pf-ink-dim); margin-top: 0.25rem; }

/* ---------- characters ---------- */
.pf-feat-char {
    border: 1px solid var(--pf-border-dim);
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 180px 1fr;
    background-color: var(--pf-panel);
}

.pf-feat-art {
    background: linear-gradient(170deg, #4a4535 0%, #26282a 60%, #1a1c1e 100%);
    display: grid;
    place-items: center;
    font-family: Garamond, Georgia, serif;
    font-size: 3.6rem;
    color: rgba(255, 216, 107, 0.6);
    border-right: 1px solid var(--pf-border-dim);
    min-height: 190px;
    overflow: hidden;
}

    .pf-feat-art img { width: 100%; height: 100%; object-fit: cover; }

.pf-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

/* ---------- uploads ---------- */
.pf-upload { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }

.pf-upload-preview {
    border: 1px solid var(--pf-border-dim);
    border-radius: 8px;
    background: var(--pf-panel-2);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
    color: var(--pf-ink-dim);
    font-size: 0.75rem;
    text-align: center;
    padding: 0.25rem;
}

    .pf-upload-preview img { width: 100%; height: 100%; object-fit: cover; }

.pf-upload-preview.is-portrait { width: 96px; height: 96px; }
.pf-upload-preview.is-banner { width: 224px; height: 70px; }
.pf-upload-preview.is-character { width: 96px; height: 120px; }
.pf-upload-preview.is-pending { border-style: dashed; border-color: var(--pf-warn); }

.pf-upload-caption { font-size: 0.75rem; color: var(--pf-ink-dim); margin-top: 0.3rem; text-align: center; }

.pf-page input[type="file"] {
    font-size: 0.875rem;
    color: var(--pf-ink-muted);
    max-width: 22rem;
}

/* ---------- nickname builder ---------- */
.nk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

@media (max-width: 760px) {
    .nk-grid { grid-template-columns: 1fr; }
}

.pf-preview {
    background: var(--pf-panel-2);
    border: 1px dashed var(--pf-border);
    border-radius: 8px;
    padding: 0.9rem 1rem;
}

    .pf-preview.is-over { border-color: #e08a72; }

.pf-preview-value {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 1.05rem;
    margin-top: 0.4rem;
    word-break: break-all;
    color: var(--pf-ink);
}

.pf-preview-meter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.7rem;
    font-size: 0.8125rem;
}

.pf-preview-count { font-family: ui-monospace, monospace; font-weight: 700; }
.pf-preview.is-over .pf-preview-count { color: #e08a72; }

.pf-flag.is-good { color: var(--pf-ok); background: rgba(127, 199, 154, 0.14); }
.pf-flag.is-bad { color: #e08a72; background: rgba(224, 138, 114, 0.16); }

.pf-review-list { display: grid; gap: 0.8rem; }

.pf-review {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    border: 1px solid var(--pf-border-dim);
    border-radius: 10px;
    padding: 0.8rem;
    background-color: var(--pf-panel);
}

.pf-review-body { min-width: 0; flex: 1 1 auto; }

.pf-locked {
    border: 1px dashed var(--pf-border-dim);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    background: rgba(236, 233, 226, 0.03);
    font-size: 0.875rem;
    color: var(--pf-ink-muted);
}

.pf-feat-info { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; }

.pf-feat-kicker {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--pf-gold);
    margin-bottom: 0.4rem;
}

.pf-feat-info h3 {
    font-family: Garamond, Georgia, serif;
    font-size: 1.9rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    line-height: 1.05;
}

.pf-feat-meta { font-size: 0.9375rem; color: var(--pf-ink-muted); }

/* The character's own words, in the gap between their details and the footer - which is
   otherwise dead space on every profile with a tall portrait beside it. */
.pf-feat-quote {
    margin: 0.85rem 0 0;
    padding-left: 0.8rem;
    border-left: 2px solid var(--pf-gold);
    font-family: Garamond, Georgia, serif;
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.45;
    color: var(--pf-ink-muted);
}
.pf-feat-foot { margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.pf-feat-quests { font-size: 0.875rem; color: var(--pf-ink-muted); }
.pf-feat-quests b { font-family: Garamond, Georgia, serif; font-size: 1.2rem; color: var(--pf-gold-hi); }

.pf-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.7rem;
    border: 1px solid var(--pf-border-dim);
    border-radius: 9px;
    padding: 0.6rem 0.8rem;
    background-color: var(--pf-panel);
}

.pf-thumb {
    width: 42px;
    height: 50px;
    border-radius: 5px;
    flex: 0 0 auto;
    background: linear-gradient(165deg, #3a4048, #22262b);
    border: 1px solid var(--pf-border-dim);
    display: grid;
    place-items: center;
    font-family: Garamond, Georgia, serif;
    font-size: 1.25rem;
    color: var(--pf-gold);
}

.pf-row-name { font-family: Garamond, Georgia, serif; font-size: 1.15rem; }
.pf-row-meta { font-size: 0.8125rem; color: var(--pf-ink-dim); }

/* ---------- people ---------- */
.pf-people { display: grid; gap: 0.7rem; }

.pf-person {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border: 1px solid var(--pf-border-dim);
    border-radius: 9px;
    padding: 0.65rem 0.8rem;
    background-color: var(--pf-panel);
    text-decoration: none;
    color: inherit;
}

    .pf-person:hover { border-color: var(--pf-border); text-decoration: none; color: inherit; }

.pf-face {
    width: 46px;
    height: 46px;
    border-radius: 7px;
    flex: 0 0 auto;
    background: linear-gradient(165deg, #3a4048, #22262b);
    border: 1px solid var(--pf-border-dim);
    display: grid;
    place-items: center;
    font-family: Garamond, Georgia, serif;
    font-size: 1.35rem;
    color: var(--pf-gold);
    overflow: hidden;
}

    .pf-face img { width: 100%; height: 100%; object-fit: cover; }

.pf-person-name { font-family: Garamond, Georgia, serif; font-size: 1.15rem; line-height: 1.2; }
.pf-person-meta { font-size: 0.8125rem; color: var(--pf-ink-dim); }
.pf-quest-line { font-size: 0.8125rem; color: var(--pf-ink-muted); }
.pf-quest-line a { color: var(--pf-gold); text-decoration: none; }
.pf-quest-line a:hover { color: var(--pf-gold-hi); }

/* ---------- achievements ---------- */
.pf-medals { display: flex; flex-wrap: wrap; gap: 1rem; }
.pf-medal { width: 88px; text-align: center; }

    .pf-medal .pf-disc {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        margin: 0 auto 0.5rem;
        background: radial-gradient(circle at 34% 28%, #d9b869, #8a6f34 55%, #43371a);
        border: 3px solid var(--pf-gold-hi);
        display: grid;
        place-items: center;
        overflow: hidden;
        box-shadow: 0 5px 16px rgba(0,0,0,0.45), inset 0 2px 7px rgba(255,255,255,0.2);
    }

    .pf-medal .pf-disc img { width: 70%; height: 70%; object-fit: contain; }
    .pf-medal .pf-mname { font-size: 0.8125rem; color: var(--pf-ink-muted); line-height: 1.3; }

    .pf-medal.is-locked { opacity: 0.4; }
    .pf-medal.is-locked .pf-disc {
        background: radial-gradient(circle at 34% 30%, #40403c, #1e1e1c);
        border-color: var(--pf-border-dim);
    }

/* A highlight whose value is a name rather than a number needs to wrap, not tower. */
.pf-hl-name-big {
    font-family: Garamond, Georgia, serif;
    font-size: 2rem;
    line-height: 1.12;
    color: var(--pf-gold-hi);
    overflow-wrap: anywhere;
}

/* ---------- role tags ---------- */
.pf-role {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    margin-left: 0.4rem;
    white-space: nowrap;
    vertical-align: middle;
}

.pf-role-player { color: var(--pf-ink-muted); background: rgba(236, 233, 226, 0.1); }
.pf-role-dm { color: var(--pf-gold-hi); background: rgba(202, 162, 75, 0.16); }
.pf-role-character { color: #a9c7d6; background: rgba(120, 175, 200, 0.14); }

/* ---------- recent adventures ---------- */
.pf-feed { list-style: none; margin: 0; padding: 0; position: relative; }

    .pf-feed::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 1rem;
        bottom: 1rem;
        width: 1px;
        background: var(--pf-border-dim);
    }

    .pf-feed li { display: flex; gap: 1rem; padding: 0.6rem 0; position: relative; }

.pf-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-top: 0.45rem;
    background: var(--pf-gold);
    box-shadow: 0 0 0 3px var(--pf-card);
}

.pf-feed-body { min-width: 0; }
.pf-feed-title { font-weight: 700; font-size: 0.9375rem; display: block; }

.pf-feed-link { color: var(--pf-ink); text-decoration: none; }
    .pf-feed-link:hover { color: var(--pf-gold-hi); text-decoration: underline; }
.pf-feed-meta { font-size: 0.8125rem; color: var(--pf-ink-dim); display: block; margin-top: 0.1rem; }
.pf-feed-with { font-size: 0.8125rem; color: var(--pf-ink-muted); display: block; margin-top: 0.15rem; }

/* ---------- achievement collection dialog ---------- */
.pf-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 7, 9, 0.82);
    z-index: 1040;
}

.pf-modal {
    position: fixed;
    z-index: 1050;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(44rem, calc(100% - 2rem));
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background-color: var(--pf-modal-bg);
    border: 1px solid var(--pf-border);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.75);
    color: var(--pf-ink);
}

.pf-modal-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: baseline;
    justify-content: space-between;
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid var(--pf-border-dim);
}

    .pf-modal-head h2 {
        font-family: Garamond, Georgia, serif;
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--pf-gold-hi);
        margin: 0;
    }

.pf-modal-body { padding: 0.8rem 1.2rem; overflow-y: auto; display: grid; gap: 0.5rem; }

.pf-modal-foot {
    padding: 0.9rem 1.2rem;
    border-top: 1px solid var(--pf-border-dim);
    display: flex;
    justify-content: flex-end;
}

.pf-ach {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    background-color: var(--pf-modal-panel);
    border: 1px solid var(--pf-border-dim);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}

    .pf-ach.is-locked { opacity: 0.5; }

.pf-ach-disc {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: radial-gradient(circle at 34% 28%, #d9b869, #8a6f34 55%, #43371a);
    border: 2px solid var(--pf-gold-hi);
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .pf-ach-disc img { width: 70%; height: 70%; object-fit: contain; }

.pf-ach.is-locked .pf-ach-disc {
    background: radial-gradient(circle at 34% 30%, #40403c, #1e1e1c);
    border-color: var(--pf-border-dim);
}

.pf-ach-title { font-weight: 700; font-size: 0.9375rem; }
.pf-ach-desc { font-size: 0.8125rem; color: var(--pf-ink-dim); }

/* ---------- misc ---------- */
.pf-empty {
    border: 1px dashed var(--pf-border-dim);
    border-radius: 10px;
    padding: 1.3rem;
    text-align: center;
    color: var(--pf-ink-muted);
    font-size: 0.9375rem;
}

.pf-flag {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    white-space: nowrap;
    color: var(--pf-warn);
    background: rgba(226, 188, 97, 0.14);
}

.pf-note { font-size: 0.8125rem; color: var(--pf-ink-dim); }

/* Long-form written text: a backstory is read, not scanned. */
.pf-prose {
    white-space: pre-wrap;
    max-width: 68ch;
    line-height: 1.7;
    color: var(--pf-ink-muted);
}

/* ---------- editor ---------- */
.pf-edit-card {
    background-color: var(--pf-card);
    border: 1px solid var(--pf-border-dim);
    border-radius: 12px;
    padding: 1.3rem 1.4rem;
}

.pf-field { margin-bottom: 1.3rem; }
.pf-field label { display: block; font-weight: 600; margin-bottom: 0.35rem; color: var(--pf-gold-hi); }
.pf-field .pf-help { font-size: 0.8125rem; color: var(--pf-ink-dim); margin-top: 0.3rem; }

.pf-page textarea.pf-input,
.pf-page input.pf-input,
.pf-page select.pf-input {
    width: 100%;
    max-width: 34rem;
    background: var(--pf-panel-2);
    color: var(--pf-ink);
    border: 1px solid var(--pf-border-dim);
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
}

.pf-counter { font-size: 0.8125rem; color: var(--pf-ink-dim); margin-top: 0.3rem; }

/* ---------- choice pickers ---------- */
/* ---------- stat picker (highlights, with their numbers) ---------- */
.pf-statpicker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.6rem;
}

.pf-statpick {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.7rem 0.8rem;
    background-color: var(--pf-panel);
    border: 1px solid var(--pf-border-dim);
    border-radius: 10px;
    cursor: pointer;
}

    .pf-statpick:hover { border-color: var(--pf-border); }

    .pf-statpick.is-on {
        border-color: var(--pf-gold);
        background-color: var(--pf-panel-2);
    }

    .pf-statpick input { accent-color: var(--pf-gold); cursor: pointer; margin-top: 0.2rem; }

    .pf-statpick.is-empty,
    .pf-statpick.is-locked { opacity: 0.45; cursor: not-allowed; }

.pf-statpick-body { min-width: 0; flex: 1 1 auto; }

.pf-statpick-head {
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
    justify-content: space-between;
}

.pf-statpick-label { font-size: 0.8125rem; color: var(--pf-ink-dim); }

.pf-statpick-rank {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pf-gold-hi);
    border: 1px solid var(--pf-border);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
}

.pf-statpick-value {
    display: block;
    font-family: Garamond, Georgia, serif;
    font-size: 1.6rem;
    line-height: 1.15;
    color: var(--pf-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .pf-statpick-value.is-none { font-size: 1rem; color: var(--pf-ink-dim); }

    /* An achievement's name is words, not a figure, so it wants reading size not display size. */
    .pf-statpick-value.pf-statpick-title { font-size: 1.05rem; color: var(--pf-gold-hi); }

/* Descriptions vary from a few words to a sentence; two lines keeps the cards even, and the
   whole text is on the tooltip for anything that gets clipped. */
.pf-statpick-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.75rem;
    color: var(--pf-ink-dim);
}


/* One character in the Discord nickname: its tickbox, and what it is called there. */
.nk-char {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.35rem;
}

.nk-char-pick { display: flex; gap: 0.4rem; align-items: center; cursor: pointer; min-width: 9rem; }

    .nk-char-pick input { accent-color: var(--pf-gold); cursor: pointer; }

.nk-char.is-on .nk-char-pick { color: var(--pf-gold-hi); }

.nk-char-short { max-width: 11rem; padding: 0.25rem 0.5rem; font-size: 0.8125rem; }

/* Its own line under the character, so it reads as belonging to that row. */
.nk-char-warn {
    flex-basis: 100%;
    padding-left: 1.6rem;
    font-size: 0.8125rem;
    color: #e08a72;
}

.pf-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pf-pick {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--pf-border-dim);
    background: var(--pf-panel);
    color: var(--pf-ink-muted);
    font-size: 0.875rem;
    cursor: pointer;
    margin: 0;
}

    .pf-pick:hover { border-color: var(--pf-border); color: var(--pf-ink); }

    .pf-pick.is-on {
        border-color: var(--pf-gold);
        color: var(--pf-gold-hi);
        background: rgba(202, 162, 75, 0.12);
    }

    .pf-pick input { accent-color: var(--pf-gold); cursor: pointer; }

    .pf-pick:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

.pf-pick-x {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0 0 0.2rem;
    cursor: pointer;
}

    .pf-pick-x:hover { color: #e08a72; }
.pf-counter.is-over { color: #e08a72; font-weight: 700; }

/* ---------- narrow ---------- */
@media (max-width: 900px) {
    .pf-cols { grid-template-columns: 1fr; gap: 1.6rem; }
    .pf-showcase { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .pf-page { padding: 1rem 0.75rem 2.5rem; }
    .pf-banner-art { height: 190px; }

    .pf-banner-body {
        grid-template-columns: 1fr;
        margin-top: -58px;
        padding: 0 1rem 1.1rem;
        gap: 0.8rem;
    }

    .pf-portrait { width: 92px; height: 110px; font-size: 2.4rem; }
    .pf-name { font-size: 2rem; }
    .pf-statement { font-size: 1.05rem; }
    .pf-body { padding: 0.5rem 1rem 1.5rem; gap: 1.6rem; }
    .pf-sec-title { font-size: 1.35rem; }
    .pf-showcase { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .pf-hl-num { font-size: 2.4rem; }
    .pf-feat-char { grid-template-columns: 1fr; }
    .pf-feat-art { min-height: 130px; border-right: 0; border-bottom: 1px solid var(--pf-border-dim); }
    .pf-banner-actions .pf-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- banner cropper (editor) ---------- */
/* The same height as the real strip, inside a card of nearly the same width, so what is framed
   here is what shows there. A shorter preview would quietly crop differently from the profile. */
.pf-cropper {
    position: relative;
    height: 280px;
    border-radius: 8px;
    border: 1px solid var(--pf-border-dim);
    overflow: hidden;
    background: #14171a;
}

.pf-cropctl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

.pf-range {
    width: 100%;
    accent-color: var(--pf-gold);
}

/* ---------- theme picker ---------- */
.pf-themepick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 0.6rem;
}

.pf-theme {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border-radius: 9px;
    border: 1px solid var(--pf-border-dim);
    background: var(--pf-panel);
    color: var(--pf-ink);
    text-align: left;
    cursor: pointer;
}

    .pf-theme:hover { border-color: var(--pf-border); }

    .pf-theme.is-on {
        border-color: var(--pf-gold-hi);
        box-shadow: inset 0 0 0 1px var(--pf-gold-hi);
    }

/* The three colours a theme actually owns, in the order they carry weight on the page. */
.pf-theme-swatch {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--b) 0 46%, var(--a) 46% 74%, var(--c) 74% 100%);
    border: 1px solid rgba(0,0,0,0.5);
}

.pf-theme-name { font-size: 0.875rem; line-height: 1.2; }

/* ---------- admin: review log ---------- */
.pf-revtally {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.6rem;
}

.pf-revtally-card {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.8rem;
    border-radius: 9px;
    border: 1px solid var(--pf-border-dim);
    background: var(--pf-panel);
    color: var(--pf-ink);
    text-align: left;
    cursor: pointer;
}

    .pf-revtally-card:hover { border-color: var(--pf-border); }
    .pf-revtally-card.is-on { border-color: var(--pf-gold-hi); }

.pf-revtally-nums { font-size: 0.875rem; color: var(--pf-ink-muted); }
.pf-revtally-ok { font-family: Garamond, Georgia, serif; font-size: 1.15rem; color: var(--pf-ok); }
.pf-revtally-no { font-family: Garamond, Georgia, serif; font-size: 1.15rem; color: #e08a72; }

.pf-revbadge {
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
}

    .pf-revbadge.is-ok { color: var(--pf-ok); }
    .pf-revbadge.is-no { color: #e08a72; }

/* ---------- admin: themes ---------- */
.pf-themeform {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

    /* A colour input ignores most sizing; give it a shape that matches the text fields beside it. */
    .pf-themeform input[type="color"] {
        height: 2.4rem;
        padding: 0.15rem;
        cursor: pointer;
    }

.pf-themeadmin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.9rem;
}

.pf-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--pf-ink-muted);
    margin: 0;
}