/* =========================================================================
   UARO WoE — Player profile family (player.php, guild.php)

   CRITICAL: the existing /woe/ codebase renders the player sprite as an
   <img class="woe-player-hero__sprite" src="<base64 data uri>"> inside the
   portrait frame. Do NOT add `background-image: url("player-sprite.gif")`
   to .player-portrait or .woe-player-hero__portrait — let the existing
   <img> element render. The kit's CSS uses background-image because the
   kit demo pages have a placeholder GIF; production has a real
   per-character data URI from prerender.php / sprite_render.php.
   ========================================================================= */

/* ---------- Player hero ---------- */
.woe-player-hero {
    position: relative;
    margin-bottom: 2.5rem;
    padding: 1.6rem 1.6rem 1.4rem;
    border: 1px solid var(--woe-border);
    border-radius: 4px;
    background:
        radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--df-blood-deep) 14%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--df-gold) 9%, transparent) 0%, transparent 55%),
        var(--woe-surface);
    overflow: hidden;
}

/* Gold corner brackets via 8 background-images */
.woe-player-hero {
    background-image:
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--df-blood-deep) 14%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--df-gold) 9%, transparent) 0%, transparent 55%);
    background-size:
        16px 1.5px, 1.5px 16px,
        16px 1.5px, 1.5px 16px,
        16px 1.5px, 1.5px 16px,
        16px 1.5px, 1.5px 16px,
        100% 100%, 100% 100%;
    background-position:
        6px 6px, 6px 6px,
        calc(100% - 6px) 6px, calc(100% - 6px) 6px,
        6px calc(100% - 6px), 6px calc(100% - 6px),
        calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
        0 0, 0 0;
    background-repeat: no-repeat;
}

.woe-player-hero::after {
    /* Blood-drip ornament along the bottom edge */
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%) rotate(180deg);
    width: 240px;
    height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'><path d='M0 0 Q40 12 80 0 T160 0 T240 0' fill='%236B0F0F'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.55;
    pointer-events: none;
}

/* Portrait frame — DO NOT set background-image for sprite; the <img> renders.
   6rem (96 px) gives the static head avatar room to read clearly while
   keeping the frame proportional to the name typography beside it. */
.woe-player-hero__portrait {
    position: relative;
    width: 6rem;
    height: 6rem;
    border: 1px solid color-mix(in srgb, var(--df-gold) 35%, var(--woe-border));
    border-radius: 4px;
    background:
        radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--df-blood-deep) 22%, transparent) 0%, transparent 65%),
        var(--woe-surface-base);
    overflow: hidden;
    isolation: isolate;
}

@media (max-width: 599px) {
    .woe-player-hero__portrait {
        width: 5rem;
        height: 5rem;
    }
}

/* Faint inner gold rim */
.woe-player-hero__portrait::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid color-mix(in srgb, var(--df-gold) 22%, transparent);
    border-radius: 3px;
    pointer-events: none;
    z-index: 1;
}

.woe-player-hero__sprite {
    /* Full-body animated avatar — 5-frame READYFIGHT GIF rendered from
       chargen's CharacterRender into a 100×110 canvas. Sprite fills the
       frame and `object-fit: contain` preserves aspect (body is taller
       than it is wide, so it fits height-bound with horizontal padding).
       Parent (.woe-player-hero__portrait) is flex-centered in custom.css,
       so no extra positioning needed here. */
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    /* Keep the existing soft drop-shadow so the head reads against the
       portrait's blood-glow gradient. */
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
}

.woe-player-hero__glyph {
    color: color-mix(in srgb, var(--df-gold) 30%, var(--woe-text-muted));
    text-shadow: 0 0 18px color-mix(in srgb, var(--df-gold) 25%, transparent);
}

.woe-player-hero__glyph--watermark {
    opacity: 0.18;
}

/* Inline emblem next to the guild name (replaces the legacy custom.css rule
   that absolute-positioned this element in the bottom-right of the portrait).
   Sits inside the guild link, which is `inline-flex; gap` — no margin needed. */
.woe-player-hero__topline .woe-player-hero__emblem {
    position: static;
    inset: auto;
    width: 1.6rem;
    height: 1.6rem;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--df-gold) 50%, var(--woe-border));
    border-radius: 3px;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--df-gold) 25%, transparent);
}

