/* Player Stats - Solo Leveling-inspired player system
   Black-purple "System" aesthetic from Solo Leveling.
   Uses theme.css variables + local overrides for purple glow. */

/* ============================================
   SOLO LEVELING PALETTE - Black & Purple
   ============================================ */
:root {
    /* System accent - deep violet / shadow purple */
    --sl-purple: var(--accent);
    --sl-purple-hover: var(--accent-strong);
    --sl-purple-light: var(--accent-light);
    --sl-purple-glow: var(--accent-glow);
    --sl-purple-deep: var(--accent-hover);

    /* Stat accent colors */
    --stat-str: var(--danger);
    --stat-end: var(--success);
    --stat-agi: var(--accent-2);
    --stat-con: var(--chart-primary);
    --stat-rec: var(--rank-b);
    --stat-bld: var(--rank-a);

    --stat-str-glow: color-mix(in srgb, var(--stat-str) 25%, transparent);
    --stat-end-glow: color-mix(in srgb, var(--stat-end) 25%, transparent);
    --stat-agi-glow: color-mix(in srgb, var(--stat-agi) 25%, transparent);
    --stat-con-glow: color-mix(in srgb, var(--stat-con) 25%, transparent);
    --stat-rec-glow: color-mix(in srgb, var(--stat-rec) 25%, transparent);
    --stat-bld-glow: color-mix(in srgb, var(--stat-bld) 25%, transparent);

    --stat-str-light: color-mix(in srgb, var(--stat-str) 12%, transparent);
    --stat-end-light: color-mix(in srgb, var(--stat-end) 12%, transparent);
    --stat-agi-light: color-mix(in srgb, var(--stat-agi) 12%, transparent);
    --stat-con-light: color-mix(in srgb, var(--stat-con) 12%, transparent);
    --stat-rec-light: color-mix(in srgb, var(--stat-rec) 12%, transparent);
    --stat-bld-light: color-mix(in srgb, var(--stat-bld) 12%, transparent);
}

/* ============================================
   1. STAT WINDOW CARD (Dashboard Partial)
   ============================================ */
.stat-window {
    display: block;
    position: relative;
    /* v4.3 flat: panel-system-* tokens collapse to ink-iron in dark/default;
       rely on token value instead of a gradient that renders as 3 identical stops. */
    background: var(--panel-system-mid);
    border: 1px solid var(--panel-system-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    cursor: pointer;
    overflow: hidden;
    transition:
        border-color var(--dur-normal) var(--ease-out),
        box-shadow var(--dur-normal) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
    box-shadow: var(--shadow-md);
}

.stat-window:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-accent);
    transform: translateY(-2px);
}

/* Override theme scan-line to purple tint */
.stat-window.system-scan::after {
    background: linear-gradient(transparent 50%, var(--scanline-glow) 50%);
    background-size: 100% 4px;
}

/* Top row: hunter identity */
.stat-window-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    position: relative;
    z-index: 2;
}

.stat-window-identity {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.stat-window-name,
.hunter-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sl-purple-hover);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-window-identity .rank-badge {
    font-size: 0.85rem;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--space-2);
    flex-shrink: 0;
}

.stat-window-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.stat-window-level {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 0.28rem;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    flex-shrink: 0;
    line-height: 1;
}

.stat-window-level .level-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.stat-window-level .level-value {
    color: var(--sl-purple-hover);
    font-size: 1.1rem;
}

/* Radar chart container */
.stat-window-chart {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 240px;
    margin: 0 auto var(--space-4);
    aspect-ratio: 1;
}

/* Bottom: XP summary */
.stat-window-footer {
    position: relative;
    z-index: 2;
}

.stat-window-xp-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.stat-window-xp-text .xp-amount {
    color: var(--sl-purple-hover);
    font-weight: 600;
}

.stat-window-recent-xp {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--space-2);
}

/* XP section within stat window (template uses .stat-window-xp) */
.stat-window-xp {
    position: relative;
    z-index: 2;
    margin-top: var(--space-3);
}

.xp-bar-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.xp-bar-labels .xp-current {
    color: var(--sl-purple-hover);
    font-weight: 600;
}

.xp-bar-labels .xp-next {
    color: var(--text-secondary);
    font-weight: 600;
}

.player-progression-brief {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.player-progression-brief span {
    min-width: 0;
    display: grid;
    gap: 0.25rem;
    padding: var(--space-3);
    border: 1px solid var(--edge-hairline, var(--border));
    border-radius: var(--radius-md);
    background: var(--ink-void, var(--bg-elevated));
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.35;
}

.player-progression-brief strong {
    color: var(--text-primary);
    font-size: var(--text-2xs);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.stat-window-recent-xp .xp-gain {
    color: var(--success);
    font-weight: 600;
}

/* ============================================
   2. PLAYER PAGE LAYOUT
   ============================================ */
.player-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-5);
}

.player-content {
    display: grid;
    grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
    gap: var(--space-5);
    align-items: stretch;
}

.player-radar-section {
    display: flex;
    min-height: 100%;
}

.player-radar-section .card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--panel-system-border);
    background:
        radial-gradient(
            520px 200px at 0% -15%,
            color-mix(in srgb, var(--accent) 18%, transparent) 0%,
            transparent 62%
        ),
        linear-gradient(
            165deg,
            var(--panel-system-start) 0%,
            var(--panel-system-mid) 56%,
            var(--panel-system-alt-end) 100%
        );
    box-shadow: var(--shadow-md);
}

.player-radar-section .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    height: 100%;
}

#stat-radar-full {
    width: min(100%, 280px);
    height: auto;
    margin: 0 auto;
    display: block;
}

/* --- Player Header --- */
.player-header {
    text-align: center;
    margin-bottom: var(--space-7);
    padding: var(--space-7) var(--space-5);
    position: relative;
}

