/* ============================================================
   profile.css — .ph-btn / .ph-actions shared button system
   Used by profile/partials/actions.phtml, restyled per-context by the
   .wp scope further down (Global CSS Master Pass, 2026-08-23). The old
   Stage 27A.1 three-column layout (.ph-layout, .ph-hero, .ph-tree-panel,
   .ph-stat-strip, .ph-dashboard, .ph-rpg-cards, .ph-posts) was superseded
   by the restored .wp-* profile below and had no markup referencing it
   anywhere in src/View — removed as dead weight after verifying with
   grep across views and both JS files.
   ============================================================ */

.ph-btn {
    font-family: var(--font-display);
    padding: 9px 20px;
    border-radius: 0;
    font-size: .82rem; font-weight: 700;
    cursor: pointer;
    transition: opacity .17s, transform .1s;
    white-space: nowrap;
}
.ph-btn:not(:disabled):hover { opacity: .88; transform: translateY(-1px); }
.ph-btn--primary {
    background: linear-gradient(135deg, #d4af37, #a07820);
    color: #0f0900; border: none;
    box-shadow: 0 2px 12px rgba(212,175,55,.25);
}
.ph-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255,255,255,.18);
    color: var(--color-text-secondary, rgba(255,255,255,.7));
}
.ph-btn:disabled {
    opacity: .4; cursor: not-allowed;
    transform: none !important;
}
.ph-btn__ico { display: inline-flex; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }

/* ── Profile actions (view-mode aware) ────────────────────── */
.ph-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
}

/* owner: subtle difference from viewer buttons (future styling hook) */
.ph-actions--owner {}

/* authenticated_viewer: follow button uses global profile-follow-btn styles */
.ph-actions--viewer {}

/* guest: login prompt strip */
.ph-actions--guest {
    margin-top: 8px;
}
.ph-actions__prompt {
    font-size: .82rem;
    color: var(--color-text-secondary, rgba(255,255,255,.68));
    margin: 0;
    background: rgba(212,175,55,.06);
    border: 1px solid var(--ph-gold-border, rgba(212,175,55,.22));
    border-radius: 0;
    padding: 8px 14px;
}
.ph-actions__prompt-link {
    color: var(--ph-gold, #d4af37);
    font-weight: 600;
    text-decoration: none;
}
.ph-actions__prompt-link:hover {
    text-decoration: underline;
}


/* ── Edit Profile Form — polished ─────────────────────────── */
.pe-wrap {
    max-width: 700px;
    margin: 28px auto 60px;
    padding: 0 18px;
}

/* Header row: back link + title */
.pe-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(212,175,55,.15);
}
.pe-back {
    font-size: .8rem;
    color: var(--color-text-secondary, rgba(255,255,255,.68));
    text-decoration: none;
    transition: color .15s;
    flex-shrink: 0;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 0;
}
.pe-back:hover {
    color: #d4af37;
    border-color: rgba(212,175,55,.3);
}
.pe-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -.01em;
}

/* Error block */
.pe-errors {
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.28);
    border-radius: 0;
    padding: 12px 16px;
    margin-bottom: 18px;
}
.pe-error {
    font-size: .82rem;
    color: #f87171;
    margin: 3px 0;
    padding-left: 4px;
}
.pe-error::before { content: '⚠ '; }

/* Form stack */
.pe-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Section card */
.pe-section {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 0;
    padding: 18px 20px 20px;
    margin-bottom: 14px;
    position: relative;
}
/* Gold left accent on section titles */
.pe-section__title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ph-gold, #d4af37);
    margin: 0 0 16px;
    padding-left: 10px;
    border-left: 2px solid rgba(212,175,55,.4);
}

/* Field layout */
.pe-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;          /* prevent flex children from overflowing */
}
.pe-field + .pe-field {
    margin-top: 14px;
}
.pe-field-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.pe-field-row .pe-field {
    min-width: 140px;      /* collapse gracefully on narrow screens */
    margin-top: 0;
}

/* Labels */
.pe-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-text-secondary, rgba(255,255,255,.7));
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
}
.pe-hint {
    font-weight: 400;
    font-size: .7rem;
    color: var(--color-text-tertiary, rgba(255,255,255,.44));
}

/* Inputs / textareas / selects — unified */
.pe-input,
.pe-textarea,
.pe-select {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 0;
    padding: 9px 12px;
    font-size: .875rem;
    line-height: 1.5;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s, background .15s;
    font-family: inherit;
}
.pe-input:hover,
.pe-textarea:hover,
.pe-select:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.2);
}
.pe-input:focus,
.pe-textarea:focus,
.pe-select:focus {
    outline: none;
    border-color: rgba(212,175,55,.5);
    background: rgba(212,175,55,.04);
    box-shadow: 0 0 0 3px rgba(212,175,55,.07);
}
.pe-textarea {
    resize: vertical;
    min-height: 88px;
    max-height: 260px;      /* prevent accidental page-height blowout */
}
.pe-select option {
    background: #1c1408;
    color: #e8e0d0;
}

/* Avatar upload area */
.pe-avatar-row {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}
.pe-avatar-preview {
    width: 76px; height: 76px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(212,175,55,.45),
                0 0 14px rgba(212,175,55,.15);
    flex-shrink: 0;
}
.pe-avatar-placeholder {
    width: 76px; height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4af37, #8a5e0a);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; font-weight: 800; color: #12090a;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(212,175,55,.3);
}
.pe-avatar-upload {
    flex: 1;
    min-width: 160px;
}

/* Styled file input area */
.pe-file-area {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 8px;
}
.pe-file-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 0;
    border: 1px dashed rgba(212,175,55,.3);
    background: rgba(212,175,55,.04);
    font-size: .8rem;
    font-weight: 600;
    color: var(--ph-gold, #d4af37);
    transition: border-color .15s, background .15s;
    width: fit-content;
}
.pe-file-label:hover {
    border-color: rgba(212,175,55,.6);
    background: rgba(212,175,55,.08);
}
.pe-file-input {
    /* visually hidden but accessible */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap;
}
.pe-file-hint {
    font-size: .69rem;
    color: var(--color-text-tertiary, rgba(255,255,255,.44));
    padding-left: 2px;
}

/* Checkboxes */
.pe-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 10px;
    font-size: .84rem;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.pe-checkbox-row:last-child { border-bottom: none; }
.pe-checkbox-row input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: #d4af37;
    cursor: pointer;
    flex-shrink: 0;
}
.pe-checkbox-label {
    color: var(--color-text-secondary, rgba(255,255,255,.7));
}