/* Topline — Cinzel uppercase name with gold gradient */
.woe-player-hero__name {
    font-family: var(--woe-font-display);
    font-weight: 700;
    font-size: var(--woe-text-display);
    line-height: var(--woe-leading-display);
    letter-spacing: var(--woe-track-display-mega);
    text-transform: uppercase;
    margin: 0;
    background: linear-gradient(180deg, var(--df-bone) 0%, var(--df-gold) 65%, var(--df-blood-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 24px color-mix(in srgb, var(--df-blood-deep) 32%, transparent);
}

[data-bs-theme="light"] .woe-player-hero__name {
    background: linear-gradient(180deg, var(--df-blood-deep) 0%, #4a2a18 60%, var(--df-rune) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.woe-player-hero__topline-sep {
    color: color-mix(in srgb, var(--df-gold) 50%, transparent);
    margin-inline: 0.6rem;
    font-family: var(--woe-font-display);
    font-weight: 400;
}

.woe-player-hero__guild {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--woe-font-display);
    color: var(--woe-text-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--woe-track-display);
    font-size: var(--woe-text-display-sm);
    transition: color var(--woe-duration-fast) var(--woe-ease-out);
}
.woe-player-hero__guild:hover {
    color: var(--df-bone);
}
/* Guild link color flips automatically via --woe-text-accent. */
[data-bs-theme="light"] .woe-player-hero__guild:hover {
    /* Bone is invisible on cream — keep readable on hover. */
    color: var(--df-blood);
}

.woe-player-hero__subline {
    margin-top: 0.4rem;
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-meta);
    letter-spacing: var(--woe-track-eyebrow);
    text-transform: uppercase;
    color: var(--woe-text-secondary);
}

.woe-player-hero__job {
    color: var(--df-bone);
}
[data-bs-theme="light"] .woe-player-hero__job {
    color: var(--df-rune);
}

.woe-player-hero__level-num {
    color: var(--woe-text-accent);
    margin-left: 0.4rem;
}
/* Level-num color flips automatically via --woe-text-accent. */

.woe-player-hero__back {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-pill);
    letter-spacing: var(--woe-track-eyebrow);
    text-transform: uppercase;
    border-color: var(--woe-border);
    color: var(--woe-text-secondary);
}
.woe-player-hero__back:hover {
    color: var(--woe-text-accent);
    border-color: color-mix(in srgb, var(--df-gold) 50%, var(--woe-border));
    background: color-mix(in srgb, var(--df-gold) 8%, transparent);
}


/* ---------- Profile section heads ---------- */
.woe-profile-section__head {
    border-bottom: 1px solid var(--woe-border);
    padding-bottom: 0.6rem;
    position: relative;
    margin-bottom: 1.2rem;
}

.woe-profile-section__head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, var(--df-gold), transparent);
}

.woe-profile-section__eyebrow {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-eyebrow);
    letter-spacing: var(--woe-track-eyebrow);
    text-transform: uppercase;
    color: var(--woe-text-accent);
    opacity: 0.9;
}
/* Profile eyebrow color flips automatically via --woe-text-accent. */

.woe-profile-section__title {
    font-family: var(--woe-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--woe-track-display);
    line-height: var(--woe-leading-title);
    margin-top: 0.3rem;
    color: var(--woe-text-primary);
}

.woe-profile-section__title a {
    color: inherit;
    text-decoration: none;
}
.woe-profile-section__title a:hover {
    color: var(--woe-text-accent);
}

.woe-profile-section__sub {
    font-family: var(--woe-font-body);
    font-style: italic;
    font-size: var(--woe-text-prose-sub);
    letter-spacing: var(--woe-track-prose);
    color: var(--woe-text-secondary) !important;
}

.woe-profile-section__sub .woe-id {
    color: var(--woe-text-accent);
    font-style: normal;
}
/* Profile-sub .woe-id color flips automatically via --woe-text-accent. */

.woe-profile-section__sub .badge {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-pill);
    letter-spacing: var(--woe-track-pill);
    text-transform: uppercase;
    border: 1px solid var(--woe-border);
    background: transparent !important;
    color: var(--woe-text-secondary);
    padding: 3px 8px;
}

.woe-profile-section__subhead {
    border-bottom: 1px solid var(--woe-border);
    padding-bottom: 0.4rem;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.woe-section-title {
    font-family: var(--woe-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--woe-track-display);
    line-height: var(--woe-leading-title);
    color: var(--woe-text-primary);
}


/* ---------- Scope toggle (Last WoE / Total) ---------- */
.woe-scope-toggle {
    border: 1px solid var(--woe-border);
    border-radius: 4px;
    padding: 3px;
    background: var(--woe-surface-base);
}

.woe-scope-toggle .btn {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-pill);
    letter-spacing: var(--woe-track-pill);
    text-transform: uppercase;
    color: var(--woe-text-secondary);
    border-color: transparent;
    background: transparent;
    border-radius: 3px;
}