.player-header-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    /* Stamped sigil shape - no pulse loop, no glow ring. */
    clip-path: polygon(
        12% 0,
        88% 0,
        100% 12%,
        100% 88%,
        88% 100%,
        12% 100%,
        0 88%,
        0 12%
    );
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 1.5rem;
    letter-spacing: 0;
    margin-bottom: var(--space-3);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    font-variant-numeric: tabular-nums;
}

.player-header-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: var(--weight-display);
    color: var(--text-quench);
    letter-spacing: -0.01em;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-2);
}

.player-header-subtitle {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.player-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--space-4);
    background: linear-gradient(
        160deg,
        var(--panel-system-start) 0%,
        var(--panel-system-mid) 55%,
        var(--panel-system-end) 100%
    );
    border: 1px solid var(--panel-system-border);
    border-radius: var(--radius-lg);
    box-shadow:
        var(--shadow-md),
        0 0 0 1px var(--panel-system-border);
}

.player-rank-display,
.player-level-display {
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-identity {
    min-width: 0;
}

.hunter-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.rank-title {
    display: inline-block;
    margin-top: var(--space-1);
}

.player-identity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: var(--space-3);
}

.player-identity-meta-item {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
}

.player-identity-meta-item strong {
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1;
    color: var(--text-primary);
}

.player-identity-meta-item span {
    margin-top: 0.28rem;
    color: var(--text-ash);
    font-size: var(--text-2xs);
    letter-spacing: 0.02em;
}

/* Rank badge trigger - flat ink panel, sigil-mana edge on hover.
   No gradient fill, no ::before radial glow, no translateY lift, no drop-glow. */
.rank-badge-trigger {
    position: relative;
    border: 1px solid var(--edge-hairline);
    background: var(--ink-iron);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 180px;
    color: var(--text-quench);
    overflow: hidden;
    cursor: pointer;
    transition:
        border-color var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out);
}

.rank-trigger-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.rank-trigger-title {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
    color: var(--text-quench);
    line-height: 1;
}

.rank-trigger-chevron {
    width: 14px;
    height: 14px;
    margin-left: auto;
    color: var(--text-ash);
    transition:
        transform var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}

.rank-badge-trigger:hover {
    border-color: var(--edge-strong);
    background: var(--ink-steel);
}

.rank-badge-trigger:hover .rank-trigger-chevron {
    transform: translateX(2px);
    color: var(--sigil-mana);
}

.rank-badge-trigger:focus-visible {
    outline: 2px solid var(--sigil-mana);
    outline-offset: 2px;
    border-color: var(--sigil-mana);
}

.rank-badge-trigger:active {
    transform: scale(0.98);
}

.rank-badge-trigger .rank-badge {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    font-size: var(--text-sm);
    /* No drop-glow - the color of the rank fill is the signal. */
    box-shadow: none;
}

.rank-badge-trigger-text {
    display: block;
    position: relative;
    z-index: 1;
    font-size: 0.62rem;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 700;
    color: var(--text-secondary);
}

.player-level-display {
    text-align: right;
}

.level-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}

.level-number {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
}

.rank-score-display {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.9rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

.rank-score-display .text-muted {
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rank-score-value {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1;
    color: var(--accent-stronger);
}

.player-radar-note {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
    text-align: center;
    max-width: 22rem;
}

/* --- Stats Grid --- */
.player-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    gap: var(--space-4);
    margin-bottom: 0;
    align-content: stretch;
    height: 100%;
}

/* --- Stat Card Icon --- */
.stat-card-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-3);
}

.stat-card-icon svg {
    width: 100%;
    height: 100%;
}

/* --- Stat Card Detail --- */
.stat-card-detail {
    background: linear-gradient(
        170deg,
        var(--panel-system-start) 0%,
        var(--panel-system-soft-end) 100%
    );
    border: 1px solid var(--panel-system-border);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-4);
    text-align: center;
    transition:
        border-color var(--dur-normal) var(--ease-out),
        box-shadow var(--dur-normal) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.stat-card-detail:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Per-stat border glow on hover */
.stat-card-detail[data-stat="str"]:hover {
    border-color: var(--stat-str);
    box-shadow:
        var(--shadow-lg),
        0 0 20px var(--stat-str-glow);
}
.stat-card-detail[data-stat="end"]:hover {
    border-color: var(--stat-end);
    box-shadow:
        var(--shadow-lg),
        0 0 20px var(--stat-end-glow);
}
.stat-card-detail[data-stat="agi"]:hover {
    border-color: var(--stat-agi);
    box-shadow:
        var(--shadow-lg),
        0 0 20px var(--stat-agi-glow);
}
.stat-card-detail[data-stat="con"]:hover {
    border-color: var(--stat-con);
    box-shadow:
        var(--shadow-lg),
        0 0 20px var(--stat-con-glow);
}
.stat-card-detail[data-stat="rec"]:hover {
    border-color: var(--stat-rec);
    box-shadow:
        var(--shadow-lg),
        0 0 20px var(--stat-rec-glow);
}
.stat-card-detail[data-stat="bld"]:hover {
    border-color: var(--stat-bld);
    box-shadow:
        var(--shadow-lg),
        0 0 20px var(--stat-bld-glow);
}

.stat-card-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-3);
    color: var(--text-secondary);
}

/* Stat name color per stat */
.stat-card-detail[data-stat="str"] .stat-card-name {
    color: var(--stat-str);
}
.stat-card-detail[data-stat="end"] .stat-card-name {
    color: var(--stat-end);
}
.stat-card-detail[data-stat="agi"] .stat-card-name {
    color: var(--stat-agi);
}
.stat-card-detail[data-stat="con"] .stat-card-name {
    color: var(--stat-con);
}
.stat-card-detail[data-stat="rec"] .stat-card-name {
    color: var(--stat-rec);
}
.stat-card-detail[data-stat="bld"] .stat-card-name {
    color: var(--stat-bld);
}

