/**
 * UnleashTheBeast — Component & Layout Styles
 * All custom component styles. Design tokens live in theme.css (:root).
 */

/* ── Leaderboard table ────────────────────────────────────────────── */
.leaderboard-rank-1 { color: #ffd700; font-weight: 700; }
.leaderboard-rank-2 { color: #c0c0c0; font-weight: 700; }
.leaderboard-rank-3 { color: #cd7f32; font-weight: 700; }

/* ── Score chips ──────────────────────────────────────────────────── */
.score-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
}
.score-chip--total {
    background-color: var(--monster-green);
    color: var(--text-inverse);
    border-color: var(--monster-green);
}

/* ── Status indicator ─────────────────────────────────────────────── */
.status--pending    { color: var(--color-pending);  }
.status--analyzed   { color: var(--color-analyzed); }
.status--failed     { color: var(--color-failed);   }

/* ── Monster card grid ────────────────────────────────────────────── */
.monsters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
    gap: var(--space-lg);
}

.monster-card__image-placeholder {
    background-color: var(--bg-surface);
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

.monster-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .6));
    padding: var(--space-sm);
}

.monster-card__fallback {
    font-size: 2.5rem;
    display: none;
}

/* ── Upload section ───────────────────────────────────────────────── */
.upload-section {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-overlay) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}
.upload-section h1 {
    font-size: var(--font-size-4xl);
    text-shadow: var(--shadow-glow-sm);
}

/* ── Pixel flame canvas ───────────────────────────────────────────── */
.pixel-flame-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ── Homepage hero ────────────────────────────────────────────────── */
.hero-section {
    position: relative;
    overflow: hidden;
    background: #000;
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-2xl);
    min-height: 420px;
    display: flex;
    align-items: center;
}
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(57,255,20,.08) 0%, transparent 70%);
    pointer-events: none;
}
.hero-content {
    position: relative;
    z-index: 2;
    padding: var(--space-2xl);
}
.hero-eyebrow {
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-monster-green);
    font-family: var(--font-sans);
    font-weight: 700;
    margin-bottom: .5rem;
}
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 40px rgba(57,255,20,.4);
    margin-bottom: 1rem;
}
.hero-title span {
    color: var(--color-monster-green);
    display: block;
}
.hero-subtitle {
    font-size: 1rem;
    color: var(--bs-secondary-color);
    max-width: 400px;
    margin-bottom: 1.75rem;
    line-height: 1.6;
}
.hero-image-col {
    position: relative;
    z-index: 1;
}
.hero-image-col img {
    width: 100%;
    max-width: 460px;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 0 60px rgba(57,255,20,.25));
}
@media (max-width: 767px) {
    .hero-section { min-height: unset; }
    .hero-image-col { display: none; }
    .hero-content { padding: var(--space-xl); }
}

/* ── Scrollbar (Webkit) ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--monster-green); }

/* ── Monster Catalog ──────────────────────────────────────────────── */
.catalog-category-title {
    font-family: var(--font-display);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    border-bottom: 2px solid var(--monster-green);
    padding-bottom: var(--space-sm);
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--space-md);
}

.catalog-card {
    --card-accent: var(--monster-green);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--card-accent);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.catalog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 12px color-mix(in srgb, var(--card-accent) 40%, transparent);
}

.catalog-card__image {
    width: 100%;
    padding: var(--space-md) var(--space-sm) var(--space-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    background: color-mix(in srgb, var(--card-accent) 8%, var(--bg-overlay));
}
.catalog-card__image img {
    max-height: 150px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
}
.catalog-card__fallback-emoji {
    font-size: 3.5rem;
    line-height: 1;
}

.catalog-card__body {
    width: 100%;
    padding: var(--space-sm) var(--space-sm) var(--space-md);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-xs);
}
.catalog-card__name {
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--text-primary);
}

/* ── Profile page ─────────────────────────────────────────────────── */
.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--monster-green), var(--monster-green-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 3.5rem;
    color: var(--bg-body);
    box-shadow: 0 0 20px rgba(0, 177, 64, .4);
}

.profile-avatar-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--monster-green);
    box-shadow: 0 0 20px rgba(0, 177, 64, .4);
}

.avatar-edit-trigger {
    position: relative;
    display: block;
    text-decoration: none;
    cursor: pointer;
}
.avatar-edit-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.avatar-edit-trigger:hover .avatar-edit-overlay {
    opacity: 1;
}