/* Submit row */
.pe-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 6px;
}
.pe-btn {
    padding: 10px 24px;
    border-radius: 0;
    font-size: .85rem; font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    transition: opacity .15s, transform .1s, box-shadow .15s;
    font-family: inherit;
}
.pe-btn:not(:disabled):hover {
    opacity: .9;
    transform: translateY(-1px);
}
.pe-btn--save {
    background: linear-gradient(135deg, #d4af37 0%, #a07820 100%);
    color: #0f0900;
    box-shadow: 0 2px 14px rgba(212,175,55,.28);
}
.pe-btn--save:hover {
    box-shadow: 0 4px 20px rgba(212,175,55,.4);
}
.pe-btn--cancel {
    background: transparent;
    border: 1px solid rgba(255,255,255,.18);
    color: var(--color-text-secondary, rgba(255,255,255,.7));
}
.pe-btn--cancel:hover {
    border-color: rgba(255,255,255,.3);
}

/* ── Mobile: edit form ────────────────────────────────────── */
@media (max-width: 600px) {
    .pe-wrap { padding: 0 12px; }
    .pe-section { padding: 14px 14px 16px; }
    .pe-field-row { flex-direction: column; gap: 14px; }
    .pe-field-row .pe-field { min-width: 0; }
    .pe-avatar-row { flex-direction: column; align-items: flex-start; }
    .pe-actions { flex-direction: column; align-items: stretch; }
    .pe-btn { justify-content: center; }
}

/* ================================================================
   User Discovery / Wędrowcy — Stage 28
   Local --ud-* tokens (self-contained, not inherited from elsewhere).
   ================================================================ */

/* ── Page wrap ────────────────────────────────────────────── */
.ud-wrap {
    --ud-gold:        #d4af37;
    --ud-gold-border: rgba(212,175,55,.22);
    --ud-surface:     rgba(255,255,255,.04);
    --ud-border:      rgba(255,255,255,.09);
    --ud-radius:      0;      /* Stage 2: sharp cards */

    max-width: 1000px;
    margin: 28px auto 60px;
    padding: 0 18px;
}

/* ── Header ───────────────────────────────────────────────── */
.ud-header { margin-bottom: 20px; }
.ud-title  { font-size: 1.4rem; font-weight: 800; margin: 0 0 4px; }
.ud-subtitle {
    font-size: .82rem;
    color: rgba(255,255,255,.6);
    margin: 0;
}

/* ── Search form ──────────────────────────────────────────── */
.ud-search-form { margin-bottom: 24px; }
.ud-search-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.ud-search-input {
    flex: 1;
    min-width: 200px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 0;
    padding: 10px 14px;
    font-size: .9rem;
    color: inherit;
    font-family: inherit;
    transition: border-color .15s, background .15s;
    box-sizing: border-box;
}
.ud-search-input:focus {
    outline: none;
    border-color: rgba(212,175,55,.5);
    background: rgba(212,175,55,.04);
}
.ud-search-input::placeholder { color: rgba(255,255,255,.44); }
.ud-search-btn {
    padding: 10px 22px;
    border-radius: 0;
    background: linear-gradient(135deg, #d4af37, #a07820);
    color: #0f0900;
    font-weight: 700;
    font-size: .85rem;
    border: none;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    font-family: inherit;
    white-space: nowrap;
}
.ud-search-btn:hover { opacity: .88; transform: translateY(-1px); }

.ud-hint { font-size: .78rem; margin: 6px 0 0; }
.ud-hint--warn { color: #f87171; }

/* ── Empty / no-result states ─────────────────────────────── */
.ud-empty {
    text-align: center;
    padding: 48px 20px;
    color: rgba(255,255,255,.55);
}
.ud-empty__icon { font-size: 2.4rem; display: block; margin-bottom: 12px; }
.ud-empty__text { font-size: .9rem; margin: 0; }

/* ── Results grid ─────────────────────────────────────────── */
.ud-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

/* ── User card ────────────────────────────────────────────── */
.ud-card {
    background: var(--ud-surface);
    border: 1px solid var(--ud-border);
    border-radius: var(--ud-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .2s, box-shadow .2s;
}
.ud-card:hover {
    border-color: var(--ud-gold-border);
    box-shadow: 0 0 18px rgba(212,175,55,.08);
}

/* The <a> wraps avatar + body — no underline, inherits text */
.ud-card__link {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    flex: 1;
}
.ud-card__link:hover .ud-card__name { color: var(--ud-gold); }

/* Avatar */
.ud-card__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.ud-card__avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4af37, #8a5e0a);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 800; color: #12090a;
    box-shadow: 0 0 0 2px rgba(212,175,55,.28);
}
.ud-card__avatar--img {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(212,175,55,.28);
}
.ud-card__online {
    position: absolute; bottom: 2px; right: 2px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid rgba(0,0,0,.6);
}

/* Card body */
.ud-card__body { flex: 1; min-width: 0; }
.ud-card__name {
    font-size: .95rem; font-weight: 700;
    margin: 0 0 5px;
    transition: color .15s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ud-card__badges {
    display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px;
}
.ud-card__badge {
    display: inline-block;
    font-size: .62rem; font-weight: 600;
    padding: 2px 7px;
    border-radius: 0;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.55);
    white-space: nowrap;
}
.ud-card__badge--ranga {
    color: var(--ud-gold);
    background: rgba(212,175,55,.1);
    border-color: rgba(212,175,55,.2);
}
.ud-card__bio {
    font-size: .78rem; line-height: 1.55;
    color: rgba(255,255,255,.55);
    margin: 0 0 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ud-card__location {
    font-size: .72rem;
    color: rgba(255,255,255,.55);
    margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Follow button row at the card bottom */
.ud-card__actions {
    padding: 0 16px 14px;
    display: flex;
    gap: 8px;
}
.ud-card__login-hint {
    font-size: .75rem;
    color: var(--ud-gold);
    text-decoration: none;
    font-weight: 600;
}
.ud-card__login-hint:hover { text-decoration: underline; }

/* Limit note */
.ud-limit-note {
    font-size: .76rem;
    color: rgba(255,255,255,.5);
    text-align: center;
    margin-top: 20px;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 560px) {
    .ud-grid { grid-template-columns: 1fr; }
    .ud-search-row { flex-direction: column; }
    .ud-search-btn { width: 100%; justify-content: center; }
}

/* ================================================================
   Wieści Kręgu — Notifications UI — Stage 29.1
   ================================================================ */

/* ── Page wrap ────────────────────────────────────────────── */
.nw-wrap {
    max-width: 680px;
    margin: 28px auto 60px;
    padding: 0 18px;
}

/* ── Page header ──────────────────────────────────────────── */
.nw-header {
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(212,175,55,.15);
}
.nw-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 4px;
    letter-spacing: -.01em;
}
.nw-subtitle {
    font-size: .8rem;
    color: rgba(255,255,255,.6);
    margin: 0;
}

/* ── Empty state ──────────────────────────────────────────── */
.nw-empty {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
    padding: 48px 20px;
    text-align: center;
    color: rgba(255,255,255,.5);
}
.nw-empty__icon {
    display: block;
    font-size: 2.2rem;
    margin-bottom: 12px;
    filter: grayscale(.4);
}
.nw-empty__text { font-size: .88rem; margin: 0; }

/* ── Notification list ────────────────────────────────────── */
.nw-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Notification card ────────────────────────────────────── */
.nw-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
    padding: 14px 16px;
    position: relative;
    transition: border-color .2s, background .2s;
}
.nw-item:hover {
    border-color: rgba(212,175,55,.2);
    background: rgba(255,255,255,.06);
}

/* Unread: gold left glow + slightly brighter surface */
.nw-item--unread {
    border-color: rgba(212,175,55,.28);
    background: rgba(212,175,55,.05);
    box-shadow: inset 3px 0 0 rgba(212,175,55,.45);
}
.nw-item--unread:hover {
    background: rgba(212,175,55,.08);
}

/* ── Type icon orb ────────────────────────────────────────── */
.nw-item__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
}
.nw-item--unread .nw-item__icon {
    background: rgba(212,175,55,.1);
    border-color: rgba(212,175,55,.25);
}

/* ── Body: message + time ─────────────────────────────────── */
.nw-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.nw-item__message {
    font-size: .875rem;
    line-height: 1.5;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    /* actor login is wrapped in <strong> by the view helper */
}
.nw-item__message strong {
    color: #e8e0d0;
    font-weight: 700;
}
a.nw-item__message:hover strong {
    color: #d4af37;
}
a.nw-item__message:hover {
    color: rgba(255,255,255,.9);
}
.nw-item__time {
    font-size: .7rem;
    color: rgba(255,255,255,.5);
    white-space: nowrap;
}

/* ── Unread dot ───────────────────────────────────────────── */
.nw-item__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d4af37;
    box-shadow: 0 0 6px rgba(212,175,55,.6);
    margin-left: auto;
}

/* ── Topbar badge (already rendered; polish only) ─────────── */
.notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 20px;
    background: #d4af37;
    color: #0f0900;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    margin-left: 5px;
    vertical-align: middle;
    box-shadow: 0 0 8px rgba(212,175,55,.4);
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 560px) {
    .nw-wrap { padding: 0 12px; }
    .nw-item { padding: 12px 13px; gap: 11px; }
    .nw-item__icon { width: 34px; height: 34px; font-size: .95rem; }
    .nw-item__message { font-size: .83rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WANDALIX PROFILE — the original profile, restored
   ═══════════════════════════════════════════════════════════════════════════
   Geometry, colour and card language transcribed from the first version
   (strona wandalix/profil.php): one centred column of clipped-corner cards,
   bracket ornaments at each corner, a gold hairline across the top edge, and
   a section label with a rule running off to the right.

   The Tree of Life SVG comes from REFERENCE_WANDALIX_V1/profil.php and is
   restyled here to sit inside that card rather than in its own column.

   Everything is prefixed .wp- so it cannot collide with the older .ph-* rules,
   the shared feed card styles, or the Stage 4A/4B chrome.
   ═══════════════════════════════════════════════════════════════════════════ */

.wp {
    /* Palette from the first profile's :root — a warmer, greener obsidian
       than the feed uses, which is what gave that page its own air. */
    --wp-bg0: #0A0A0A;
    --wp-bg1: #0E1009;
    --wp-bg2: #12150B;
    --wp-bg3: #161A0E;

    --wp-gold:    #C9A84C;
    --wp-gold-hi: #F0CC72;
    --wp-gold-lo: #9A7A2E;
    --wp-gold-dim: rgba(201, 168, 76, .48);

    /* t2/t3 raised for contrast (Global CSS Master Pass, 2026-08-23) — the old
       t3 (.38 opacity) measured ~1.7:1 against the card surfaces it labels
       stat/path/activity/social text against, far under WCAG. Same target
       values as --wdx-t3 in style.css so the profile reads as one system
       with the rest of the app instead of its own quieter ramp. */
    --wp-t1: rgba(232, 224, 206, .94);
    --wp-t2: rgba(205, 196, 174, .74);
    /* Phase B raised t3 from .68 to .72. At .68 it measured 4.49:1 against
       .wp-mod:hover — a rounding-width miss of the 4.5 floor, on the token
       that labels most of the dashboard. .72 clears it on both module
       surfaces (4.98 / 4.88) and changes nothing else. */
    --wp-t3: rgba(184, 174, 150, .72);

    --wp-border:   rgba(201, 168, 76, .12);
    --wp-border-h: rgba(201, 168, 76, .32);

    /* --wp-dom / --wp-dom-aura are set inline per profile from the user's
       dominant element, so the whole page takes its tint from the data. */

    /* Gutter colour for the dashboard grid — the hairline every module sits
       against. One token so the whole cluster stays a single chassis. */
    --wp-gutter: rgba(201, 168, 76, .14);

    /* Phase B — THE CANVAS.
       This was 860px inside a 1200px shell: ~340px of the profile's own
       column left empty on every desktop, which is most of why the page read
       as a narrow social profile with widgets rather than a dashboard. The
       route already gives up the right panel to buy that width; now it uses
       it.

       The cap is 1440, chosen by looking rather than by arithmetic: on a
       1440 display the shell — not this rule — is what decides, and the
       cockpit gets the full 1164px it can reach. Past about 1500 the centre
       column stops being generous and starts being empty: the XP bar spans
       most of a metre of glass and the name floats in the middle of
       nothing. So the canvas takes everything up to that point and no more.
       Tested at 1900; a higher cap measured wider and read worse.

       Paired with .app-shell--wide-profile > .content in style.css, which is
       capped at 1440 + 2x20px of padding. Change one and change the other. */
    max-width: 1440px;
    margin: 0 auto;
    padding: 4px 0 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: wdx-fadeUp .7s var(--wdx-ease-out) both;
    position: relative;
}

/* ── Profile backdrop (Phase B) ──────────────────────────────────────────
   profil_new.php gets much of its instrument-panel air from what is behind
   the panels: fine grid paper, a trace of grain, and a slow pool of light
   under the hero. Scoped to .wp, so the feed is untouched.

   Kept deliberately faint. Every layer is under .04 alpha and sits at
   z-index 0 behind the content — measured against the panel surfaces it
   costs nothing in contrast, and none of it sits under body text. */
.wp::before {
    content: '';
    position: absolute;
    inset: -4px 0 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(201, 168, 76, .030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, .030) 1px, transparent 1px);
    background-size: 52px 52px;
    /* Fades out down the page so the grid frames the cockpit and then
       gets out of the way of the posts. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.wp > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .wp { animation: none; }
}

/* ── Card: clipped corners, hairline, inner glow ─────────────────────────── */
.wp-card {
    background: var(--wp-bg1);
    border: 1px solid var(--wp-border);
    position: relative;
    overflow: hidden;
    /* The signature of the first profile — 10px bevels on all four corners. */
    clip-path: polygon(
        0 10px, 10px 0,
        calc(100% - 10px) 0, 100% 10px,
        100% calc(100% - 10px), calc(100% - 10px) 100%,
        10px 100%, 0 calc(100% - 10px)
    );
    transition: border-color var(--wdx-t-base) var(--wdx-ease-out),
                box-shadow   var(--wdx-t-base) var(--wdx-ease-out);
}
.wp-card:hover {
    border-color: rgba(201, 168, 76, .22);
    box-shadow: 0 0 40px rgba(0, 0, 0, .5), 0 0 20px rgba(201, 168, 76, .05);
}
/* Gold hairline inset from both ends along the top edge. */
.wp-card::before {
    content: '';
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--wp-gold-dim), transparent);
    pointer-events: none;
}
/* Light pooling under the top edge. */
.wp-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(201, 168, 76, .04) 0%, transparent 70%);
    pointer-events: none;
}
/* Modules whose backing system is not running yet read a shade quieter. */
.wp-card--prepared { opacity: .82; }

.wp-cc {
    position: absolute;
    width: 12px; height: 12px;
    border-color: rgba(201, 168, 76, .32);
    border-style: solid;
    z-index: 2;
    pointer-events: none;
}
.wp-cc--tl { top: 7px;    left: 7px;  border-width: 1px 0 0 1px; }
.wp-cc--tr { top: 7px;    right: 7px; border-width: 1px 1px 0 0; }
.wp-cc--bl { bottom: 7px; left: 7px;  border-width: 0 0 1px 1px; }
.wp-cc--br { bottom: 7px; right: 7px; border-width: 0 1px 1px 0; }

.wp-card__inner { position: relative; z-index: 1; padding: 28px 32px; }

/* ── Section label ───────────────────────────────────────────────────────── */
.wp-lbl {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .36em;
    color: var(--wp-gold);
    text-transform: uppercase;
    position: relative;
    padding-bottom: 7px;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.wp-lbl::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 28px; height: 1px;
    background: var(--wp-gold-dim);
}
.wp-lbl__line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--wp-border), transparent);
}
.wp-lbl__tag {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .18em;
    color: var(--wp-t3);
    text-transform: uppercase;
    border: 1px solid var(--wp-border);
    padding: 2px 8px;
    flex-shrink: 0;
}