.stat-card-label {
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.stat-card-value {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.2vw, 2.9rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: var(--space-3);
}

.stat-locked-value {
    color: var(--text-muted);
}

.stat-progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    margin-top: auto;
}

.stat-progress-fill {
    height: 100%;
    border-radius: inherit;
    box-shadow: 0 0 18px color-mix(in srgb, var(--stat-color, var(--accent)) 38%, transparent);
}

.stat-card-hint {
    margin-top: auto;
    font-size: var(--text-xs);
    line-height: 1.5;
}

.stat-card-score {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}

/* Score color per stat - flat per v4.3, awakening ceremony keeps its glow. */
.stat-card-detail[data-stat="str"] .stat-card-score { color: var(--stat-str); }
.stat-card-detail[data-stat="end"] .stat-card-score { color: var(--stat-end); }
.stat-card-detail[data-stat="agi"] .stat-card-score { color: var(--stat-agi); }
.stat-card-detail[data-stat="con"] .stat-card-score { color: var(--stat-con); }
.stat-card-detail[data-stat="rec"] .stat-card-score { color: var(--stat-rec); }
.stat-card-detail[data-stat="bld"] .stat-card-score { color: var(--stat-bld); }

/* Progress bar within stat card */
.stat-card-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-primary);
    border-radius: 3px;
    overflow: hidden;
}

.stat-card-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width var(--dur-slow) var(--ease-out);
}

.stat-card-detail[data-stat="str"] .stat-card-bar-fill {
    background: var(--stat-str);
}
.stat-card-detail[data-stat="end"] .stat-card-bar-fill {
    background: var(--stat-end);
}
.stat-card-detail[data-stat="agi"] .stat-card-bar-fill {
    background: var(--stat-agi);
}
.stat-card-detail[data-stat="con"] .stat-card-bar-fill {
    background: var(--stat-con);
}
.stat-card-detail[data-stat="rec"] .stat-card-bar-fill {
    background: var(--stat-rec);
}
.stat-card-detail[data-stat="bld"] .stat-card-bar-fill {
    background: var(--stat-bld);
}

/* Clickable cursor for stat cards */
.stat-card-detail {
    cursor: pointer;
}

/* Locked state */
.stat-card-detail.stat-locked {
    opacity: 0.5;
    cursor: pointer;
}

.stat-card-detail.stat-locked:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
}

.stat-card-detail.stat-locked .stat-card-score {
    font-size: 2rem;
    color: var(--text-muted);
    text-shadow: none;
}

.stat-card-detail.stat-locked .stat-card-bar-fill {
    width: 0 !important;
    background: var(--text-muted);
}

.stat-locked-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: var(--space-2);
}

/* ============================================
   3. XP BAR
   ============================================ */
.xp-section {
    margin-bottom: var(--space-6);
}

.xp-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-3);
}

.xp-section-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.xp-section-level {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sl-purple);
    letter-spacing: 0.04em;
}

.xp-bar {
    position: relative;
    width: 100%;
    height: 24px;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    overflow: hidden;
}

.xp-bar-fill {
    height: 100%;
    border-radius: calc(var(--radius-sm) - 1px);
    background: linear-gradient(
        90deg,
        var(--sl-purple-deep),
        var(--sl-purple),
        var(--sl-purple-hover)
    );
    transition: width 0.8s var(--ease-out);
    position: relative;
}

/* Shimmer effect on XP fill */
.xp-bar-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--ui-highlight-10) 50%,
        transparent 100%
    );
    animation: shimmer 2s ease-in-out infinite;
}

.xp-bar-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    text-shadow: 0 1px 3px var(--text-shadow-strong);
    z-index: 1;
    pointer-events: none;
}

/* ============================================
   4. RANK PROGRESSION
   ============================================ */
.rank-progression {
    background: linear-gradient(
        170deg,
        var(--panel-system-start) 0%,
        var(--panel-system-mid) 100%
    );
    border: 1px solid var(--panel-system-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.rank-progression-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-5);
}

.rank-ladder {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-2);
}

.rank-ladder-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-width: 48px;
    flex-shrink: 0;
}

.rank-ladder-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: white;
    opacity: 0.35;
    transition:
        opacity var(--dur-normal) var(--ease-out),
        transform var(--dur-normal) var(--ease-out),
        box-shadow var(--dur-normal) var(--ease-out);
}

.rank-ladder-step.rank-achieved .rank-ladder-badge {
    opacity: 1;
}

/* Current rank marker - scale up slightly + inset ring, no infinite pulse.
   The static scale is enough signal; a looping pulse reads as "notification" not "state". */
.rank-ladder-step.rank-current .rank-ladder-badge {
    opacity: 1;
    transform: scale(1.15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.rank-ladder-label {
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    color: var(--text-ash);
    letter-spacing: 0.02em;
}

.rank-ladder-step.rank-current .rank-ladder-label {
    color: var(--sl-purple-hover);
    font-weight: 600;
}

/* Connector line between steps */
.rank-ladder-connector {
    flex: 0 0 24px;
    height: 2px;
    background: var(--border);
    border-radius: 1px;
}

.rank-ladder-connector.rank-achieved {
    background: var(--sl-purple);
}

/* Focus cards (skills + collapsibles) */
.player-focus-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--panel-system-border);
    background:
        radial-gradient(
            620px 180px at 0% -18%,
            color-mix(in srgb, var(--accent) 16%, transparent) 0%,
            transparent 60%
        ),
        linear-gradient(
            165deg,
            var(--panel-system-start) 0%,
            var(--panel-system-mid) 56%,
            var(--panel-system-alt-end) 100%
        );
    box-shadow:
        var(--shadow-md),
        0 0 18px var(--accent-glow);
}

.player-focus-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--accent) 55%, transparent) 50%,
        transparent 100%
    );
    pointer-events: none;
}