.profile-stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: var(--space-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    height: 100%;
}
.profile-stat-card__value {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    line-height: 1;
    color: var(--text-primary);
}
.profile-stat-card__label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.profile-score-ring {
    --ring-color: var(--monster-green);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--ring-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px color-mix(in srgb, var(--ring-color) 40%, transparent);
}
.profile-score-ring__value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--ring-color);
}

/* ── Tom Select — Monster Energy dark theme ────────────────────────── */
.ts-wrapper.form-select { padding: 0; }
.ts-wrapper .ts-control {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    border-radius: var(--border-radius-sm) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    padding: .475rem .75rem !important;
    min-height: calc(1.5em + .75rem + 2px);
}
.ts-wrapper.focus .ts-control {
    border-color: var(--monster-green) !important;
    box-shadow: 0 0 0 .2rem rgba(0, 177, 64, .25) !important;
}
.ts-wrapper .ts-control input {
    color: var(--text-primary) !important;
}
.ts-wrapper .ts-control input::placeholder {
    color: var(--text-muted) !important;
}
.ts-dropdown {
    background: var(--bg-surface) !important;
    border-color: var(--monster-green) !important;
    border-radius: var(--border-radius-sm) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6) !important;
}
.ts-dropdown .ts-dropdown-content { max-height: 280px; }
.ts-dropdown .option {
    color: var(--text-secondary) !important;
    padding: .4rem .75rem !important;
}
.ts-dropdown .option[data-disabled] {
    cursor: default !important;
    opacity: 1 !important;
}
.ts-option-separator {
    color: var(--monster-green) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: .5rem .75rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    pointer-events: none;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background: rgba(0, 177, 64, .15) !important;
    color: var(--monster-green) !important;
}
.ts-dropdown .optgroup-header {
    color: var(--monster-green) !important;
    font-family: var(--font-display) !important;
    font-size: var(--font-size-xs) !important;
    letter-spacing: .1em !important;
    padding: .5rem .75rem .2rem !important;
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.ts-dropdown .no-results {
    color: var(--text-muted) !important;
    padding: .75rem !important;
}

/* ── Monster Show page ────────────────────────────────────────────── */
.monster-show__photo-wrap {
    --accent: var(--monster-green);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-overlay));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-color));
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
}
.monster-show__photo {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .6));
}
.monster-show__photo-fallback {
    font-size: 8rem;
    align-items: center;
    justify-content: center;
    min-height: 380px;
}

/* ── Comments ─────────────────────────────────────────────────────── */
.monster-show__comments h2 {
    border-bottom: 2px solid var(--border-color);
    padding-bottom: var(--space-sm);
}
.monster-show__comment {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
}
.monster-show__comment-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-overlay);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--monster-green);
}
.monster-show__comment-avatar-img {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--monster-green);
}
.monster-show__comment-body { flex: 1; min-width: 0; }

/* ── Badge alignment in headings ──────────────────────────────────── */
h1 .badge, h2 .badge, h3 .badge,
h4 .badge, h5 .badge, h6 .badge {
    vertical-align: middle;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    position: relative;
    top: -2px;
}

/* ── Badge cards ──────────────────────────────────────────────────── */
.badge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    min-width: 100px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
}
.badge-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(185, 255, 102, 0.25);
    border-color: var(--monster-green);
}
.badge-card__icon {
    font-size: 1.75rem;
    line-height: 1;
}
.badge-card__title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--monster-green);
}
.badge-card__date {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* ── Badge showcase (all badges page) ─────────────────────────────── */
.badge-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    height: 100%;
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
}
.badge-showcase:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(185, 255, 102, 0.2);
}
.badge-showcase--locked {
    opacity: 0.4;
    filter: grayscale(0.8);
}
.badge-showcase--locked:hover {
    opacity: 0.6;
    filter: grayscale(0.4);
}
.badge-showcase--secret {
    border-style: dashed;
}
.badge-showcase__icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.badge-showcase__title {
    color: var(--monster-green);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}
.badge-showcase__desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.badge-showcase__req {
    font-size: 0.7rem;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 0.15rem 0.6rem;
}
.badge-showcase__earned {
    font-size: 0.7rem;
    color: var(--monster-green);
    margin-top: 0.5rem;
    font-weight: 600;
}