.wp-empty {
    font-family: var(--font-body);
    font-size: 14px;
    font-style: italic;
    color: var(--wp-t3);
    margin: 0;
}
.wp-empty--centered { text-align: center; margin-top: 14px; }

.wp-flash {
    background: rgba(61, 138, 82, .12);
    border: 1px solid rgba(61, 138, 82, .35);
    color: #7FD79A;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .1em;
    padding: 10px 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ICONS — Global CSS Master Pass, 2026-08-23
   Replaces the profile's colourful emoji with the monochrome stroke-SVG
   language already used by the sidebar and right panel (wdx_icon() in
   Core/Helpers.php). One base size rule, then a size/gap override per
   context — colour always comes from the surrounding text colour
   (currentColor), so an icon picks up whatever gold/element tint its
   container already carries; nothing here recolours text.
   ═══════════════════════════════════════════════════════════════════════════ */
.wdx-ico { width: 1em; height: 1em; flex-shrink: 0; }

.wp-stat__emoji { display: flex; align-items: center; justify-content: center; }
.wp-stat__ico { width: 26px; height: 26px; color: var(--wp-gold-dim); transition: color var(--wdx-t-base); }
.wp-stat:hover .wp-stat__ico { color: var(--wp-gold-hi); }

.wp-path__emoji { display: flex; align-items: center; justify-content: center; }
.wp-path__ico { width: 24px; height: 24px; color: var(--wp-gold-dim); }
.wp-path--chosen .wp-path__ico { color: var(--wp-gold); }

.wp-el__emoji { display: flex; align-items: center; justify-content: center; }
.wp-el__ico { width: 13px; height: 13px; color: var(--wp-t3); }
.wp-el--dom .wp-el__ico { color: var(--wp-dom, var(--wp-gold)); }

.wp-prog__ico { width: 11px; height: 11px; vertical-align: -1px; margin-right: 1px; }
.wp-tree__total-ico { width: 12px; height: 12px; vertical-align: -1px; color: var(--wp-gold-dim); }

.wp-sys__ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
.wp-sys__note-ico { width: 11px; height: 11px; vertical-align: -1px; color: var(--wp-gold-dim); }

.wp-inv__icon { display: flex; align-items: center; justify-content: center; }
.wp-inv__ico { width: 13px; height: 13px; }

.wp-badge__emoji { display: flex; align-items: center; justify-content: center; }
.wp-badge__ico { width: 26px; height: 26px; }
.wp-badge__lock { display: flex; align-items: center; justify-content: center; }
.wp-badge__lock-ico { width: 12px; height: 12px; }

.wp-act__icon { display: flex; align-items: center; justify-content: center; color: var(--wp-gold-dim); }
.wp-act__ico { width: 15px; height: 15px; }

.wp-element-badge__ico { width: 11px; height: 11px; vertical-align: -1px; margin-right: 1px; }
.wp-rank-meta__ico { width: 10px; height: 10px; vertical-align: -1px; margin-right: 1px; }
.wp-meta__ico { width: 11px; height: 11px; vertical-align: -1px; margin-right: 2px; color: var(--wp-t3); }

/* ═══════════════════════════════════════════════════════════════════════════
   1 — IDENTITY
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Hero: 3-column composition (profil_new.php master reference) ──────────
   orbit-col | identity-col | cards-col. Collapses to 1 column at 1257px —
   its own breakpoint, chosen for when the three columns stop fitting, not the
   900px one the rest of the profile narrows at. */
/* Phase B — the hero is the page's anchor, so it gets real height. 440px is
   profil_new.php's figure and it is the right one: below about 420 the three
   columns stop reading as a frame and start reading as a toolbar. Content
   taller than this still grows the card; this is a floor, not a cap. */
.wp-hero { min-height: 440px; }

.wp-hero__inner {
    display: grid;
    /* 300 | rest | 330. The centre used to get 298px and had to hold a name,
       a rank row, a bio, an XP bar, three social counts and the action
       buttons — everything wrapped. It now gets whatever the flanks do not
       need, which on a 1440 desktop is roughly 500px. */
    grid-template-columns: 300px minmax(0, 1fr) 330px;
    gap: 0;
    align-items: stretch;
    min-height: 440px;
    position: relative;
    z-index: 1;
}

/* Columns are divided by hairlines rather than by whitespace — the
   instrument-panel move. Each column carries its own padding so the rules
   run the full height of the hero. */
.wp-hero__col { padding: 26px 28px; min-width: 0; }
.wp-hero__orbit-col { border-right: 1px solid var(--wp-border); }
.wp-hero__cards-col { border-left:  1px solid var(--wp-border); }

/* ── LEFT: the element constellation ───────────────────────────────────── */
.wp-hero__orbit-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(150deg, rgba(201, 168, 76, 0) 40%, rgba(201, 168, 76, .035) 100%);
}

/* 260px, up from 190px. The nodes carry a value and a name now, so the ring
   needed the room — and at 190 the constellation read as an avatar
   decoration rather than as the character's elements.

   --wp-orbit-lift is the optical correction. Geometry alone does not
   centre this: the pentagon sits on its circumcentre, but the ink does
   not, because the labels hang off the discs asymmetrically. With the
   apex label above and the other four below, the measured ink box runs
   -7..248.6 in a 260 box: centred at 120.8 against a box centre of 130, so
   the assembly needs to come DOWN ~9px. Measured in the browser against the
   rendered ink box, not derived on paper — an earlier pass guessed the same
   magnitude in the wrong direction and doubled the error. */
.wp-orbit {
    --wp-orbit-lift: 9px;
    position: relative;
    width: 260px;
    height: 260px;
    flex-shrink: 0;
    transform: translateY(var(--wp-orbit-lift));
}

.wp-orbit__web { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wp-orbit__ring-outer { animation: wdx-ringRot 26s linear infinite; transform-origin: 130px 130px; }
.wp-orbit__ring-inner { animation: wdx-ringRot 34s linear infinite reverse; transform-origin: 130px 130px; }
.wp-orbit__poly       { filter: drop-shadow(0 0 8px rgba(201, 168, 76, .06)); }
.wp-orbit__mote {
    filter: drop-shadow(0 0 6px var(--wp-gold));
    transform-origin: 130px 130px;
    animation: wdx-ringRot 26s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .wp-orbit__ring-outer,
    .wp-orbit__ring-inner,
    .wp-orbit__mote { animation: none; }
}

.wp-orbit__ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    pointer-events: none;
}
.wp-orbit__ring--outer {
    inset: 0;
    border: 1px solid rgba(201, 168, 76, .22);
    animation: wdx-ringRot 22s linear infinite;
}
.wp-orbit__ring--outer::before {
    content: '';
    position: absolute; top: -3px; left: 50%;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--wp-gold);
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(201, 168, 76, .7);
}
.wp-orbit__ring--inner {
    inset: 22px;
    border: 1px dashed rgba(201, 168, 76, .12);
    animation: wdx-ringRot 32s linear infinite reverse;
}

.wp-orbit__core {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 96px; height: 96px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, rgba(30, 33, 20, .96) 0%, rgba(6, 9, 6, .97) 72%);
    border: 2px solid rgba(201, 168, 76, .5);
    box-shadow: 0 0 0 6px rgba(201, 168, 76, .05),
                0 0 28px rgba(0, 0, 0, .8),
                0 0 22px var(--wp-dom-aura, rgba(201, 168, 76, .3));
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    overflow: hidden;
    z-index: 2;
}
/* With an avatar, the image fills the whole core and the level rides on top
   of it. Left in flow it took the core's full height and squeezed the LVL
   badge against the rim, which on an account with a photo made the core read
   as a cropped thumbnail rather than as the character's seal. */
.wp-orbit__core-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
}
.wp-orbit__core--photo { justify-content: flex-end; }
.wp-orbit__core--photo .wp-orbit__core-lvl {
    position: relative;
    width: 100%;
    padding: 12px 0 7px;
    text-align: center;
    color: var(--wp-gold-hi);
    /* Scrim, so the label stays readable over any photo. */
    background: linear-gradient(180deg, rgba(6, 9, 6, 0) 0%, rgba(6, 9, 6, .82) 55%);
}
.wp-orbit__core-initial {
    font-family: var(--font-display); font-size: 34px; color: var(--wp-gold);
    line-height: 1; text-shadow: 0 0 18px rgba(201, 168, 76, .45);
}
/* 10px, not the 8px this was. The Global CSS Master Pass lifted the app off
   its microtext floor and Phase B does not put anything back under it. */
.wp-orbit__core-lvl {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .16em;
    color: var(--wp-t2); text-transform: uppercase;
}

/* ── Orbit nodes ─────────────────────────────────────────────────────────
   Position comes from --wp-node-x/--wp-node-y, written inline per node from
   the same pentagon PHP uses for the SVG web. There is no per-element
   position rule any more: geometry lives in exactly one place, so the drawn
   spokes and the interactive discs cannot drift apart. */
.wp-orbit__nodes { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }

/* The node box is exactly the disc, and the name hangs off it absolutely.
   That matters: if the label were part of the flow box, translate(-50%,-50%)
   would centre disc-plus-label on the point and the disc itself would drift
   off the spoke — measured at 10px of drift before this was fixed, which is
   visible as the spokes missing their targets. */
.wp-orbit__node {
    position: absolute;
    left: var(--wp-node-x); top: var(--wp-node-y);
    width: 46px; height: 46px;
    transform: translate(-50%, -50%);
    color: var(--wp-node-c);
    z-index: 3;
}
.wp-orbit__node-disc {
    width: 100%; height: 100%; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    background: radial-gradient(circle at 50% 38%, rgba(18, 21, 11, .96), rgba(6, 9, 6, .96));
    border: 1.5px solid currentColor;
    opacity: .62;
    transition: opacity var(--wdx-t-base) var(--wdx-ease-out),
                transform var(--wdx-t-fast) var(--wdx-ease-out),
                box-shadow var(--wdx-t-base) var(--wdx-ease-out);
}
.wp-orbit__node:hover .wp-orbit__node-disc { opacity: 1; transform: scale(1.08); }
.wp-orbit__node.is-dom .wp-orbit__node-disc {
    opacity: 1;
    border-width: 2px;
    box-shadow: 0 0 16px currentColor, inset 0 0 12px rgba(255, 255, 255, .05);
}
.wp-orbit__node-ico { width: 16px; height: 16px; }
.wp-orbit__node-val {
    font-family: var(--font-display); font-size: 11px; line-height: 1;
    color: var(--wp-t1); font-weight: 700;
}
.wp-orbit__node-name {
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
    font-family: var(--font-label); font-size: 10px; letter-spacing: .12em;
    color: var(--wp-t3); text-transform: uppercase; white-space: nowrap;
    transition: color var(--wdx-t-base);
}
.wp-orbit__node--above .wp-orbit__node-name {
    top: auto; bottom: 100%;
    margin: 0 0 5px;
}
.wp-orbit__node.is-dom .wp-orbit__node-name { color: var(--wp-t1); }
.wp-orbit__node:hover .wp-orbit__node-name { color: var(--wp-t1); }