.player-focus-card .card-header {
    background: color-mix(in srgb, var(--bg-secondary) 76%, transparent);
    border-bottom: 1px solid var(--panel-system-border);
}

.player-focus-card .card-body {
    position: relative;
    z-index: 1;
}

/* Collapsible utility cards */
.player-collapsible {
    overflow: hidden;
}

.player-collapsible > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    transition:
        background var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}

.player-collapsible > summary:hover {
    background: color-mix(in srgb, var(--accent-light) 26%, transparent);
}

.player-collapsible > summary::-webkit-details-marker {
    display: none;
}

.player-collapsible > summary::after {
    content: "v";
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform var(--dur-fast) var(--ease-out);
}

.player-collapsible[open] > summary::after {
    transform: rotate(180deg);
}

.player-collapsible[open] > summary {
    background: color-mix(in srgb, var(--accent-light) 30%, transparent);
}

.player-collapsible-hint {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.player-collapsible[open] .player-collapsible-hint {
    color: var(--accent);
}

.player-rank-modal {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-overlay) + 5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-normal) var(--ease-out);
}

.player-rank-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.player-rank-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 13, 0.78);
}

.player-rank-modal-panel {
    position: relative;
    width: min(680px, calc(100% - 2rem));
    margin: clamp(4rem, 10vh, 6rem) auto 0;
    max-height: calc(100vh - 8rem);
    overflow: auto;
}

.player-rank-modal-close {
    margin-left: auto;
}

body.player-rank-modal-open {
    overflow: hidden;
}

#quest-board {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.quest-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    padding: var(--space-1);
    border: 1px solid var(--panel-system-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
}

.quest-tab {
    min-width: 92px;
    border-radius: var(--radius-sm);
}

.quest-tab.btn-ghost {
    border: 1px solid transparent;
}

.quest-tab.btn-ghost:hover {
    border-color: var(--border-accent);
}

.quest-tab.btn-primary {
    box-shadow: 0 0 14px var(--accent-glow);
}

.quest-empty {
    text-align: center;
    padding: var(--space-4) 0;
}

.quest-item {
    border: 1px solid var(--panel-system-border);
    background: linear-gradient(
        175deg,
        var(--panel-system-start) 0%,
        var(--panel-system-alt-end) 100%
    );
    border-radius: var(--radius-md);
    padding: var(--space-3);
    transition:
        transform var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
}

.quest-item:hover {
    transform: translateY(-2px);
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md);
}

.quest-item.is-done {
    opacity: 0.7;
}

.quest-item-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
}

.quest-item-text {
    min-width: 0;
}

.quest-title {
    display: block;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.35;
}

.quest-desc {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.quest-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.quest-xp {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.quest-status {
    font-size: 0.68rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.quest-status-active {
    color: var(--text-muted);
}

.quest-status-done {
    color: var(--success);
}

.quest-status-expired {
    color: var(--text-muted);
}

.quest-progress-track {
    margin-top: var(--space-2);
    height: 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    overflow: hidden;
}

.quest-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    transition: width var(--dur-normal) var(--ease-out);
}

.quest-progress-text {
    margin-top: 0.2rem;
    font-size: 0.74rem;
    color: var(--text-muted);
    text-align: right;
}

.milestone-journey {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.milestone-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: var(--space-2);
    padding-left: var(--space-2);
}

.milestone-item.is-open {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md);
}

.milestone-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.milestone-node {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-accent);
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--accent);
}

.milestone-line {
    width: 2px;
    flex: 1;
    min-height: 40px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--accent) 45%, transparent);
}

.milestone-main {
    min-width: 0;
}

.milestone-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    object-fit: contain;
    filter: saturate(0.3) brightness(0.9) drop-shadow(0 0 5px var(--accent-glow));
}

.milestone-icon-fallback {
    color: var(--accent);
    filter: drop-shadow(0 0 5px var(--accent-glow));
    opacity: 0.7;
}

.milestone-toggle {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.milestone-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
}

.milestone-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.milestone-title-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.milestone-track-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.milestone-chevron {
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease-out);
    opacity: 0.7;
    margin-top: 0.15rem;
}

.milestone-item.is-open .milestone-chevron {
    transform: rotate(-135deg);
}

.milestone-details {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows var(--dur-normal) var(--ease-out),
        opacity var(--dur-fast) var(--ease-out);
}

.milestone-item.is-open .milestone-details {
    grid-template-rows: 1fr;
    opacity: 1;
}

.milestone-details-inner {
    min-height: 0;
    overflow: hidden;
    padding-top: 0;
}

.milestone-item.is-open .milestone-details-inner {
    padding-top: var(--space-3);
}

.milestone-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.milestone-metric {
    padding: var(--space-2);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-secondary) 84%, transparent);
}

.milestone-metric-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.milestone-metric-value {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.milestone-previous-note {
    margin: var(--space-3) 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.milestone-history-block {
    margin-top: var(--space-3);
}

.milestone-history-heading {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.milestone-history-list {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.milestone-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-muted);
    background: color-mix(in srgb, var(--bg-primary) 76%, transparent);
}

.milestone-history-item.is-current {
    border-color: var(--border-accent);
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-primary));
}

.milestone-history-item.status-completed {
    border-color: color-mix(in srgb, var(--success) 35%, var(--border-muted));
}

.milestone-history-copy {
    min-width: 0;
}

.milestone-history-title {
    display: block;
    font-size: 0.84rem;
    color: var(--text-primary);
}