/* ── KnpPaginator — Monster Energy theme ─────────────────────────── */
.pagination {
    --bs-pagination-bg: var(--bg-surface);
    --bs-pagination-border-color: var(--border-color);
    --bs-pagination-color: var(--text-secondary);
    --bs-pagination-hover-bg: rgba(0, 177, 64, .15);
    --bs-pagination-hover-border-color: var(--monster-green);
    --bs-pagination-hover-color: var(--monster-green);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(0, 177, 64, .25);
    --bs-pagination-active-bg: var(--monster-green);
    --bs-pagination-active-border-color: var(--monster-green);
    --bs-pagination-active-color: var(--text-inverse);
    --bs-pagination-disabled-bg: var(--bg-body);
    --bs-pagination-disabled-border-color: var(--border-color);
    --bs-pagination-disabled-color: var(--text-muted);
}
.page-link {
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: all .15s ease;
}
.page-item.active .page-link {
    box-shadow: 0 0 10px rgba(0, 177, 64, .4);
}

/* ── User Cards ─────────────────────────────────────── */
.user-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: transform .2s ease, box-shadow .2s ease;
}
.user-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 177, 64, .15);
    border-color: var(--monster-green);
}

/* ── Profile Style System ────────────────────────────────────────────── */

/*
 * Each .profile-style--* class overrides CSS custom properties and may add
 * animations. Applied on the <main> element of profile pages.
 * Static styles: color overrides only.
 * Animated styles (rare badges): CSS keyframe animations.
 */

/* Shared custom properties used by profile components */
:root {
    --profile-accent:        var(--monster-green);
    --profile-avatar-shadow: 0 0 0 3px var(--monster-green), 0 0 16px rgba(0, 177, 64, .4);
    --profile-header-bg:     linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-overlay) 100%);
    --profile-stat-border:   var(--border-color);
    --profile-badge-glow:    none;
}

/* Apply shared properties to profile elements */
.profile-avatar,
.profile-avatar-img {
    box-shadow: var(--profile-avatar-shadow);
}

.profile-stat-card {
    border-color: var(--profile-stat-border);
}