/* The apex node carries its name above the disc, the other four below.
   The modifier is emitted by PHP from the node's own angle — an earlier
   nth-child version keyed off DOM order and put a label above whichever
   element happened to be listed second, which was a bottom node, and that
   is what threw the constellation off balance. Placement itself is on
   .wp-orbit__node-name above. */

.wp-orbit__dom {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    margin: 0; text-align: center;
}
.wp-orbit__dom-lbl {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .2em;
    color: var(--wp-t3); text-transform: uppercase;
}
.wp-orbit__dom-name {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-display); font-size: 14px; letter-spacing: .1em;
    color: var(--wp-dom, var(--wp-gold));
}
.wp-orbit__dom-ico { width: 14px; height: 14px; }

.wp-hero__identity-col {
    min-width: 0;
    display: flex; flex-direction: column;
    justify-content: center;
}

/* ── RIGHT: the system cockpit ───────────────────────────────────────────
   Was four small squares in a 2x2. Now a vertical instrument stack: one
   readout per live RPG system, each with its label, its figure and — where
   there is a real denominator — its bar. Reads top-to-bottom like a panel
   rather than as four loose tiles. */
.wp-hero__cards-col {
    display: flex; flex-direction: column;
    gap: 10px;
    justify-content: center;
    background: linear-gradient(210deg, rgba(201, 168, 76, 0) 40%, rgba(201, 168, 76, .035) 100%);
}
.wp-cockpit__title {
    font-family: var(--font-display); font-size: 10px; font-weight: 400;
    letter-spacing: .36em; color: var(--wp-gold); text-transform: uppercase;
    margin: 0 0 4px; padding-bottom: 8px;
    border-bottom: 1px solid var(--wp-border);
}
.wp-gauge {
    background: rgba(255, 255, 255, .016);
    border: 1px solid var(--wp-border);
    border-left: 2px solid var(--wp-gold-dim);
    padding: 9px 12px;
    display: flex; flex-direction: column; gap: 5px;
    transition: border-color var(--wdx-t-base), background var(--wdx-t-base);
}
.wp-gauge:hover { border-color: var(--wp-border-h); background: rgba(255, 255, 255, .03); }
.wp-gauge__head { display: flex; align-items: center; gap: 7px; }
.wp-gauge__ico { width: 14px; height: 14px; flex-shrink: 0; color: var(--wp-gold-dim); }
.wp-gauge__lbl {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .14em;
    color: var(--wp-t2); text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wp-gauge__val {
    margin-left: auto; flex-shrink: 0;
    font-family: var(--font-display); font-size: 19px; font-weight: 700;
    color: var(--wp-gold-hi); line-height: 1;
}
.wp-gauge__val-unit { font-size: 12px; color: var(--wp-t3); font-weight: 400; }
.wp-gauge__bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.wp-gauge__bar span {
    display: block; height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, var(--wp-gold-lo), var(--wp-gold));
}
.wp-gauge__sub {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .06em;
    color: var(--wp-t3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wp-gauge__sub--gold { color: var(--wp-gold); }

/* Each system keeps its own accent, so the stack is scannable by colour. */
.wp-gauge--energia { border-left-color: rgba(224, 82, 82, .55); }
.wp-gauge--energia .wp-gauge__ico { color: #e05252; }
.wp-gauge--rezonans .wp-gauge__ico { color: var(--wp-gold); }
.wp-gauge--akasza { border-left-color: rgba(155, 111, 204, .6); }
.wp-gauge--akasza .wp-gauge__ico { color: #9b6fcc; }
.wp-gauge--akasza .wp-gauge__bar span { background: linear-gradient(90deg, #6d4a94, #9b6fcc); }
.wp-gauge--tree { border-left-color: rgba(95, 143, 82, .6); }
.wp-gauge--tree .wp-gauge__ico { color: #5f8f52; }
.wp-gauge--tree .wp-gauge__bar span { background: linear-gradient(90deg, #3d6b34, #5f8f52); }
.wp-gauge--aura { border-left-color: rgba(192, 139, 255, .6); }
.wp-gauge--aura .wp-gauge__ico,
.wp-gauge--aura .wp-gauge__lbl { color: #c08bff; }
.wp-gauge--aura .wp-gauge__bar span { background: linear-gradient(90deg, #7d4fb3, #c08bff); }
.wp-gauge--reward.is-ready { border-left-color: var(--wp-gold); background: rgba(201, 168, 76, .05); }
.wp-gauge--reward.is-ready .wp-gauge__ico { color: var(--wp-gold); }

.wp-name {
    font-family: var(--font-display);
    font-size: 28px; font-weight: 700;
    letter-spacing: .18em;
    margin: 0 0 8px;
    background: linear-gradient(90deg, var(--wp-gold-lo), var(--wp-gold-hi), var(--wp-gold-lo));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: wdx-goldShimmer 5s ease-in-out 1s infinite;
    line-height: 1.2;
}

.wp-rank {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 6px;
}
.wp-rank-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(201, 168, 76, .1);
    border: 1px solid rgba(201, 168, 76, .28);
    padding: 3px 11px;
    font-family: var(--font-display);
    font-size: 10.5px; letter-spacing: .2em;
    color: var(--wp-gold); text-transform: uppercase;
}
/* The dominant element badge takes that element's own colour. */
.wp-element-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 11px;
    border: 1px solid var(--wp-dom, var(--wp-gold-dim));
    background: var(--wp-dom-aura, rgba(201, 168, 76, .1));
    font-family: var(--font-label);
    font-size: 10px; letter-spacing: .18em;
    color: var(--wp-dom, var(--wp-gold));
    text-transform: uppercase;
}
.wp-rank-meta {
    font-family: var(--font-label);
    font-size: 10.5px; letter-spacing: .16em;
    color: var(--wp-t3); text-transform: uppercase;
}

.wp-online {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-label);
    font-size: 10.5px; letter-spacing: .22em;
    color: rgba(82, 192, 96, .8); text-transform: uppercase;
    margin-bottom: 14px;
}
.wp-online--off { color: var(--wp-t3); }
.wp-online-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #52C060; box-shadow: 0 0 6px rgba(82, 192, 96, .6);
    animation: wdx-blink 3s ease-in-out infinite;
}

.wp-motto {
    font-family: var(--font-body);
    font-size: 15px; font-style: italic;
    color: var(--wp-gold-dim);
    border-left: 2px solid var(--wp-border);
    padding-left: 12px;
    margin: 0 0 10px;
}
.wp-bio {
    font-family: var(--font-body);
    font-size: 14.5px; line-height: 1.7;
    color: var(--wp-t2);
    margin: 0 0 14px;
    overflow-wrap: break-word;
}

/* XP */
.wp-xp { margin-bottom: 14px; }
.wp-xp__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.wp-xp__lv  { font-family: var(--font-display); font-size: 10px; letter-spacing: .14em; color: var(--wp-gold); }
.wp-xp__val { font-family: var(--font-label);   font-size: 10.5px;  color: var(--wp-t3); }
.wp-xp__bar {
    height: 4px; border-radius: 2px;
    background: rgba(255, 255, 255, .05);
    position: relative; overflow: hidden;
}
.wp-xp__fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--wp-gold-lo), var(--wp-gold-hi), var(--wp-gold));
    background-size: 200% auto;
    animation: wdx-xpAnim 1.4s var(--wdx-ease-out) .5s both,
               wdx-goldShimmer 3s ease-in-out 2s infinite;
}

.wp-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.wp-meta__item {
    font-family: var(--font-label);
    font-size: 10.5px; letter-spacing: .12em;
    color: var(--wp-t3);
    border: 1px solid var(--wp-border);
    padding: 3px 9px;
}

/* Action buttons — the shared .ph-btn markup, dressed for this page. */
.wp .ph-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.wp .ph-btn {
    font-family: var(--font-display);
    font-size: 10px; font-weight: 400;
    letter-spacing: .22em; text-transform: uppercase;
    padding: 9px 20px;
    border-radius: 0;
    border: 1px solid var(--wp-gold-dim);
    background: linear-gradient(135deg, rgba(201, 168, 76, .14) 0%, rgba(201, 168, 76, .06) 100%);
    color: var(--wp-gold);
    box-shadow: none;
    transition: background var(--wdx-t-base), border-color var(--wdx-t-base), transform var(--wdx-t-fast);
}
.wp .ph-btn:not(:disabled):hover {
    background: rgba(201, 168, 76, .22);
    border-color: var(--wp-gold);
    opacity: 1;
    transform: translateY(-1px);
}
.wp .ph-btn--ghost {
    background: transparent;
    border-color: var(--wp-border);
    color: var(--wp-t3);
}
.wp .ph-btn:disabled { opacity: .35; }
.wp .ph-actions__prompt {
    font-family: var(--font-body);
    font-size: 14px; font-style: italic;
    color: var(--wp-t3);
    margin: 0;
}
.wp .ph-actions__prompt-link { color: var(--wp-gold); }
.wp .profile-follow-btn {
    font-family: var(--font-display);
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    padding: 9px 20px; border-radius: 0;
    border: 1px solid var(--wp-gold-dim);
    background: linear-gradient(135deg, rgba(201, 168, 76, .14) 0%, rgba(201, 168, 76, .06) 100%);
    color: var(--wp-gold);
}
.wp .profile-follow-btn--following {
    border-color: var(--wp-border);
    background: transparent;
    color: var(--wp-t2);
}

/* Social counts */
.wp-social {
    display: flex; align-items: center; justify-content: center; gap: 26px;
    margin-top: 22px; padding-top: 18px;
    border-top: 1px solid var(--wp-border);
}
.wp-social__item { text-align: center; }
.wp-social__item--btn {
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: inherit; transition: opacity var(--wdx-t-base);
}
.wp-social__item--btn:hover { opacity: .75; }
.wp-social__val {
    display: block;
    font-family: var(--font-display);
    font-size: 20px; color: var(--wp-gold); line-height: 1;
}
.wp-social__lbl {
    display: block; margin-top: 4px;
    font-family: var(--font-label);
    font-size: 10px; letter-spacing: .2em;
    color: var(--wp-t3); text-transform: uppercase;
}
.wp-social__sep { width: 1px; height: 26px; background: var(--wp-border); }

/* ═══════════════════════════════════════════════════════════════════════════
   STRIP — quick-stats row between the hero and the module cards
   ═══════════════════════════════════════════════════════════════════════════ */
.wp-strip {
    display: flex; align-items: stretch;
    background: var(--wp-bg1);
    border: 1px solid var(--wp-border);
    overflow-x: auto;
}
.wp-strip__item {
    flex: 1; min-width: 118px;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-right: 1px solid var(--wp-border);
    text-decoration: none; color: inherit;
}
.wp-strip__item:last-child { border-right: none; }
.wp-strip__item--link { transition: background var(--wdx-t-base); }
.wp-strip__item--link:hover { background: rgba(201, 168, 76, .05); }
.wp-strip__ico { width: 16px; height: 16px; color: var(--wp-gold-dim); flex-shrink: 0; }
.wp-strip__val {
    font-family: var(--font-display); font-size: 19px; color: var(--wp-gold); line-height: 1;
}
.wp-strip__val--sm { font-size: 13px; letter-spacing: .04em; }
.wp-strip__val-unit { font-family: var(--font-label); font-size: 10px; color: var(--wp-t3); margin-left: 1px; }
/* 10px, up from 8px. The strip is the one element the audit called
   successful, so nothing about it is redesigned — but 8px was below this
   app's type floor, and the strip now spans the full cockpit width, so the
   labels have the room. */
.wp-strip__lbl {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .14em;
    color: var(--wp-t3); text-transform: uppercase; margin-top: 2px;
}
@media (max-width: 900px) {
    .wp-strip { flex-wrap: wrap; }
    .wp-strip__item { flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--wp-border); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 — STATS GRID
   ═══════════════════════════════════════════════════════════════════════════ */
.wp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.wp-stat {
    background: var(--wp-bg2);
    border: 1px solid var(--wp-border);
    padding: 18px 16px;
    text-align: center;
    position: relative; overflow: hidden;
    transition: border-color var(--wdx-t-base) var(--wdx-ease-out),
                transform    var(--wdx-t-base) var(--wdx-ease-out),
                box-shadow   var(--wdx-t-base) var(--wdx-ease-out);
}
.wp-stat::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201, 168, 76, .08) 0%, transparent 70%);
    opacity: 0; transition: opacity var(--wdx-t-base);
}
.wp-stat:hover { border-color: var(--wp-border-h); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.wp-stat:hover::before { opacity: 1; }
.wp-stat:hover .wp-stat__num { color: var(--wp-gold-hi); }
.wp-stat:hover .wp-stat__emoji { transform: scale(1.18) translateY(-2px); }

.wp-stat__emoji { font-size: 24px; margin-bottom: 8px; transition: transform var(--wdx-t-base) var(--wdx-ease-out); }
.wp-stat__num {
    /* Primary gold tier — the one number each tile exists to show, so it
       sits a shade brighter than section labels (Global CSS Master Pass,
       three-level gold hierarchy, priority 3). */
    font-family: var(--font-display);
    font-size: 26px; font-weight: 700;
    color: var(--wp-gold-hi); letter-spacing: .06em; line-height: 1;
    margin-bottom: 5px; transition: color var(--wdx-t-base);
    position: relative; z-index: 1;
}
.wp-stat__name {
    font-family: var(--font-label);
    font-size: 10px; letter-spacing: .22em;
    color: var(--wp-t3); text-transform: uppercase;
    position: relative; z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3 — TREE OF LIFE
   ═══════════════════════════════════════════════════════════════════════════ */
.wp-tree { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: center; }
.wp-tree__canvas { display: flex; justify-content: center; }
.wp-tree__svg { width: 100%; max-width: 300px; height: auto; overflow: visible; }

/* Wood */
.wp-t-trunk  { fill: #3A2818; stroke: #5E3B1F; stroke-width: .8; }
.wp-t-branch { fill: none; stroke: #52361B; stroke-width: 2.2; stroke-linecap: round; }
.wp-t-root {
    fill: none; stroke: #3A2818; stroke-width: 1.6; stroke-linecap: round;
    opacity: .45; stroke-dasharray: 120;
    animation: wdx-rootGrow 1.8s var(--wdx-ease-out) .3s both;
}
.wp-t-rune { fill: none; stroke: rgba(201, 168, 76, .14); stroke-width: .7; }

/* Fruit */
.wp-fruit { animation: wdx-fruitIn .55s var(--wdx-ease-out) both; }
.wp-fruit__c { transition: filter .25s ease; }
.wp-fruit:hover .wp-fruit__c { filter: brightness(1.3); }
.wp-fruit__pts { fill: var(--wp-t3); font-family: var(--font-label); }
/* The dominant element breathes in its own colour. */
.wp-fruit--dom .wp-fruit__c {
    filter: drop-shadow(0 0 10px var(--wp-dom, var(--wp-gold)));
    animation: wdx-auraBreath 2.6s ease-in-out infinite;
}

/* XP ring around the trunk */
.wp-xp-track { fill: none; stroke: rgba(201, 168, 76, .07); stroke-width: 3; }
.wp-xp-ring {
    fill: none; stroke: var(--wp-dom, var(--wp-gold));
    stroke-width: 3; stroke-linecap: round;
    transition: stroke-dashoffset 1.2s var(--wdx-ease-out);
}
.wp-xp-bg { fill: var(--wp-bg2); stroke: var(--wp-border); stroke-width: 1; }
.wp-tree__initial { fill: var(--wp-gold); font-family: var(--font-display); }
.wp-tree__lvl     { fill: var(--wp-t3);   font-family: var(--font-label); letter-spacing: .14px; }

/* Side column */
.wp-tree__side { display: flex; flex-direction: column; gap: 14px; }
.wp-tree__stage { text-align: center; }
.wp-tree__stage-num {
    font-family: var(--font-display);
    font-size: 46px; font-weight: 700; line-height: 1;
    color: var(--wp-dom, var(--wp-gold));
}
.wp-tree__stage-num span { font-size: 18px; color: var(--wp-t3); }
.wp-tree__stage-name {
    font-family: var(--font-label);
    font-size: 10.5px; letter-spacing: .2em;
    color: var(--wp-t2); text-transform: uppercase; margin-top: 4px;
}

.wp-prog__hdr { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.wp-prog__lbl  { font-family: var(--font-display); font-size: 10.5px; letter-spacing: .18em; color: var(--wp-gold); text-transform: uppercase; }
.wp-prog__meta { font-family: var(--font-label);   font-size: 10px; letter-spacing: .1em;  color: var(--wp-t3); }
.wp-prog__bar  { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.wp-prog__fill {
    display: block; height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, rgba(201, 168, 76, .55), var(--wp-gold));
    transition: width 1s var(--wdx-ease-out);
}
.wp-prog__next { font-family: var(--font-label); font-size: 10px; letter-spacing: .1em; color: var(--wp-t3); margin-top: 3px; }

.wp-tree__total {
    font-family: var(--font-body);
    font-size: 13px; color: var(--wp-t2);
    padding-top: 10px; border-top: 1px solid var(--wp-border);
}
.wp-tree__total strong { font-family: var(--font-display); color: var(--wp-gold); font-weight: 400; }

/* Element bars */
.wp-els { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.wp-el  { display: grid; grid-template-columns: 18px 74px 1fr 30px; align-items: center; gap: 8px; }
.wp-el__emoji { font-size: 12px; text-align: center; }
.wp-el__name  { font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; color: var(--wp-t3); text-transform: uppercase; }
.wp-el__bar   { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.wp-el__fill  { display: block; height: 100%; border-radius: 2px; transition: width .8s var(--wdx-ease-out); }
.wp-el__val   { font-family: var(--font-label); font-size: 10.5px; color: var(--wp-t2); text-align: right; }
.wp-el--dom .wp-el__name { color: var(--wp-dom, var(--wp-gold)); }
.wp-el--dom .wp-el__val  { color: var(--wp-dom, var(--wp-gold)); }

/* Owoc Drzewa — daily gift, owner-only collect flow */
.wp-gift {
    display: flex; align-items: center; gap: 10px;
    margin-top: 14px; padding: 10px 14px;
    border: 1px solid var(--wp-border);
    background: var(--wp-bg2);
}
.wp-gift.is-ready { border-color: var(--wp-gold-dim); background: rgba(201, 168, 76, .06); }
.wp-gift__ico-svg { width: 18px; height: 18px; color: var(--wp-gold); flex-shrink: 0; }
.wp-gift__ico--dim .wp-gift__ico-svg { color: var(--wp-t3); }
.wp-gift__text { flex: 1; font-family: var(--font-body); font-size: 13px; color: var(--wp-t1); }
.wp-gift__text--dim { color: var(--wp-t3); font-size: 12px; }
.wp-btn-collect {
    font-family: var(--font-display); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
    padding: 7px 16px; background: rgba(201, 168, 76, .14); border: 1px solid var(--wp-gold-dim); color: var(--wp-gold);
    cursor: pointer; white-space: nowrap;
    transition: background var(--wdx-t-base), border-color var(--wdx-t-base), transform var(--wdx-t-fast);
}
.wp-btn-collect:hover:not(:disabled) { background: rgba(201, 168, 76, .24); border-color: var(--wp-gold); transform: translateY(-1px); }
.wp-btn-collect:disabled { opacity: .5; cursor: default; transform: none; }
@media (max-width: 480px) {
    .wp-gift { flex-direction: column; align-items: flex-start; }
    .wp-btn-collect { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4 — SYSTEM CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.wp-sys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wp-sys__card {
    background: var(--wp-bg2);
    border: 1px solid var(--wp-border);
    padding: 16px 16px 14px;
    position: relative; overflow: hidden;
    transition: border-color var(--wdx-t-base), transform var(--wdx-t-base) var(--wdx-ease-out);
}
.wp-sys__card:hover { border-color: var(--wp-border-h); transform: translateY(-2px); }
.wp-sys__card--energy    { border-color: rgba(224, 82, 82, .18); }
.wp-sys__card--resonance { border-color: rgba(201, 168, 76, .22); }
.wp-sys__card--akasha    { border-color: rgba(155, 111, 204, .18); }
.wp-sys__card--buffs     { border-color: rgba(192, 139, 255, .16); }
.wp-sys__card--inventory { border-color: rgba(90, 170, 110, .16); }

.wp-sys__head {
    font-family: var(--font-display);
    font-size: 10.5px; letter-spacing: .2em;
    color: var(--wp-gold); text-transform: uppercase;
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 10px;
}
.wp-sys__val {
    /* Primary gold tier — see .wp-stat__num. */
    font-family: var(--font-display);
    font-size: 30px; font-weight: 700; line-height: 1;
    color: var(--wp-gold-hi);
}
.wp-sys__val--muted { color: var(--wp-t3); }
.wp-sys__sub {
    font-family: var(--font-label);
    font-size: 10px; letter-spacing: .18em;
    color: var(--wp-t3); text-transform: uppercase;
    margin: 4px 0 10px;
}
.wp-sys__note {
    font-family: var(--font-body);
    font-size: 12.5px; color: var(--wp-t2); margin: 0;
}
.wp-sys__note strong { font-family: var(--font-display); color: var(--wp-gold); font-weight: 400; }
.wp-sys__note-link { text-decoration: none; }
.wp-sys__note-link:hover strong { text-decoration: underline; }
.wp-sys__log-txt--link { text-decoration: none; transition: opacity var(--wdx-t-base); }
.wp-sys__log-txt--link:hover { opacity: .75; text-decoration: underline; }
.wp-sys__empty {
    font-family: var(--font-body);
    font-size: 12.5px; font-style: italic;
    color: var(--wp-t3); margin: 0;
}

.wp-sys__log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.wp-sys__log-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    font-family: var(--font-label); font-size: 10px; letter-spacing: .08em;
    color: var(--wp-t3);
    padding-top: 5px; border-top: 1px solid var(--wp-border);
}
.wp-sys__log-amt { flex-shrink: 0; }
.wp-sys__log-amt.is-plus  { color: #7FD79A; }
.wp-sys__log-amt.is-minus { color: #E08585; }
.wp-sys__log-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wp-inv { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.wp-inv__row {
    display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px;
    padding-top: 5px; border-top: 1px solid var(--wp-border);
}
.wp-inv__icon { font-size: 11px; text-align: center; color: var(--wp-gold-dim); }
.wp-inv__name { font-family: var(--font-body);  font-size: 12.5px; color: var(--wp-t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-inv__meta { font-family: var(--font-label); font-size: 10px; letter-spacing: .14em; color: var(--wp-t3); text-transform: uppercase; }
.wp-inv__row.is-opened .wp-inv__icon { opacity: .4; }
.wp-inv__open-btn {
    font-family: var(--font-label); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
    padding: 3px 9px; background: rgba(201, 168, 76, .08); border: 1px solid var(--wp-gold-dim); color: var(--wp-gold);
    cursor: pointer; transition: background var(--wdx-t-base), border-color var(--wdx-t-base);
}
.wp-inv__open-btn:hover { background: rgba(201, 168, 76, .16); border-color: var(--wp-gold); }
.wp-inv__open-btn:disabled { opacity: .5; cursor: default; }

/* Wallet earned/spent row on the Energia card */
.wp-sys__row {
    display: flex; justify-content: space-between; gap: 8px;
    font-family: var(--font-label); font-size: 8.5px; letter-spacing: .06em; color: var(--wp-t3);
    margin: 2px 0 8px;
}
.wp-sys__row strong { font-weight: normal; }
.wp-sys__row .is-plus  { color: #7FD79A; }
.wp-sys__row .is-minus { color: #E08585; }

/* Akasza rank card */
.wp-akasha-rank {
    font-family: var(--font-display); font-size: 12px; letter-spacing: .1em;
    color: var(--wp-akasza, #9b6fcc); margin: 0 0 8px;
}
.wp-akasha-bar {
    height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; margin-bottom: 4px;
}
.wp-akasha-bar span { display: block; height: 100%; border-radius: 2px; background: #9b6fcc; }
.wp-akasha-reward-note { color: var(--wp-gold) !important; }
/* Earned rank reward whose product system is not built yet — deliberately
   styled like the "system w przygotowaniu" language used by badges.phtml and
   map.phtml, not like a claimable reward, so it never reads as a button. */
.wp-akasha-pending {
    display: inline-block; margin: 6px 0 2px;
    font-family: var(--font-label); font-size: 8px; letter-spacing: .18em; text-transform: uppercase;
    padding: 3px 8px;
    color: var(--wp-t3);
    border: 1px dashed var(--wp-border-h);
}
.wp-btn-claim {
    width: 100%; margin-top: 8px;
    font-family: var(--font-display); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
    padding: 8px 10px; background: rgba(201, 168, 76, .12); border: 1px solid var(--wp-gold-dim); color: var(--wp-gold);
    cursor: pointer; transition: background var(--wdx-t-base), border-color var(--wdx-t-base), transform var(--wdx-t-fast);
}
.wp-btn-claim:hover:not(:disabled) { background: rgba(201, 168, 76, .22); border-color: var(--wp-gold); transform: translateY(-1px); }
.wp-btn-claim:disabled { opacity: .5; cursor: default; transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   5 — PATHS
   ═══════════════════════════════════════════════════════════════════════════ */
.wp-paths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.wp-path  { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.wp-path__circle {
    width: 78px; height: 78px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 168, 76, .16) 0%, rgba(201, 168, 76, .04) 100%);
    border: 2px solid rgba(201, 168, 76, .35);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    transition: border-color var(--wdx-t-base), box-shadow var(--wdx-t-base), transform var(--wdx-t-base) var(--wdx-ease-out);
}
.wp-path:hover .wp-path__circle {
    border-color: var(--wp-gold-dim);
    box-shadow: 0 0 24px rgba(201, 168, 76, .22);
    transform: scale(1.08);
}
.wp-path--chosen .wp-path__circle {
    border-color: var(--wp-gold);
    box-shadow: 0 0 20px rgba(201, 168, 76, .2);
}
.wp-path__emoji { font-size: 22px; line-height: 1; }
.wp-path__lvl   { font-family: var(--font-label); font-size: 10px; letter-spacing: .12em; color: var(--wp-t3); }
.wp-path__name  {
    font-family: var(--font-display);
    font-size: 10.5px; letter-spacing: .2em;
    color: var(--wp-t2); text-transform: uppercase; text-align: center;
}
.wp-path--chosen .wp-path__name { color: var(--wp-gold); }
.wp-path__bar  { width: 80px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.wp-path__fill { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--wp-gold-dim), var(--wp-gold-hi)); }
.wp-path__tag  {
    font-family: var(--font-label); font-size: 9.5px;
    letter-spacing: .2em; color: var(--wp-gold-dim); text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 — ACTIVITY
   ═══════════════════════════════════════════════════════════════════════════ */
.wp-acts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wp-act {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 12px 14px;
    background: var(--wp-bg2); border: 1px solid var(--wp-border);
    position: relative; overflow: hidden;
    transition: border-color var(--wdx-t-base), background var(--wdx-t-base), transform var(--wdx-t-fast) var(--wdx-ease-out);
}
.wp-act::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(180deg, transparent, var(--wp-gold-dim), transparent);
    transform: scaleY(0);
    transition: transform var(--wdx-t-base) var(--wdx-ease-out);
}
.wp-act:hover { border-color: var(--wp-border-h); background: var(--wp-bg3); transform: translateX(2px); }
.wp-act:hover::before { transform: scaleY(1); }
.wp-act:hover .wp-act__icon { background: rgba(201, 168, 76, .18); border-color: var(--wp-gold-dim); }

.wp-act__icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(201, 168, 76, .09);
    border: 1px solid rgba(201, 168, 76, .22);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
    transition: background var(--wdx-t-base), border-color var(--wdx-t-base);
}
.wp-act__body { flex: 1; min-width: 0; }
.wp-act__text {
    display: block;
    font-family: var(--font-body);
    font-size: 13.5px; line-height: 1.55; font-style: italic;
    color: var(--wp-t2);
}
.wp-act__time {
    display: block; margin-top: 3px;
    font-family: var(--font-label);
    font-size: 10px; letter-spacing: .12em; color: var(--wp-t3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7 — BADGES (prepared)
   ═══════════════════════════════════════════════════════════════════════════ */
.wp-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wp-badge {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 18px 10px;
    background: var(--wp-bg2); border: 1px solid var(--wp-border);
    position: relative; overflow: hidden;
}
.wp-badge.is-locked { opacity: .32; filter: grayscale(.7); }
.wp-badge__emoji { font-size: 28px; color: var(--wp-t3); }
.wp-badge__lock  { font-size: 13px; color: var(--wp-t3); }
.wp-badge__name  {
    font-family: var(--font-label);
    font-size: 10px; letter-spacing: .18em;
    color: var(--wp-t3); text-transform: uppercase; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8 — MAP (prepared)
   ═══════════════════════════════════════════════════════════════════════════ */
.wp-map {
    position: relative;
    height: 240px;
    /* Brightened one step from the original near-black ramp (#060A04..#0C1408)
       — still a dark forest obsidian, but the terrain and grid read clearly
       instead of dissolving into the card background (Global CSS Master
       Pass, priority 13). */
    background: linear-gradient(145deg, #0E1608 0%, #182410 40%, #10190C 70%, #0C1408 100%);
    border: 1px solid var(--wp-border);
    overflow: hidden;
}
.wp-map::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(201, 168, 76, .11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, .11) 1px, transparent 1px);
    background-size: 44px 44px;
}
.wp-map::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 30% 60%, rgba(201, 168, 76, .12) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 70% 30%, rgba(201, 168, 76, .09) 0%, transparent 65%),
        radial-gradient(ellipse 80% 20% at 50% 100%, rgba(6, 10, 4, .55) 0%, transparent 60%);
}
.wp-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wp-map__veil {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.wp-map__veil-glyph { font-size: 22px; color: var(--wp-gold-dim); filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.wp-map__veil-text {
    font-family: var(--font-label);
    font-size: 10.5px; letter-spacing: .26em;
    color: var(--wp-t3); text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9 — POSTS
   ═══════════════════════════════════════════════════════════════════════════ */
.wp-posts { display: flex; flex-direction: column; }
/* Feed cards sit flush inside the profile card — no double frame. */
.wp-posts .post-card.pc { margin-bottom: 14px; }
.wp-posts .post-card.pc:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   10 — FOLLOW MODAL (Obserwujący / Obserwowani)
   ═══════════════════════════════════════════════════════════════════════════ */
.wp-modal-overlay {
    display: none;
    position: fixed; inset: 0; z-index: var(--z-modal, 100);
    background: var(--bg-overlay, rgba(10, 10, 15, .85));
    backdrop-filter: blur(4px);
    align-items: center; justify-content: center;
    padding: 20px;
}
.wp-modal-overlay.is-open { display: flex; }
.wp-modal {
    width: 100%; max-width: 380px; max-height: 70vh;
    display: flex; flex-direction: column;
    background: var(--wp-bg1); border: 1px solid var(--wp-border-h);
    box-shadow: var(--shadow-modal, 0 20px 60px rgba(0, 0, 0, .7));
}
.wp-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--wp-border);
    flex-shrink: 0;
}
.wp-modal__title {
    font-family: var(--font-display); font-size: 11px; letter-spacing: .26em;
    color: var(--wp-gold); text-transform: uppercase;
}
.wp-modal__close {
    background: none; border: none; cursor: pointer; padding: 4px; color: var(--wp-t3);
    transition: color var(--wdx-t-base);
}
.wp-modal__close:hover { color: var(--wp-gold); }
.wp-modal__close-ico { width: 12px; height: 12px; transform: rotate(45deg); display: block; }
.wp-modal__body { overflow-y: auto; }
.wp-modal__row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px; border-bottom: 1px solid var(--wp-border);
    text-decoration: none; color: var(--wp-t1);
    transition: background var(--wdx-t-base);
}
.wp-modal__row:hover { background: var(--wp-bg3); }
.wp-modal__row-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: rgba(201, 168, 76, .13); border: 1px solid var(--wp-gold-dim);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 13px; color: var(--wp-gold);
    object-fit: cover;
}
.wp-modal__row-name { font-family: var(--font-display); font-size: 12px; letter-spacing: .06em; }
.wp-modal__empty, .wp-modal__loading {
    padding: 24px 18px; text-align: center; font-style: italic;
    color: var(--wp-t3); font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
/* The profile lives inside the feed column, not on a page of its own, so it
   gets roughly 557px less than the viewport while the shell shows three
   columns. These queries are written against the viewport but tuned to the
   column width that actually results.

   viewport 1280 -> column 720 (two columns fit)
   viewport 1024 -> column 464 (too narrow, stack)
   viewport  768 -> column 745 (shell collapsed, two columns fit again) */
@media (max-width: 1257px) {
    .wp-tree { grid-template-columns: 1fr; gap: 18px; }
    .wp-tree__svg { max-width: 280px; }
}
/* Below 900px the sidebar and right panel are gone and the column is wide
   again, so the tree returns to two columns until the screen itself is small. */
@media (max-width: 900px) and (min-width: 701px) {
    .wp-tree { grid-template-columns: 260px 1fr; gap: 20px; }
}

@media (max-width: 900px) {
    .wp { padding: 4px 0 24px; gap: 14px; }
    .wp-card__inner { padding: 22px 18px; }
    .wp-tree__svg { max-width: 260px; }
    .wp-sys   { grid-template-columns: repeat(2, 1fr); }
    .wp-paths { grid-template-columns: repeat(2, 1fr); }
    .wp-head  { gap: 20px; }
}

@media (max-width: 640px) {
    .wp-card__inner { padding: 20px 14px; }
    .wp-head { flex-direction: column; align-items: center; text-align: center; }
    .wp-identity { min-width: 0; width: 100%; }
    .wp-rank, .wp-meta { justify-content: center; }
    .wp .ph-actions { justify-content: center; }
    .wp-name { font-size: 23px; letter-spacing: .14em; }
    .wp-stats  { grid-template-columns: repeat(2, 1fr); }
    .wp-sys    { grid-template-columns: 1fr; }
    .wp-badges { grid-template-columns: repeat(3, 1fr); }
    .wp-social { gap: 16px; }
    .wp-el { grid-template-columns: 16px 62px 1fr 26px; gap: 6px; }
    .wp-map { height: 180px; }
}

@media (max-width: 420px) {
    .wp-card__inner { padding: 18px 12px; }
    .wp-avatar-wrap, .wp-avatar { width: 92px; height: 92px; }
    .wp-avatar { font-size: 32px; }
    .wp-stats  { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .wp-paths  { grid-template-columns: repeat(2, 1fr); }
    .wp-badges { grid-template-columns: repeat(2, 1fr); }
    .wp-tree__stage-num { font-size: 38px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE B — THE RPG COCKPIT
   ═══════════════════════════════════════════════════════════════════════════
   Everything below composes the lower half of the profile. It is deliberately
   the last block in the file: these rules are the composition layer and must
   win over the single-column card rules above, which stay in place for the
   hero and the posts card.

   The language, taken from profil_new.php:

     · panels, not cards — flat surfaces divided by hairlines, no bevels and
       no bracket ornaments below the hero
     · one shared header on every module
     · gold for structure, one accent colour per system
     · nothing under 10px, which is where this app's type floor sits
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The dashboard grid ──────────────────────────────────────────────────
   The lower profile used to be nine full-width cards stacked vertically —
   roughly 4.1k pixels of scrolling, one module per screen. It is now a grid.

   Gutters are drawn as borders on the modules themselves rather than as a
   coloured grid background showing through `gap`. That technique needs every
   cell filled or it paints solid blocks where a row runs short; borders
   tolerate a ragged last row and still give exactly 1px everywhere. The
   container supplies the top and left edges, each module the right and
   bottom, so no line is ever doubled. */
.wp-dash {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top:  1px solid var(--wp-gutter);
    border-left: 1px solid var(--wp-gutter);
    background: var(--wp-bg1);
}

/* Modules that earn more than one column. The order in show.phtml is chosen
   so every cell fills at three columns:
     energia  | akasza     | aktywność
     drzewo (2)           | aury
     przekazy | statystyki | ekwipunek
     ścieżki (2)          | odznaki
     mapa (3)                            */
.wp-mod--tree  { grid-column: span 2; }
.wp-mod--paths { grid-column: span 2; }
.wp-mod--map   { grid-column: 1 / -1; }

.wp-mod {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px 24px;
    border-right:  1px solid var(--wp-gutter);
    border-bottom: 1px solid var(--wp-gutter);
    background: var(--wp-bg1);
    transition: background var(--wdx-t-base) var(--wdx-ease-out);
}
.wp-mod:hover { background: var(--wp-bg2); }

/* A module whose backing system is not running reads a shade quieter — the
   same treatment the old .wp-card--prepared applied. */
.wp-mod--prepared { opacity: .82; }

/* ── The shared module header ────────────────────────────────────────────
   One implementation, printed by the modHead() helper in show.phtml, so
   every panel carries an identical header rather than eleven that merely
   resemble each other. */
.wp-mod__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--wp-border);
}
.wp-mod__title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .3em;
    color: var(--wp-gold);
    text-transform: uppercase;
    margin: 0;
    flex-shrink: 0;
}
.wp-mod__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--wp-gold-dim), transparent);
}
.wp-mod__tag {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .16em;
    color: var(--wp-t3);
    text-transform: uppercase;
    border: 1px solid var(--wp-border);
    padding: 2px 8px;
    flex-shrink: 0;
}
.wp-mod__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Secondary heading inside a module, above a list. */
.wp-mod__subhead {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: .2em;
    color: var(--wp-t3);
    text-transform: uppercase;
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--wp-border);
}

/* ── KOKPIT ENERGII ──────────────────────────────────────────────────── */
.wp-nrg__balance { display: flex; align-items: center; gap: 14px; }
.wp-nrg__ico {
    width: 42px; height: 42px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(224, 82, 82, .3);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 82, 82, .12), transparent 70%);
}
.wp-nrg__ico-svg { width: 20px; height: 20px; color: #e05252; }
.wp-nrg__val {
    font-family: var(--font-display); font-size: 34px; font-weight: 700;
    color: var(--wp-gold-hi); line-height: 1;
}
.wp-nrg__unit {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .18em;
    color: var(--wp-t3); text-transform: uppercase; margin-top: 4px;
}
.wp-nrg__bar {
    height: 4px; border-radius: 2px; margin-top: 14px;
    background: rgba(255, 255, 255, .06); overflow: hidden;
}
.wp-nrg__bar-fill {
    display: block; height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, var(--wp-gold-lo), var(--wp-gold));
}
.wp-nrg__peak {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .08em;
    color: var(--wp-t3); margin: 6px 0 0;
}
.wp-nrg__peak strong { font-family: var(--font-display); color: var(--wp-t2); font-weight: 400; }

.wp-nrg__flow {
    display: flex; align-items: stretch; margin-top: 16px;
    border: 1px solid var(--wp-border);
}
.wp-nrg__flow-cell {
    flex: 1; min-width: 0; padding: 9px 12px;
    display: flex; flex-direction: column; gap: 3px;
}
.wp-nrg__flow-sep { width: 1px; background: var(--wp-border); flex-shrink: 0; }
.wp-nrg__flow-lbl {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .16em;
    color: var(--wp-t3); text-transform: uppercase;
}
.wp-nrg__flow-val { font-family: var(--font-display); font-size: 17px; line-height: 1; }
.wp-nrg__flow-val.is-plus  { color: #7FD79A; }
.wp-nrg__flow-val.is-minus { color: #E08585; }

.wp-nrg__log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wp-nrg__log-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(201, 168, 76, .07);
}
.wp-nrg__log-row:last-child { border-bottom: none; padding-bottom: 0; }
.wp-nrg__log-amt {
    font-family: var(--font-display); font-size: 14px; line-height: 1.3;
    flex-shrink: 0; min-width: 58px;
}
.wp-nrg__log-amt.is-plus  { color: #7FD79A; }
.wp-nrg__log-amt.is-minus { color: #E08585; }
.wp-nrg__log-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wp-nrg__log-desc {
    font-family: var(--font-body); font-size: 14px; color: var(--wp-t2);
    line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.wp-nrg__log-meta {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .08em;
    color: var(--wp-t3);
}

/* ── ŚLAD AKASZY ─────────────────────────────────────────────────────── */
.wp-akz { align-items: center; text-align: center; }
.wp-akz__orb { width: 116px; height: 116px; margin: 2px 0 14px; flex-shrink: 0; }
.wp-akz__orb-svg { width: 100%; height: 100%; overflow: visible; }
.wp-akz__orb-ring { transform-origin: 60px 60px; animation: wdx-ringRot 30s linear infinite; }

.wp-akz__val {
    font-family: var(--font-display); font-size: 36px; font-weight: 700;
    color: #c9a6f0; line-height: 1; text-shadow: 0 0 22px rgba(155, 111, 204, .35);
}
.wp-akz__unit {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .2em;
    color: var(--wp-t3); text-transform: uppercase; margin-top: 5px;
}
.wp-akz__rank { display: flex; flex-direction: column; gap: 4px; margin: 16px 0 10px; }
.wp-akz__rank-lbl {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .22em;
    color: var(--wp-t3); text-transform: uppercase;
}
.wp-akz__rank-name {
    font-family: var(--font-display); font-size: 18px; letter-spacing: .1em;
    color: var(--wp-gold-hi);
}
.wp-akz__bar {
    width: 100%; height: 5px; border-radius: 3px;
    background: rgba(255, 255, 255, .06); overflow: hidden; margin-bottom: 10px;
}
.wp-akz__bar-fill {
    display: block; height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, #6d4a94, #c9a6f0);
    box-shadow: 0 0 10px rgba(155, 111, 204, .5);
}
.wp-akz__meta {
    width: 100%;
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-family: var(--font-label); font-size: 11px; letter-spacing: .08em;
    color: var(--wp-t3); padding: 3px 0;
}
.wp-akz__meta strong { font-family: var(--font-display); font-weight: 400; color: #c9a6f0; font-size: 14px; }
.wp-akz__meta--dim strong { color: var(--wp-t2); }

.wp-akz__reward {
    width: 100%; margin-top: 16px;
    display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--wp-border);
    background: rgba(255, 255, 255, .015);
}
.wp-akz__reward.is-ready {
    border-color: var(--wp-gold-dim);
    background: rgba(201, 168, 76, .06);
}
.wp-akz__reward--none { opacity: .7; }
.wp-akz__reward-ico {
    width: 30px; height: 30px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--wp-border); border-radius: 50%;
}
.wp-akz__reward-ico-svg { width: 15px; height: 15px; color: var(--wp-gold-dim); }
.wp-akz__reward.is-ready .wp-akz__reward-ico-svg { color: var(--wp-gold); }
.wp-akz__reward-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wp-akz__reward-lbl {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .16em;
    color: var(--wp-t3); text-transform: uppercase;
}
.wp-akz__reward-name {
    font-family: var(--font-display); font-size: 14px; letter-spacing: .04em;
    color: var(--wp-t1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wp-akz__reward.is-ready .wp-akz__reward-name { color: var(--wp-gold-hi); }

.wp-akz__pending {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .22em;
    color: var(--wp-gold); text-transform: uppercase;
    border: 1px dashed var(--wp-gold-dim);
    padding: 6px 10px; margin: 10px 0 0; width: 100%;
}
.wp-akz__pending-note {
    font-family: var(--font-body); font-size: 13px; font-style: italic;
    color: var(--wp-t3); margin: 8px 0 0;
}
.wp-akz__claimed { list-style: none; margin: 12px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 4px; }
.wp-akz__claimed-row {
    display: flex; align-items: center; gap: 8px; text-align: left;
    font-family: var(--font-body); font-size: 13px; color: var(--wp-t3);
    padding: 5px 0; border-top: 1px solid rgba(201, 168, 76, .07);
}
.wp-akz__claimed-ico { width: 13px; height: 13px; color: #7FD79A; flex-shrink: 0; }
.wp-akz__claimed-tag {
    margin-left: auto; flex-shrink: 0;
    font-family: var(--font-label); font-size: 10px; letter-spacing: .14em;
    color: var(--wp-t3); text-transform: uppercase;
}
.wp-akz__last {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .1em;
    color: var(--wp-t3); margin: 12px 0 0;
}

/* ── OSTATNIA ENERGIA PRZEKAZÓW ──────────────────────────────────────── */
.wp-res__head { display: flex; align-items: center; gap: 14px; }
.wp-res__ico {
    width: 42px; height: 42px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--wp-gold-dim); border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 168, 76, .1), transparent 70%);
}
.wp-res__ico-svg { width: 20px; height: 20px; color: var(--wp-gold); }
.wp-res__val {
    font-family: var(--font-display); font-size: 32px; font-weight: 700;
    color: var(--wp-gold-hi); line-height: 1;
}
.wp-res__unit {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .14em;
    color: var(--wp-t3); text-transform: uppercase; margin-top: 4px;
}
.wp-res__best {
    display: flex; align-items: center; gap: 9px;
    margin-top: 14px; padding: 9px 12px;
    border: 1px solid var(--wp-border);
    background: rgba(201, 168, 76, .04);
    text-decoration: none;
    transition: border-color var(--wdx-t-base), background var(--wdx-t-base);
}
.wp-res__best:hover { border-color: var(--wp-gold-dim); background: rgba(201, 168, 76, .08); }
.wp-res__best-ico-svg { width: 14px; height: 14px; color: #ff6b35; }
.wp-res__best-lbl {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .14em;
    color: var(--wp-t2); text-transform: uppercase;
}
.wp-res__best-val {
    margin-left: auto; font-family: var(--font-display); font-size: 17px;
    color: var(--wp-gold-hi);
}

.wp-res__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wp-res__row { border-bottom: 1px solid rgba(201, 168, 76, .07); }
.wp-res__row:last-child { border-bottom: none; }
.wp-res__link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 4px; text-decoration: none;
    transition: background var(--wdx-t-base);
}
.wp-res__link:hover { background: rgba(201, 168, 76, .05); }
.wp-res__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wp-res__row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wp-res__aura {
    font-family: var(--font-display); font-size: 14px; letter-spacing: .06em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wp-res__when {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .08em;
    color: var(--wp-t3);
}
.wp-res__score {
    margin-left: auto; flex-shrink: 0;
    font-family: var(--font-display); font-size: 16px; color: var(--wp-t1);
}

/* ── AKTYWNE AURY ────────────────────────────────────────────────────── */
.wp-aura__count { display: flex; align-items: baseline; gap: 9px; margin-bottom: 14px; }
.wp-aura__count-val {
    font-family: var(--font-display); font-size: 32px; font-weight: 700;
    color: #c08bff; line-height: 1;
}
.wp-aura__count--muted .wp-aura__count-val { color: var(--wp-t3); }
.wp-aura__count-lbl {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .18em;
    color: var(--wp-t3); text-transform: uppercase;
}
.wp-aura__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wp-aura {
    padding: 11px 13px;
    border: 1px solid rgba(192, 139, 255, .2);
    background: rgba(192, 139, 255, .05);
    display: flex; flex-direction: column; gap: 7px;
}
.wp-aura__head { display: flex; align-items: center; gap: 8px; }
.wp-aura__ico-svg { width: 16px; height: 16px; color: #c08bff; flex-shrink: 0; }
.wp-aura__name {
    font-family: var(--font-display); font-size: 15px; letter-spacing: .06em;
    color: #d7b3ff;
}
.wp-aura__effect {
    font-family: var(--font-label); font-size: 11px; letter-spacing: .1em;
    color: rgba(215, 179, 255, .85);
}
.wp-aura__bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.wp-aura__bar-fill {
    display: block; height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, #7d4fb3, #c08bff);
    box-shadow: 0 0 8px rgba(192, 139, 255, .45);
}
.wp-aura__timer {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    font-family: var(--font-label); font-size: 10px; letter-spacing: .14em;
    color: var(--wp-t3); text-transform: uppercase;
}
.wp-aura__timer strong {
    font-family: var(--font-display); font-size: 13px; font-weight: 400;
    color: #d7b3ff; text-transform: none; letter-spacing: .04em;
}

/* ── EKWIPUNEK ───────────────────────────────────────────────────────── */
.wp-inv__count { display: flex; align-items: baseline; gap: 9px; margin-bottom: 14px; }
.wp-inv__count-val {
    font-family: var(--font-display); font-size: 32px; font-weight: 700;
    color: #7ac48f; line-height: 1;
}
.wp-inv__count.is-muted .wp-inv__count-val { color: var(--wp-t3); }
.wp-inv__count-lbl {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .18em;
    color: var(--wp-t3); text-transform: uppercase;
}
.wp-inv__more {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .1em;
    color: var(--wp-t3); margin: 10px 0 0;
}

/* ── Existing modules, refitted to a dashboard column ────────────────────
   These modules kept their mechanism and their markup; only the geometry
   changes, because a column is not a full-width card any more. */

/* Statistics: 3x2 in a full-width card, 2x3 in a column. */
.wp-mod--stats .wp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* Paths: four nodes across two columns of the dashboard. The chosen path
   keeps its emphasis and its tag — the active/inactive hierarchy is the
   point of the module. */
.wp-mod--paths .wp-paths { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

/* Tree: canvas beside the stage/element panel, sized for two columns. */
.wp-mod--tree .wp-tree { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 22px; }
.wp-mod--tree .wp-tree__svg { max-width: 260px; }

/* Activity: the rows are unchanged, the list just breathes less in a column. */
.wp-mod--activity .wp-acts { gap: 0; }

/* Badges: 4x2 locked slots inside one column. */
.wp-mod--badges .wp-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

/* Expedition map: full width, so it keeps its wide atmospheric strip. */
.wp-mod--map .wp-map { height: 210px; }

/* The empty-state line inherits the module rhythm rather than the card one. */
.wp-mod .wp-empty { margin-top: 4px; }

/* The claim button sits inside a module now, not a card. */
.wp-mod .wp-btn-claim { width: 100%; margin-top: 10px; }

/* ── Quick-stats strip ───────────────────────────────────────────────────
   Judged successful in the audit and kept as it was. The only change is
   that it now spans the full cockpit width, so the items get more room —
   no redesign, just the new canvas. */
.wp-strip { border-radius: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE B — RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════
   Desktop is the fidelity target. Tablet and mobile collapse deliberately
   rather than by accident, and nothing is allowed to overflow horizontally.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Narrow desktop / large tablet: three hero columns stop fitting ────── */
@media (max-width: 1200px) {
    .wp-hero__inner { grid-template-columns: 270px minmax(0, 1fr); min-height: 0; }
    .wp-hero { min-height: 0; }
    /* The cockpit moves under the identity column and lays its gauges out
       in a row, so it stays a panel rather than becoming a long list. */
    .wp-hero__cards-col {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid var(--wp-border);
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        align-items: start;
    }
    .wp-cockpit__title { grid-column: 1 / -1; }

    /* Two dashboard columns. Only the map spans now — every other module is
       a single column, which keeps every cell filled and the hairlines
       continuous. */
    .wp-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wp-mod--tree,
    .wp-mod--paths { grid-column: auto; }
    .wp-mod--map   { grid-column: 1 / -1; }

    .wp-mod--tree .wp-tree { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .wp-mod--tree .wp-tree__svg { max-width: 240px; }
    .wp-mod--paths .wp-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Tablet ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .wp-mod { padding: 20px 20px; }
    .wp-hero__col { padding: 22px 22px; }
    .wp-hero__cards-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Small tablet: the orbit column stops earning its keep beside text ── */
@media (max-width: 900px) {
    .wp-hero__inner { grid-template-columns: minmax(0, 1fr); }
    .wp-hero__orbit-col {
        border-right: none;
        border-bottom: 1px solid var(--wp-border);
    }
    .wp-hero__identity-col { text-align: center; align-items: center; }
    .wp-hero__identity-col .wp-rank,
    .wp-hero__identity-col .wp-meta,
    .wp-hero__identity-col .wp-social,
    .wp-hero__identity-col .ph-actions { justify-content: center; }
    .wp-hero__identity-col .wp-xp,
    .wp-hero__identity-col .wp-motto,
    .wp-hero__identity-col .wp-bio { width: 100%; }
    .wp-hero__cards-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .wp { gap: 12px; }
    .wp-dash { grid-template-columns: minmax(0, 1fr); }
    .wp-mod--map { grid-column: auto; }
    .wp-mod { padding: 18px 16px; }
    .wp-hero__col { padding: 20px 16px; }
    .wp-hero__cards-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* The orbit is the one thing that cannot simply shrink — the nodes carry
       a value and a name. Scaled as a whole so the type inside keeps its
       real size relative to the ring instead of collapsing into microtext. */
    .wp-orbit { transform: translateY(var(--wp-orbit-lift)) scale(.86); }

    .wp-mod--stats .wp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wp-mod--paths .wp-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wp-mod--badges .wp-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .wp-mod--map .wp-map { height: 170px; }
}

@media (max-width: 480px) {
    .wp-hero__cards-col { grid-template-columns: minmax(0, 1fr); }
    .wp-mod--badges .wp-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wp-nrg__log-amt { min-width: 48px; }
    /* Scaling leaves whitespace where the orbit used to be; pull it back. */
    .wp-orbit { margin-bottom: -22px; }
}

@media (prefers-reduced-motion: reduce) {
    .wp-akz__orb-ring,
    .wp-orbit__ring-outer,
    .wp-orbit__ring-inner,
    .wp-orbit__mote { animation: none; }
}

/* ── Toasts (Phase B) ────────────────────────────────────────────────────
   Replaces alert() in profile.js. A failed claim used to open a browser
   dialog that blocked the page and looked like a crash; this says the same
   thing in the app's own voice and lets the user carry on.

   Global rather than .wp-scoped: profile.js loads everywhere, and any other
   script that wants a non-blocking message should use the same furniture
   rather than inventing a second one. */
.wdx-toasts {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}
.wdx-toast {
    pointer-events: auto;
    max-width: min(360px, calc(100vw - 36px));
    padding: 11px 15px;
    background: #12150B;
    border: 1px solid rgba(201, 168, 76, .3);
    border-left: 3px solid var(--wp-gold, #C9A84C);
    color: rgba(232, 224, 206, .94);
    font-family: var(--font-body, serif);
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .6);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .24s ease, transform .24s ease;
}
.wdx-toast.is-in { opacity: 1; transform: translateY(0); }
.wdx-toast--error { border-left-color: #E08585; }
.wdx-toast--ok    { border-left-color: #7FD79A; }

@media (prefers-reduced-motion: reduce) {
    .wdx-toast { transition: none; transform: none; }
}

/* Phones: full-width strip above the bottom navigation, not a floating card
   in the corner where the nav would cover it. */
@media (max-width: 700px) {
    .wdx-toasts {
        left: 12px; right: 12px; bottom: 74px;
        align-items: stretch;
    }
    .wdx-toast { max-width: none; }
}

/* ── Follow modal: "load more" (Phase B) ─────────────────────────────────
   The list endpoint has always accepted ?offset and returned 40 rows; the
   modal simply never asked for the second page, so an account with more
   than 40 followers silently showed only the first 40. */
.wp-modal__more {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(201, 168, 76, .07);
    border: 1px solid var(--wp-border, rgba(201, 168, 76, .12));
    color: var(--wp-gold, #C9A84C);
    font-family: var(--font-label, monospace);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.wp-modal__more:hover:not(:disabled) {
    background: rgba(201, 168, 76, .14);
    border-color: rgba(201, 168, 76, .32);
}
.wp-modal__more:disabled { opacity: .6; cursor: default; }