.milestone-history-meta {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.milestone-history-state {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.milestone-empty-note {
    margin: var(--space-2) 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.track-workout .milestone-node {
    border-color: color-mix(in srgb, var(--chart-primary) 60%, transparent);
    color: var(--chart-primary);
    background: color-mix(in srgb, var(--chart-primary) 22%, transparent);
}

.track-rank .milestone-node {
    border-color: color-mix(in srgb, var(--rank-a) 60%, transparent);
    color: var(--rank-a);
    background: color-mix(in srgb, var(--rank-a) 20%, transparent);
}

.track-stats .milestone-node {
    border-color: color-mix(in srgb, var(--rank-b) 60%, transparent);
    color: var(--rank-b);
    background: color-mix(in srgb, var(--rank-b) 20%, transparent);
}

.track-volume .milestone-node {
    border-color: color-mix(in srgb, var(--success) 60%, transparent);
    color: var(--success);
    background: color-mix(in srgb, var(--success) 20%, transparent);
}

@media (max-width: 680px) {
    .milestone-metrics {
        grid-template-columns: 1fr;
    }

    .milestone-summary-row,
    .milestone-history-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .milestone-history-state {
        margin-top: 0.15rem;
    }
}

.xp-history-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-muted);
}

.xp-history-row:last-child {
    border-bottom: 0;
}

.xp-source {
    color: var(--text-secondary);
}

/* ============================================
   5. AWAKENING ANIMATION (Calibration)
   ============================================ */
.awakening-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-strong);
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fadeIn var(--dur-slow) var(--ease-out);
}

.awakening-overlay.awakening-exit {
    animation: fadeOut 0.6s var(--ease-in) forwards;
}

.awakening-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.awakening-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--sl-purple);
    border-radius: 50%;
    animation: awakening-float 3s var(--ease-out) infinite;
    opacity: 0;
}

@keyframes awakening-float {
    0% {
        opacity: 0;
        transform: translateY(100vh) scale(0);
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        transform: translateY(-20vh) scale(1.5);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Awakening intro text - single breath (0→1→0) across 2.4s, no infinite pulse.
   The scene plays once; looping motion turns the moment into wallpaper. */
.awakening-text {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: var(--weight-semibold);
    color: var(--sigil-mana);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-6);
    animation: awakening-text-breath 2.4s var(--ease-out) forwards;
}

@keyframes awakening-text-breath {
    0%   { opacity: 0; }
    25%  { opacity: 1; }
    100% { opacity: 0.75; }
}

.awakening-stat-reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.awakening-stat-item {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(20px);
    animation: awakening-stat-in 0.6s var(--ease-spring) forwards;
}

.awakening-stat-item .awakening-stat-value {
    margin-left: var(--space-3);
    font-size: 2rem;
    font-weight: 800;
}

/* Stat-specific colors for awakening */
.awakening-stat-item[data-stat="str"] .awakening-stat-value {
    color: var(--stat-str);
    text-shadow: 0 0 20px var(--stat-str-glow);
}
.awakening-stat-item[data-stat="end"] .awakening-stat-value {
    color: var(--stat-end);
    text-shadow: 0 0 20px var(--stat-end-glow);
}
.awakening-stat-item[data-stat="agi"] .awakening-stat-value {
    color: var(--stat-agi);
    text-shadow: 0 0 20px var(--stat-agi-glow);
}
.awakening-stat-item[data-stat="con"] .awakening-stat-value {
    color: var(--stat-con);
    text-shadow: 0 0 20px var(--stat-con-glow);
}
.awakening-stat-item[data-stat="rec"] .awakening-stat-value {
    color: var(--stat-rec);
    text-shadow: 0 0 20px var(--stat-rec-glow);
}
.awakening-stat-item[data-stat="bld"] .awakening-stat-value {
    color: var(--stat-bld);
    text-shadow: 0 0 20px var(--stat-bld-glow);
}

/* Staggered reveal: set per-item via inline style --delay */
.awakening-stat-item {
    animation-delay: var(--delay, 0s);
}

@keyframes awakening-stat-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.awakening-xp-counter {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--sl-purple-hover);
    letter-spacing: 0.04em;
    text-shadow: 0 0 30px var(--sl-purple-glow);
    margin-bottom: var(--space-5);
}

.awakening-rank-reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    opacity: 0;
    transform: scale(0.5);
    animation: awakening-rank-in 0.8s var(--ease-spring) forwards;
}

.awakening-rank-reveal .rank-badge-large {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.5rem;
    color: white;
    letter-spacing: 0.02em;
    box-shadow:
        var(--shadow-lg),
        0 0 40px var(--sl-purple-glow);
}

.awakening-rank-reveal .rank-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

@keyframes awakening-rank-in {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   6. TOAST NOTIFICATIONS
   ============================================ */

/* Level-Up Toast */
.toast-level-up {
    position: fixed;
    top: var(--space-5);
    right: var(--space-5);
    z-index: var(--z-toast);
    background: var(--bg-elevated);
    border: 1px solid var(--sl-purple);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    box-shadow:
        var(--shadow-lg),
        0 0 30px var(--sl-purple-glow);
    animation: toastIn var(--dur-normal) var(--ease-spring);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.toast-level-up.toast-exit {
    animation: toastOut var(--dur-normal) var(--ease-in) forwards;
}

.toast-level-up-icon {
    font-size: 1.5rem;
    color: var(--sl-purple);
    animation: level-up 0.6s var(--ease-spring);
}

.toast-level-up-text {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.toast-level-up-level {
    color: var(--sl-purple-hover);
}

/* Rank-Up Toast - full-screen flash */
.toast-rank-up {
    position: fixed;
    inset: 0;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--overlay-strong);
    animation: toastIn var(--dur-normal) var(--ease-out);
}

.toast-rank-up.toast-exit {
    animation: fadeOut 0.8s var(--ease-in) forwards;
}

.toast-rank-up-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        var(--stat-bld-glow) 0%,
        transparent 60%
    );
    animation: glowPulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

.toast-rank-up-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.toast-rank-up-label {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-4);
}

.toast-rank-up-rank {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.1em;
    text-shadow: 0 0 40px var(--sl-purple-glow);
    animation: level-up 0.8s var(--ease-spring);
}