/* ── Inferno (requires BEAST_MODE) ──────────────────────────────── */
.profile-style--inferno {
    --profile-accent:        #ff6b35;
    --profile-avatar-shadow: 0 0 0 3px #ff6b35, 0 0 20px rgba(255, 107, 53, .5);
    --profile-header-bg:     linear-gradient(135deg, #1a0800 0%, rgba(255, 107, 53, .12) 100%);
    --profile-stat-border:   rgba(255, 107, 53, .4);
}
.profile-style--inferno h1,
.profile-style--inferno h2 {
    color: #ff6b35;
    text-shadow: 0 0 12px rgba(255, 107, 53, .4);
}
.profile-style--inferno .profile-stat-card {
    border-color: rgba(255, 107, 53, .35);
}
.profile-style--inferno .badge-card {
    border-color: rgba(255, 107, 53, .3);
}

/* ── Night Owl (requires NIGHT_OWL) ─────────────────────────────── */
.profile-style--night-owl {
    --profile-accent:        #7c3aed;
    --profile-avatar-shadow: 0 0 0 3px #7c3aed, 0 0 20px rgba(124, 58, 237, .5);
    --profile-header-bg:     linear-gradient(135deg, #0d0820 0%, rgba(124, 58, 237, .12) 100%);
    --profile-stat-border:   rgba(124, 58, 237, .4);
}
.profile-style--night-owl h1,
.profile-style--night-owl h2 {
    color: #a78bfa;
    text-shadow: 0 0 12px rgba(124, 58, 237, .4);
}
.profile-style--night-owl .profile-stat-card {
    border-color: rgba(124, 58, 237, .35);
}
.profile-style--night-owl .badge-card {
    border-color: rgba(124, 58, 237, .3);
}

/* ── Legendary (requires LEGENDARY_BEAST) ───────────────────────── */
.profile-style--legendary {
    --profile-accent:        #ffd700;
    --profile-avatar-shadow: 0 0 0 3px #ffd700, 0 0 24px rgba(255, 215, 0, .5);
    --profile-header-bg:     linear-gradient(135deg, #1a1400 0%, rgba(255, 215, 0, .1) 100%);
    --profile-stat-border:   rgba(255, 215, 0, .4);
}
.profile-style--legendary h1,
.profile-style--legendary h2 {
    color: #ffd700;
    text-shadow: 0 0 16px rgba(255, 215, 0, .5);
}
.profile-style--legendary .profile-stat-card {
    border-color: rgba(255, 215, 0, .35);
}
.profile-style--legendary .badge-card {
    border-color: rgba(255, 215, 0, .3);
}

/* ── Neon Pulse — ANIMATED (requires ELITE_PREDATOR) ───────────── */
@keyframes neon-pulse {
    0%, 100% { box-shadow: 0 0 0 3px #39ff14, 0 0 16px rgba(57, 255, 20, .5); }
    50%       { box-shadow: 0 0 0 3px #39ff14, 0 0 36px rgba(57, 255, 20, .9), 0 0 60px rgba(57, 255, 20, .3); }
}
@keyframes neon-text-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(57, 255, 20, .5); }
    50%       { text-shadow: 0 0 20px rgba(57, 255, 20, .9), 0 0 40px rgba(57, 255, 20, .4); }
}
.profile-style--neon-pulse {
    --profile-accent:        #39ff14;
    --profile-avatar-shadow: none; /* overridden by animation */
    --profile-header-bg:     linear-gradient(135deg, #001a00 0%, rgba(57, 255, 20, .1) 100%);
    --profile-stat-border:   rgba(57, 255, 20, .4);
}
.profile-style--neon-pulse .profile-avatar,
.profile-style--neon-pulse .profile-avatar-img {
    animation: neon-pulse 2s ease-in-out infinite;
}
.profile-style--neon-pulse h1,
.profile-style--neon-pulse h2 {
    color: #39ff14;
    animation: neon-text-pulse 2s ease-in-out infinite;
}
.profile-style--neon-pulse .profile-stat-card {
    border-color: rgba(57, 255, 20, .35);
}

/* ── God Tier — ANIMATED (requires GOD_TIER) ────────────────────── */
@keyframes rainbow-shift {
    0%   { border-color: #ff0000; box-shadow: 0 0 0 3px #ff0000, 0 0 24px rgba(255,0,0,.5); }
    17%  { border-color: #ff8800; box-shadow: 0 0 0 3px #ff8800, 0 0 24px rgba(255,136,0,.5); }
    33%  { border-color: #ffff00; box-shadow: 0 0 0 3px #ffff00, 0 0 24px rgba(255,255,0,.5); }
    50%  { border-color: #00ff00; box-shadow: 0 0 0 3px #00ff00, 0 0 24px rgba(0,255,0,.5); }
    67%  { border-color: #0088ff; box-shadow: 0 0 0 3px #0088ff, 0 0 24px rgba(0,136,255,.5); }
    83%  { border-color: #8800ff; box-shadow: 0 0 0 3px #8800ff, 0 0 24px rgba(136,0,255,.5); }
    100% { border-color: #ff0000; box-shadow: 0 0 0 3px #ff0000, 0 0 24px rgba(255,0,0,.5); }
}
@keyframes rainbow-text {
    0%   { color: #ff6b6b; }
    25%  { color: #ffd700; }
    50%  { color: #51cf66; }
    75%  { color: #74c0fc; }
    100% { color: #ff6b6b; }
}
.profile-style--god-tier {
    --profile-accent:        #ffd700;
    --profile-avatar-shadow: none;
    --profile-header-bg:     linear-gradient(135deg, #0d0d0d 0%, rgba(255, 215, 0, .08) 100%);
}
.profile-style--god-tier .profile-avatar,
.profile-style--god-tier .profile-avatar-img {
    animation: rainbow-shift 3s linear infinite;
}
.profile-style--god-tier h1 {
    animation: rainbow-text 3s linear infinite;
}
.profile-style--god-tier h2 {
    color: #ffd700;
}

/* ── Perfectionist — ANIMATED (requires PERFECTIONIST) ─────────── */
@keyframes sparkle-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes crystal-glow {
    0%, 100% { box-shadow: 0 0 0 3px #e0e0ff, 0 0 20px rgba(224, 224, 255, .6); }
    50%       { box-shadow: 0 0 0 3px #ffffff, 0 0 40px rgba(255, 255, 255, .8), 0 0 70px rgba(200, 200, 255, .3); }
}
.profile-style--perfectionist {
    --profile-accent:        #c8c8ff;
    --profile-avatar-shadow: none;
    --profile-header-bg:     linear-gradient(135deg, #0a0a14 0%, rgba(200, 200, 255, .1) 100%);
    --profile-stat-border:   rgba(200, 200, 255, .4);
}
.profile-style--perfectionist .profile-avatar,
.profile-style--perfectionist .profile-avatar-img {
    animation: crystal-glow 2.5s ease-in-out infinite;
}
.profile-style--perfectionist h1,
.profile-style--perfectionist h2 {
    color: #e0e0ff;
    text-shadow: 0 0 16px rgba(200, 200, 255, .6);
}
.profile-style--perfectionist .profile-stat-card {
    border-color: rgba(200, 200, 255, .3);
}

/* ── Streak Fire — ANIMATED (requires MONTH_STREAK) ────────────── */
@keyframes flame-shimmer {
    0%, 100% {
        box-shadow: 0 0 0 3px #ff4500, 0 0 16px rgba(255, 69, 0, .6), 0 -4px 20px rgba(255, 200, 0, .3);
    }
    33% {
        box-shadow: 0 0 0 3px #ff6600, 0 0 24px rgba(255, 102, 0, .7), 0 -6px 28px rgba(255, 220, 0, .4);
    }
    66% {
        box-shadow: 0 0 0 3px #ff2200, 0 0 20px rgba(255, 34, 0, .8), 0 -3px 18px rgba(255, 180, 0, .3);
    }
}
@keyframes fire-text {
    0%, 100% { color: #ff6b35; text-shadow: 0 0 12px rgba(255, 107, 53, .6); }
    50%       { color: #ffa500; text-shadow: 0 0 20px rgba(255, 165, 0, .8); }
}
.profile-style--streak-fire {
    --profile-accent:        #ff4500;
    --profile-avatar-shadow: none;
    --profile-header-bg:     linear-gradient(135deg, #150500 0%, rgba(255, 69, 0, .12) 100%);
    --profile-stat-border:   rgba(255, 69, 0, .4);
}
.profile-style--streak-fire .profile-avatar,
.profile-style--streak-fire .profile-avatar-img {
    animation: flame-shimmer 1.5s ease-in-out infinite;
}
.profile-style--streak-fire h1,
.profile-style--streak-fire h2 {
    animation: fire-text 1.5s ease-in-out infinite;
}
.profile-style--streak-fire .profile-stat-card {
    border-color: rgba(255, 69, 0, .35);
}

/* ── Style picker modal ──────────────────────────────────────────── */
.style-option-card {
    background: var(--bg-surface);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: var(--space-md);
    cursor: pointer;
    transition: border-color var(--transition-base), transform var(--transition-base);
    text-align: center;
    position: relative;
}
.style-option-card:hover:not(.style-option-card--locked) {
    border-color: var(--monster-green);
    transform: translateY(-2px);
}
.style-option-card--active {
    border-color: var(--monster-green);
    background: var(--bg-overlay);
}
.style-option-card--active::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 8px;
    color: var(--monster-green);
    font-weight: 700;
    font-size: var(--font-size-sm);
}
.style-option-card--locked {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.6);
}
.style-option-card__icon {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-xs);
}
.style-option-card__label {
    font-weight: 700;
    font-size: var(--font-size-sm);
    display: block;
}
.style-option-card__badge {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    display: block;
    margin-top: 2px;
}
.style-option-card__animated {
    font-size: var(--font-size-xs);
    color: var(--monster-green);
    display: block;
    margin-top: 2px;
}

/* ── Notification bell ───────────────────────────────────────────── */
.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    background: #ff3b3b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 99px;
    pointer-events: none;
}

/* ── Notification dropdown (kept for potential future use) ──────── */
.notif-dropdown {
    min-width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
}

@media (max-width: 991.98px) {
    .notif-dropdown {
        position: fixed !important;
        top: 56px;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        min-width: 0;
        max-height: 60vh;
        border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
        border-left: none;
        border-right: none;
        border-top: none;
        transform: none !important;
    }
}

.notif-item {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: background var(--transition-fast);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-card-hover); color: var(--text-primary); }

.notif-item--unread {
    background: rgba(0, 177, 64, .06);
    color: var(--text-primary);
}
.notif-item--unread:hover { background: rgba(0, 177, 64, .12); }

.notif-item__text { font-size: var(--font-size-sm); }

/* ── Like button ─────────────────────────────────────────────────── */
.like-btn {
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    color: inherit;
    transition: transform var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* Override score-chip's inline-block when used together */
.like-btn.score-chip {
    display: inline-flex;
}
.like-btn:hover { transform: scale(1.15); }
.like-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Badge detail modal ─────────────────────────────────────────────── */
.badge-modal__icon {
    font-size: 4rem;
    line-height: 1;
}