.woe-scope-toggle .btn:hover {
    color: var(--woe-text-primary);
    background: var(--woe-row-hover);
}

.woe-scope-toggle .btn.active {
    color: var(--woe-text-accent);
    background: color-mix(in srgb, var(--df-gold) 12%, var(--woe-surface));
    border-color: color-mix(in srgb, var(--df-gold) 38%, var(--woe-border));
    box-shadow: inset 0 -1px 0 var(--df-gold);
}

[data-bs-theme="light"] .woe-scope-toggle .btn.active {
    /* Color flips via --woe-text-accent. Override frame to blood-deep tint. */
    background: color-mix(in srgb, var(--df-blood-deep) 8%, var(--woe-surface));
    border-color: color-mix(in srgb, var(--df-blood-deep) 38%, var(--woe-border));
}


/* ---------- Stat group square (career strip) ---------- */
.woe-stat-group--square {
    border: 1px solid var(--woe-border);
    border-radius: 4px;
    padding: 0.8rem;
    background: var(--woe-surface);
    /* Re-use the gold corner brackets from the hero */
    background-image:
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold));
    background-size:
        12px 1.5px, 1.5px 12px,
        12px 1.5px, 1.5px 12px,
        12px 1.5px, 1.5px 12px,
        12px 1.5px, 1.5px 12px;
    background-position:
        4px 4px, 4px 4px,
        calc(100% - 4px) 4px, calc(100% - 4px) 4px,
        4px calc(100% - 4px), 4px calc(100% - 4px),
        calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px);
    background-repeat: no-repeat;
}


/* Tables on player/guild pages inherit chrome from base.css's .woe-table
   block — no page-specific overrides required. */


/* ---------- Mobile player hero ---------- */
@media (max-width: 599px) {
    .woe-player-hero {
        padding: 1.2rem 1rem;
    }
    .woe-player-hero::after {
        width: 180px;
    }
}


/* =========================================================================
   GUILD HERO — guild.php (mirrors player hero ornament with emblem in
   place of sprite portrait)
   ========================================================================= */

.woe-guild-hero {
    position: relative;
    margin-bottom: 2.5rem;
    padding: 1.4rem 1.6rem 1.2rem;
    border: 1px solid var(--woe-border);
    border-radius: 4px;
    background:
        radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--df-gold) 10%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--df-blood-deep) 10%, transparent) 0%, transparent 55%),
        var(--woe-surface);
    overflow: hidden;
}

/* Reuse the gold corner brackets via background-image collage */
.woe-guild-hero {
    background-image:
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        linear-gradient(var(--df-gold), var(--df-gold)),
        radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--df-gold) 10%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--df-blood-deep) 10%, transparent) 0%, transparent 55%);
    background-size:
        16px 1.5px, 1.5px 16px,
        16px 1.5px, 1.5px 16px,
        16px 1.5px, 1.5px 16px,
        16px 1.5px, 1.5px 16px,
        100% 100%, 100% 100%;
    background-position:
        6px 6px, 6px 6px,
        calc(100% - 6px) 6px, calc(100% - 6px) 6px,
        6px calc(100% - 6px), 6px calc(100% - 6px),
        calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
        0 0, 0 0;
    background-repeat: no-repeat;
}

.woe-guild-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%) rotate(180deg);
    width: 220px;
    height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12' preserveAspectRatio='none'><path d='M0 0 Q40 12 80 0 T160 0 T220 0' fill='%236B0F0F'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.5;
    pointer-events: none;
}

.woe-guild-detail__emblem {
    border: 1px solid color-mix(in srgb, var(--df-gold) 50%, var(--woe-border));
    border-radius: 4px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--df-gold) 30%, transparent);
}

.woe-guild-hero__name {
    font-family: var(--woe-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--woe-track-display-mega);
    line-height: var(--woe-leading-display);
    background: linear-gradient(180deg, var(--df-bone) 0%, var(--df-gold) 65%, var(--df-blood-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 24px color-mix(in srgb, var(--df-blood-deep) 32%, transparent);
}

[data-bs-theme="light"] .woe-guild-hero__name {
    background: linear-gradient(180deg, var(--df-blood-deep) 0%, #4a2a18 60%, var(--df-rune) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}