/* Quest Completion Toast */
.toast-quest {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    z-index: var(--z-toast);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--success);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-md);
    animation: toastIn var(--dur-normal) var(--ease-spring);
    max-width: 320px;
}

.toast-quest.toast-exit {
    animation: toastOut var(--dur-normal) var(--ease-in) forwards;
}

.toast-quest-title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--success);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-1);
}

.toast-quest-text {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.toast-quest-xp {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--sl-purple-hover);
    margin-top: var(--space-2);
}

/* ============================================
   6.5 SHARED CINEMATICS
   ============================================ */
.forge-cinematic {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-overlay) + 20);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(1.25rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        max(1.25rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
    overflow: hidden;
    opacity: 0;
    pointer-events: auto;
    --cinematic-accent: var(--accent);
    --cinematic-accent-soft: color-mix(
        in srgb,
        var(--cinematic-accent) 28%,
        transparent
    );
    --cinematic-surface: color-mix(in srgb, var(--bg-elevated) 88%, black 12%);
    transition: opacity 0.35s ease;
}

.forge-cinematic.is-active {
    opacity: 1;
}

.forge-cinematic.is-exiting {
    opacity: 0;
}

.forge-cinematic-backdrop,
.forge-cinematic-noise,
.forge-cinematic-aura,
.forge-cinematic-beam,
.forge-cinematic-rings,
.forge-cinematic-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.forge-cinematic-backdrop {
    background:
        radial-gradient(
            circle at center,
            color-mix(in srgb, var(--cinematic-accent) 18%, transparent) 0%,
            transparent 46%
        ),
        linear-gradient(
            180deg,
            rgba(3, 5, 10, 0.92) 0%,
            rgba(3, 5, 10, 0.96) 100%
        );
}

.forge-cinematic-noise {
    opacity: 0.24;
    background:
        linear-gradient(
            transparent 0%,
            rgba(255, 255, 255, 0.025) 50%,
            transparent 100%
        ),
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.045) 0,
            rgba(255, 255, 255, 0.045) 1px,
            transparent 1px,
            transparent 4px
        );
    mix-blend-mode: screen;
}

.forge-cinematic-aura {
    background:
        radial-gradient(
            circle at center,
            color-mix(in srgb, var(--cinematic-accent) 32%, transparent) 0%,
            transparent 58%
        ),
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 32%
        );
    transform: scale(0.7);
    opacity: 0;
    transition:
        transform 0.9s var(--ease-out),
        opacity 0.9s var(--ease-out);
}

.forge-cinematic.is-revealed .forge-cinematic-aura {
    transform: scale(1.15);
    opacity: 1;
}

.forge-cinematic-beam {
    inset: -18% 36%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in srgb, var(--cinematic-accent) 42%, transparent) 18%,
        rgba(255, 255, 255, 0.2) 48%,
        color-mix(in srgb, var(--cinematic-accent) 42%, transparent) 78%,
        transparent 100%
    );
    filter: blur(16px);
    opacity: 0;
    transform: translateY(12%) scaleY(0.7);
    transition:
        transform 0.8s var(--ease-out),
        opacity 0.8s var(--ease-out);
}

.forge-cinematic.is-revealed .forge-cinematic-beam {
    opacity: 0.7;
    transform: translateY(0) scaleY(1);
}

.forge-cinematic-rings span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38vw;
    height: 38vw;
    max-width: 560px;
    max-height: 560px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--cinematic-accent) 44%, transparent);
    box-shadow: 0 0 24px var(--cinematic-accent-soft);
    transform: translate(-50%, -50%) scale(0.72);
    opacity: 0;
}

.forge-cinematic-rings span:nth-child(1) {
    animation: forge-cinematic-ring 2.6s linear infinite;
}

.forge-cinematic-rings span:nth-child(2) {
    width: 28vw;
    height: 28vw;
    max-width: 420px;
    max-height: 420px;
    animation: forge-cinematic-ring 2.1s linear infinite reverse;
}

.forge-cinematic-rings span:nth-child(3) {
    width: 18vw;
    height: 18vw;
    max-width: 260px;
    max-height: 260px;
    animation: forge-cinematic-pulse-ring 1.9s ease-in-out infinite;
}

.forge-cinematic.is-revealed .forge-cinematic-rings span {
    opacity: 0.72;
}

.forge-cinematic-particle {
    position: absolute;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cinematic-accent) 80%, white 20%);
    box-shadow: 0 0 12px color-mix(in srgb, var(--cinematic-accent) 70%, transparent);
    opacity: 0;
    animation: forge-cinematic-particle var(--particle-duration) linear infinite;
    animation-delay: var(--particle-delay);
}

.forge-cinematic-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 860px);
    padding: clamp(1.5rem, 2.8vw, 2.5rem);
    border-radius: 28px;
    border: 1px solid color-mix(in srgb, var(--cinematic-accent) 34%, transparent);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.02) 100%
        ),
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--cinematic-accent) 12%, var(--cinematic-surface)) 0%,
            color-mix(in srgb, black 18%, var(--cinematic-surface)) 100%
        );
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.45),
        0 0 48px color-mix(in srgb, var(--cinematic-accent) 18%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    text-align: center;
    transform: translateY(36px) scale(0.94);
    opacity: 0;
    transition:
        transform 0.55s var(--ease-spring),
        opacity 0.55s var(--ease-out);
}

.forge-cinematic.is-revealed .forge-cinematic-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.forge-cinematic-kicker {
    font-size: 0.76rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--cinematic-accent) 65%, white 35%);
    margin-bottom: 0.85rem;
}

.forge-cinematic-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 4.8rem);
    line-height: 0.94;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-shadow: 0 0 28px color-mix(in srgb, var(--cinematic-accent) 28%, transparent);
}

.forge-cinematic-subtitle {
    max-width: 38rem;
    margin: 0.95rem auto 0;
    font-size: clamp(0.95rem, 1.7vw, 1.1rem);
    line-height: 1.6;
    color: var(--text-secondary);
}

.forge-cinematic-rank-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    margin: clamp(1.4rem, 3vw, 2.2rem) 0;
}

.forge-cinematic-rank-chip {
    position: relative;
    box-shadow:
        0 0 30px color-mix(in srgb, var(--cinematic-accent) 28%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: scale(0.7);
    opacity: 0;
    transition:
        transform 0.5s var(--ease-spring),
        opacity 0.4s var(--ease-out);
    transition-delay: 0.3s;
}

.forge-cinematic.is-revealed .forge-cinematic-rank-chip {
    transform: scale(1);
    opacity: 1;
}

.forge-cinematic-rank-target {
    transition-delay: 0.5s;
}

.forge-cinematic-rank-line .rank-xl {
    min-width: 64px;
    height: 64px;
    padding: 0 1rem;
    font-size: 1.4rem;
}

.forge-cinematic-rank-line .rank-xxl {
    min-width: clamp(108px, 18vw, 152px);
    height: clamp(108px, 18vw, 152px);
    padding: 0 1.5rem;
    border-radius: 50%;
    font-size: clamp(2.6rem, 7vw, 4rem);
}

.forge-cinematic[data-mode="awakening"] .forge-cinematic-arrow {
    display: none;
}

.forge-cinematic[data-mode="awakening"] .forge-cinematic-rank-line {
    margin-top: 1.75rem;
}

.forge-cinematic-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    color: color-mix(in srgb, var(--cinematic-accent) 70%, white 30%);
    opacity: 0;
    transform: scaleX(0.6);
    transition:
        transform 0.35s var(--ease-out),
        opacity 0.3s var(--ease-out);
    transition-delay: 0.4s;
}

.forge-cinematic.is-revealed .forge-cinematic-arrow {
    opacity: 0.86;
    transform: scaleX(1);
}

.forge-cinematic-arrow svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--cinematic-accent) 30%, transparent));
}

.forge-cinematic-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.forge-cinematic-card {
    padding: 0.9rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transform: translateY(8px);
    opacity: 0;
    transition:
        transform 0.4s var(--ease-out),
        opacity 0.35s var(--ease-out);
}

.forge-cinematic.is-revealed .forge-cinematic-card {
    transform: translateY(0);
    opacity: 1;
}

.forge-cinematic.is-revealed .forge-cinematic-card:nth-child(1) { transition-delay: 0.6s; }
.forge-cinematic.is-revealed .forge-cinematic-card:nth-child(2) { transition-delay: 0.7s; }
.forge-cinematic.is-revealed .forge-cinematic-card:nth-child(3) { transition-delay: 0.8s; }
.forge-cinematic.is-revealed .forge-cinematic-card:nth-child(4) { transition-delay: 0.9s; }

.forge-cinematic-card-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.forge-cinematic-card-value {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}

.forge-cinematic-skip {
    margin-top: 1.2rem;
    border: 1px solid color-mix(in srgb, var(--cinematic-accent) 42%, transparent);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    border-radius: 999px;
    padding: 0.7rem 1.2rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        transform var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}

.forge-cinematic-skip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--cinematic-accent) 70%, transparent);
    background: rgba(255, 255, 255, 0.08);
}

.forge-cinematic[data-tier="elite"] .forge-cinematic-panel {
    box-shadow:
        0 44px 132px rgba(0, 0, 0, 0.5),
        0 0 64px color-mix(in srgb, var(--cinematic-accent) 26%, transparent);
}

.forge-cinematic[data-tier="mythic"] .forge-cinematic-beam {
    opacity: 0.9;
}

.forge-cinematic[data-tier="mythic"] .forge-cinematic-rings span,
.forge-cinematic[data-tier="apex"] .forge-cinematic-rings span {
    border-width: 1.5px;
}

.forge-cinematic[data-tier="apex"] .forge-cinematic-aura {
    background:
        radial-gradient(
            circle at center,
            color-mix(in srgb, var(--cinematic-accent) 38%, transparent) 0%,
            transparent 54%
        ),
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.14) 0%,
            transparent 26%
        );
}

@keyframes forge-cinematic-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.72) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.04) rotate(360deg);
    }
}

@keyframes forge-cinematic-pulse-ring {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.86);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.08);
    }
}

@keyframes forge-cinematic-particle {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.3);
    }
    15% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(1.2);
    }
}

/* ============================================
   STAT INFO OVERLAY
   ============================================ */
.stat-info-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay, 100);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 7, 13, 0.72);
}

.stat-info-panel {
    position: relative;
    width: 90%;
    max-width: 420px;
    background: linear-gradient(
        170deg,
        var(--panel-system-start) 0%,
        var(--panel-system-alt-end) 50%,
        var(--panel-system-end) 100%
    );
    border: 1px solid var(--panel-color, var(--sl-purple));
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    box-shadow:
        0 0 40px color-mix(in srgb, var(--panel-color) 25%, transparent),
        var(--shadow-lg);
    animation: stat-panel-in 0.25s
        var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1));
}

@keyframes stat-panel-in {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.stat-info-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition:
        color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}

.stat-info-close:hover {
    color: var(--text-primary);
    background: var(--ui-highlight-06);
}

.stat-info-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.stat-info-badge {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.stat-info-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.stat-info-score {
    text-align: center;
    margin-bottom: var(--space-4);
}

.stat-info-value {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
}

.stat-info-max {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    vertical-align: baseline;
}

.stat-info-locked {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.15em;
}

.stat-info-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-5);
}

.stat-info-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s var(--ease-out);
}

.stat-info-desc {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.stat-info-unlock-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--accent-light);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--sl-purple-hover);
    line-height: 1.5;
}

.stat-info-hint-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.stat-info-raw {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: var(--space-2);
    text-align: center;
}

.stat-info-raw span:last-child {
    color: var(--text-primary);
    font-weight: 600;
}

/* ============================================
   Player Skills
   ============================================ */
.player-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.player-skill-card {
    background: linear-gradient(
        170deg,
        var(--panel-system-start) 0%,
        var(--panel-system-alt-end) 100%
    );
    border: 1px solid
        color-mix(
            in srgb,
            var(--skill-color, var(--skill-default)) 40%,
            transparent
        );
    border-radius: var(--radius-md);
    padding: var(--space-3);
    transition:
        transform var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
}

.player-skill-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(
        in srgb,
        var(--skill-color, var(--skill-default)) 70%,
        transparent
    );
    box-shadow:
        var(--shadow-md),
        0 0 20px color-mix(in srgb, var(--skill-color, var(--skill-default)) 18%, transparent);
}

.player-skill-card.is-locked {
    opacity: 0.65;
}

.player-skill-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.player-skill-name {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.player-skill-tier {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--skill-color, var(--skill-default));
    border: 1px solid
        color-mix(
            in srgb,
            var(--skill-color, var(--skill-default)) 60%,
            transparent
        );
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.4rem;
}

.player-skill-desc {
    margin: 0 0 var(--space-2);
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.35;
}

.player-skill-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.player-skill-xp {
    color: var(--skill-color, var(--skill-default));
    font-weight: 700;
}

/* ============================================
   7. RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .player-header {
        grid-template-columns: 1fr;
        text-align: center;
        padding: var(--space-5) var(--space-4);
    }

    .player-rank-display,
    .player-level-display {
        min-width: 0;
    }

    .rank-badge-trigger {
        margin: 0 auto;
    }

    .player-level-display {
        text-align: center;
    }

    .player-identity-meta {
        justify-content: center;
    }

    .player-identity-meta-item {
        align-items: center;
    }

    .player-rank-modal-panel {
        width: calc(100% - 1rem);
        margin-top: 2.5rem;
        max-height: calc(100vh - 4rem);
    }

    .quest-item-head {
        flex-direction: column;
    }

    .quest-item-right {
        align-items: flex-start;
    }

    .milestone-item {
        grid-template-columns: 32px 1fr;
        padding-left: 0;
    }

    .player-content {
        grid-template-columns: 1fr;
    }

    .player-progression-brief {
        grid-template-columns: 1fr;
    }

    .player-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .player-header-rank {
        width: 64px;
        height: 64px;
        font-size: 1.6rem;
    }

    .player-header-title {
        font-size: 1.5rem;
    }

    .stat-card-score {
        font-size: 2rem;
    }

    .stat-window-chart {
        max-width: 200px;
    }

    .rank-ladder {
        gap: var(--space-1);
    }

    .rank-ladder-badge {
        width: 32px;
        height: 32px;
        font-size: 0.65rem;
    }

    .rank-ladder-connector {
        flex: 0 0 12px;
    }

    /* Awakening responsive */
    .awakening-stat-item {
        font-size: 1.2rem;
    }

    .awakening-stat-item .awakening-stat-value {
        font-size: 1.5rem;
    }

    .awakening-xp-counter {
        font-size: 2rem;
    }

    .awakening-rank-reveal .rank-badge-large {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }

    .toast-rank-up-rank {
        font-size: 3rem;
    }

    .forge-cinematic-panel {
        width: min(100%, 680px);
        padding: 1.4rem;
    }

    .forge-cinematic-rank-line .rank-xxl {
        min-width: 96px;
        height: 96px;
        font-size: 2.5rem;
    }

    .forge-cinematic-arrow {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .player-header {
        padding: var(--space-4) var(--space-3);
    }

    .rank-badge-trigger-text {
        font-size: 0.56rem;
    }

    .level-number {
        font-size: 1.45rem;
    }

    .quest-item,
    .milestone-item {
        padding: var(--space-2);
    }

    .player-page {
        padding: var(--space-3);
    }

    .player-stats-grid {
        gap: var(--space-3);
    }

    .stat-card-detail {
        padding: var(--space-4) var(--space-3);
    }

    .stat-card-icon {
        width: 36px;
        height: 36px;
    }

    .stat-card-name {
        font-size: 0.9rem;
    }

    .stat-card-score {
        font-size: 1.6rem;
    }

    .stat-window {
        padding: var(--space-4);
    }

    .stat-window-name,
    .hunter-name {
        font-size: 1rem;
    }

    .stat-window-identity .rank-badge {
        font-size: 0.75rem;
        min-width: 24px;
        height: 24px;
    }

    .xp-bar {
        height: 20px;
    }

    .xp-bar-text {
        font-size: 0.7rem;
    }

    .xp-bar-labels {
        font-size: 0.7rem;
    }

    .forge-cinematic {
        padding: 0.75rem;
    }

    .forge-cinematic-title {
        font-size: 2rem;
    }

    .forge-cinematic-subtitle {
        font-size: 0.92rem;
    }

    .forge-cinematic-rank-line {
        gap: 0.5rem;
    }

    .forge-cinematic-rank-line .rank-xl {
        min-width: 52px;
        height: 52px;
        font-size: 1.1rem;
    }

    .forge-cinematic-rank-line .rank-xxl {
        min-width: 84px;
        height: 84px;
        font-size: 2.1rem;
    }

    .forge-cinematic-arrow {
        width: 42px;
        height: 42px;
    }

    .forge-cinematic-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Awakening prompt (uncalibrated state) */
.awakening-prompt {
    text-align: center;
    padding: 4rem 1.5rem;
    max-width: 480px;
    margin: 2rem auto;
}
.awakening-prompt-icon svg {
    width: 64px;
    height: 64px;
    stroke: var(--accent);
    margin-bottom: 1.5rem;
}
.awakening-prompt h2 {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
}
.awakening-prompt .text-secondary {
    margin: 0 0 2rem;
}