/* =============================================================================
   EFFECTS - Name Effects, Avatar Styles, Badges
   ============================================================================= */

/* Custom property for Immortal rainbow border rotation */
@property --immortal-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes immortal-rotate {
    from { --immortal-angle: 0deg; }
    to { --immortal-angle: 360deg; }
}

/* =============================================================================
   ANNOUNCEMENT BANNER SYSTEM
   ============================================================================= */

.announcement-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(255,152,0,0.12), rgba(255,152,0,0.06));
    border-bottom: 1px solid rgba(255,152,0,0.25);
    animation: announcement-slide-in 0.4s ease-out;
}

@keyframes announcement-slide-in {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.announcement-banner.type-info {
    background: linear-gradient(135deg, rgba(33,150,243,0.12), rgba(33,150,243,0.06));
    border-bottom-color: rgba(33,150,243,0.25);
}

.announcement-banner.type-info .announcement-badge { background: rgba(33,150,243,0.2); color: #2196f3; }
.announcement-banner.type-info .announcement-icon { color: #2196f3; }

.announcement-banner.type-update {
    background: linear-gradient(135deg, rgba(76,175,80,0.12), rgba(76,175,80,0.06));
    border-bottom-color: rgba(76,175,80,0.25);
}

.announcement-banner.type-update .announcement-badge { background: rgba(76,175,80,0.2); color: #4caf50; }
.announcement-banner.type-update .announcement-icon { color: #4caf50; }

.announcement-banner.type-event {
    background: linear-gradient(135deg, rgba(156,39,176,0.12), rgba(156,39,176,0.06));
    border-bottom-color: rgba(156,39,176,0.25);
}

.announcement-banner.type-event .announcement-badge { background: rgba(156,39,176,0.2); color: #9c27b0; }
.announcement-banner.type-event .announcement-icon { color: #9c27b0; }

.announcement-banner.type-warning {
    background: linear-gradient(135deg, rgba(255,152,0,0.15), rgba(255,152,0,0.08));
    border-bottom-color: rgba(255,152,0,0.3);
}

.announcement-banner.type-warning .announcement-badge { background: rgba(255,152,0,0.2); color: #ff9800; }
.announcement-banner.type-warning .announcement-icon { color: #ff9800; }

.announcement-banner.type-maintenance {
    background: linear-gradient(135deg, rgba(244,67,54,0.12), rgba(244,67,54,0.06));
    border-bottom-color: rgba(244,67,54,0.25);
}

.announcement-banner.type-maintenance .announcement-badge { background: rgba(244,67,54,0.2); color: #f44336; }
.announcement-banner.type-maintenance .announcement-icon { color: #f44336; }

.announcement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}

.announcement-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.announcement-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255,152,0,0.2);
    color: var(--accent);
    white-space: nowrap;
    flex-shrink: 0;
}

.announcement-text {
    color: #ddd;
    font-size: 0.9rem;
    line-height: 1.4;
}

.announcement-text a {
    color: var(--accent);
    text-decoration: underline;
    margin-left: 6px;
}

.announcement-text a:hover {
    color: var(--accent-hover);
}

.announcement-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.announcement-dismiss:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* Admin Announcement Button */
.admin-announcement-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(102,126,234,0.4);
    transition: all 0.3s;
    z-index: 1000;
}

.admin-announcement-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(102,126,234,0.6);
}

/* Announcement Modal */
.announcement-modal-content {
    max-width: 500px;
}

.announcement-modal-content .modal-header {
    background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1));
    border-bottom: 1px solid rgba(102,126,234,0.2);
}

.announcement-modal-content .modal-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 1.1rem;
}

.announcement-modal-content .modal-header h3 svg {
    color: #667eea;
}

.announcement-modal-content .form-group {
    margin-bottom: 18px;
}

.announcement-modal-content .form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #aaa;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.announcement-modal-content input,
.announcement-modal-content select,
.announcement-modal-content textarea {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.announcement-modal-content input:focus,
.announcement-modal-content select:focus,
.announcement-modal-content textarea:focus {
    border-color: #667eea;
}

.announcement-modal-content textarea {
    resize: vertical;
    min-height: 100px;
}

.announcement-modal-content .char-count {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: #555;
    margin-top: 4px;
}

.announcement-modal-content .checkbox-row {
    display: flex;
    align-items: center;
}

.announcement-modal-content .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #aaa;
}

.announcement-modal-content .checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #667eea;
}

.announcement-modal-content .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.btn-danger {
    padding: 10px 18px;
    background: rgba(244,67,54,0.15);
    border: 1px solid rgba(244,67,54,0.3);
    border-radius: 8px;
    color: #f44336;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-danger:hover {
    background: rgba(244,67,54,0.25);
}

/* =============================================================================
   DEVELOPER BADGE
   ============================================================================= */

.dev-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #00d4ff !important;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 4px 10px;
    margin-left: 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    vertical-align: middle;
    border: 1px solid #00d4ff;
    box-shadow: 
        0 2px 6px rgba(0, 212, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    line-height: 1.2;
    min-height: 20px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.dev-badge::before {
    content: '⚡';
    font-size: 0.7rem;
}

.dev-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(45deg);
    animation: badge-shine 3s infinite;
}

@keyframes dev-badge-pulse {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(0, 212, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        border-color: #00d4ff;
    }
    50% { 
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.6), 0 0 30px rgba(0, 212, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        border-color: #4de8ff;
    }
}

@keyframes badge-shine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

/* =============================================================================
   ADMIN BADGE
   ============================================================================= */

.admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: linear-gradient(135deg, #2d1f3d 0%, #44295e 50%, #5c3d7a 100%);
    color: #ffd700 !important;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 4px 10px;
    margin-left: 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    vertical-align: middle;
    border: 1px solid #ffd700;
    box-shadow: 
        0 2px 6px rgba(255, 215, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    line-height: 1.2;
    min-height: 20px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.admin-badge::before {
    content: '👑';
    font-size: 0.7rem;
}

.admin-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(45deg);
    animation: badge-shine 3s infinite;
}

/* =============================================================================
   MODERATOR BADGE
   ============================================================================= */

.mod-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: linear-gradient(135deg, #1a3a2e 0%, #2d5a48 50%, #3d7a62 100%);
    color: #4ade80 !important;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 4px 10px;
    margin-left: 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    vertical-align: middle;
    border: 1px solid #4ade80;
    box-shadow: 
        0 2px 6px rgba(74, 222, 128, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    line-height: 1.2;
    min-height: 20px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.mod-badge::before {
    content: '🛡️';
    font-size: 0.7rem;
}

.mod-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(45deg);
    animation: badge-shine 3s infinite;
}

@keyframes dev-badge-glow {
    0%, 100% { box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4); }
    50% { box-shadow: 0 2px 12px rgba(118, 75, 162, 0.6), 0 0 20px rgba(102, 126, 234, 0.3); }
}

/* =============================================================================
   NAME EFFECT CLASSES
   ============================================================================= */

.name-effect-cyber { animation: effect-cyber 1s infinite linear; }
.name-effect-wave { display: inline-block; animation: effect-wave 1s infinite ease-in-out; }
.name-effect-shake { display: inline-block; animation: effect-shake 0.5s infinite linear; }
.name-effect-pulse { display: inline-block; animation: effect-pulse-grow 1.5s infinite ease-in-out; }
.name-effect-bounce { display: inline-block; animation: effect-bounce 0.8s infinite ease-in-out; }
.name-effect-rotate { display: inline-block; animation: effect-rotate 0.3s infinite alternate ease-in-out; }
.name-effect-flicker { animation: effect-flicker 1.5s infinite steps(4); }
.name-effect-heartbeat { display: inline-block; animation: effect-heartbeat 1.5s infinite ease-in-out; }
.name-effect-typewriter { animation: effect-typewriter 1s infinite step-end; border-right: 2px solid currentColor; padding-right: 3px; }
.name-effect-float { display: inline-block; animation: effect-float 3s infinite ease-in-out; }
.name-effect-jello { display: inline-block; animation: effect-jello 1s infinite; }
.name-effect-rubberband { display: inline-block; animation: effect-rubberband 1s infinite; }
.name-effect-static { animation: effect-static 1s infinite steps(8); }
.name-effect-vaporwave { color: #fff!important; animation: effect-vaporwave 2s infinite ease-in-out; }
.name-effect-synthwave { color: #fff!important; animation: effect-synthwave 3s infinite ease-in-out; }
.name-effect-electric { color: #ffeb3b!important; animation: effect-electric 3s infinite; }
.name-effect-retro { animation: effect-retro 0.5s infinite ease-in-out; }
.name-effect-neon-flicker { color: #fff!important; animation: effect-neon-flicker 4s infinite; }
.name-effect-dissolve { animation: effect-dissolve 2s infinite ease-in-out; }
.name-effect-ghost { animation: effect-ghost 3s infinite ease-in-out; }
.name-effect-acid { animation: effect-acid 3s infinite linear; }
.name-effect-magma { animation: effect-magma 2s infinite ease-in-out; }
.name-effect-aurora { animation: effect-aurora 4s infinite linear; }
.name-effect-void { color: #4b0082!important; animation: effect-void 3s infinite ease-in-out; }
.name-effect-divine { color: #ffd700!important; animation: effect-divine 2s infinite ease-in-out; }
.name-effect-toxic-drip { color: #0f0!important; display: inline-block; animation: effect-toxic-drip 1.5s infinite ease-in-out; }
.name-effect-frost-bite { color: #b3e5fc!important; animation: effect-frost-bite 2s infinite ease-in-out; }
.name-effect-ember-glow { animation: effect-ember-glow 1.5s infinite ease-in-out; }
.name-effect-candy { animation: effect-candy 3s infinite linear; }
.name-effect-ocean { color: #40a4c8!important; display: inline-block; animation: effect-ocean 2.5s infinite ease-in-out; }
.name-effect-sunset { animation: effect-sunset 4s infinite linear; }
.name-effect-prism { animation: effect-prism 0.5s infinite linear; }

/* =============================================================================
   CHROMATIC / TEXT GRADIENT EFFECTS
   ============================================================================= */

.name-effect-chrome { background: linear-gradient(180deg, #fff 0%, #a0a0a0 50%, #fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 2px rgba(0,0,0,0.5); }
.name-effect-obsidian { background: linear-gradient(180deg, #333 0%, #000 50%, #333 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.8); }
.name-effect-rose-gold { background: linear-gradient(180deg, #b76e79 0%, #f0c8c8 50%, #b76e79 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 3px rgba(183,110,121,0.4); }
.name-effect-emerald { background: linear-gradient(180deg, #50c878 0%, #90ee90 50%, #50c878 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 5px rgba(80,200,120,0.4); }
.name-effect-sapphire { background: linear-gradient(180deg, #0f52ba 0%, #4169e1 50%, #0f52ba 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 5px rgba(15,82,186,0.4); }
.name-effect-amethyst { background: linear-gradient(180deg, #9966cc 0%, #e0b0ff 50%, #9966cc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 5px rgba(153,102,204,0.4); }
.name-effect-ruby { background: linear-gradient(180deg, #e0115f 0%, #ff6b6b 50%, #e0115f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 5px rgba(224,17,95,0.4); }
.name-effect-copper { background: linear-gradient(180deg, #b87333 0%, #da8a67 50%, #b87333 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 3px rgba(184,115,51,0.4); }
.name-effect-platinum { background: linear-gradient(180deg, #e5e4e2 0%, #fff 50%, #c0c0c0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 2px rgba(0,0,0,0.4); }
.name-effect-opal { background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ff6b6b); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-shift 3s infinite linear; text-shadow: 0 0 3px rgba(255,255,255,0.3); }
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* =============================================================================
   AVATAR FRAME STYLES
   ============================================================================= */

/* Base rule - ensure all avatar styles maintain border-radius */
[class*="avatar-style-"] { border-radius: 12px !important; }
.chat-avatar-v2[class*="avatar-style-"] { border-radius: 12px !important; }
img[class*="avatar-style-"] { border-radius: 12px !important; }

.avatar-style-fire-ring { border: 3px solid #ff4500!important; border-radius: 12px !important; box-shadow: 0 0 10px #ff0000, 0 0 20px #ff4500, inset 0 0 5px rgba(255,69,0,0.5); animation: pulse-red-glow 1.5s infinite; }
.avatar-style-ice-ring { border: 3px solid #87ceeb!important; border-radius: 12px !important; box-shadow: 0 0 10px #00bfff, 0 0 20px #87ceeb, inset 0 0 5px rgba(135,206,235,0.5); }
.avatar-style-nature { border: 3px solid #228b22!important; border-radius: 12px !important; box-shadow: 0 0 10px #32cd32, 0 0 20px #228b22; }
.avatar-style-royal { border: 3px solid #daa520!important; border-radius: 12px !important; box-shadow: 0 0 5px #ffd700, 0 0 15px #daa520, inset 0 0 10px rgba(218,165,32,0.3); background: linear-gradient(#111, #111) padding-box, linear-gradient(45deg, #ffd700, #daa520, #b8860b, #ffd700) border-box; }
.avatar-style-shadow-realm { border: 3px solid #1a1a1a!important; border-radius: 12px !important; box-shadow: 0 0 20px #000, 0 0 30px rgba(0,0,0,0.8), inset 0 0 10px rgba(0,0,0,0.5); filter: brightness(0.8); }
.avatar-style-divine-light { border: 3px solid #fff8dc!important; border-radius: 12px !important; box-shadow: 0 0 15px #ffd700, 0 0 30px #fff8dc; animation: divine-pulse 2s infinite; }
@keyframes divine-pulse { 0%, 100% { box-shadow: 0 0 15px #ffd700, 0 0 30px #fff8dc; } 50% { box-shadow: 0 0 25px #ffd700, 0 0 50px #fff8dc, 0 0 70px rgba(255,248,220,0.5); } }
.avatar-style-void-edge { border: 3px solid #4b0082!important; border-radius: 12px !important; box-shadow: 0 0 10px #4b0082, 0 0 20px #000; filter: contrast(1.1); }
.avatar-style-cyber-frame { border: 2px solid #0ff!important; border-radius: 12px !important; box-shadow: 0 0 5px #0ff, 2px 2px 0 #f0f, -2px -2px 0 #f0f; }
.avatar-style-rainbow-ring { border: 4px solid transparent!important; border-radius: 12px !important; background: linear-gradient(#111,#111) padding-box, linear-gradient(45deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) border-box; animation: runic-rotation 3s linear infinite; }
.avatar-style-particle { border: 2px dashed var(--av-color)!important; border-radius: 12px !important; box-shadow: 0 0 5px var(--av-color), 0 0 10px var(--av-color); animation: particle-dance 2s infinite; }
@keyframes particle-dance { 0%, 100% { border-color: var(--av-color); } 50% { border-color: transparent; } }
.avatar-style-electric-arc { border: 2px solid #ffeb3b!important; border-radius: 12px !important; box-shadow: 0 0 5px #fff, 0 0 15px #ffeb3b; animation: electric-arc 0.5s infinite; }
@keyframes electric-arc { 0%, 100% { box-shadow: 0 0 5px #fff, 0 0 15px #ffeb3b; } 50% { box-shadow: 0 0 10px #fff, 0 0 25px #ffeb3b, 0 0 35px #ffeb3b; } }
.avatar-style-dragonscale { border: 3px solid #8b0000!important; box-shadow: 0 0 10px #ff4500, inset 0 0 5px rgba(139,0,0,0.5); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); border-radius: 0!important; }
.avatar-style-prism-edge { border: 3px solid transparent!important; border-radius: 12px !important; background: linear-gradient(#111,#111) padding-box, conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) border-box; }
.avatar-style-abyssal { border: 4px solid #000!important; border-radius: 12px !important; box-shadow: inset 0 0 20px #000, 0 0 10px #4b0082; filter: grayscale(50%); }
.avatar-style-celestial { border: 3px solid #ffefd5!important; border-radius: 12px !important; box-shadow: 0 0 10px #ffd700, 0 0 30px #ffefd5; background: linear-gradient(#111,#111) padding-box, radial-gradient(ellipse at center, #ffefd5 0%, #ffd700 100%) border-box; }
.avatar-style-toxic-glow { border: 3px solid #39ff14!important; border-radius: 12px !important; box-shadow: 0 0 10px #39ff14, 0 0 20px #00ff00; animation: toxic-pulse 1.5s infinite; }
@keyframes toxic-pulse { 0%, 100% { box-shadow: 0 0 10px #39ff14, 0 0 20px #00ff00; } 50% { box-shadow: 0 0 15px #39ff14, 0 0 30px #00ff00, 0 0 40px rgba(57,255,20,0.5); } }
.avatar-style-blood-moon { border: 3px solid #8b0000!important; border-radius: 12px !important; box-shadow: 0 0 15px #800000, 0 0 30px rgba(139,0,0,0.5); filter: sepia(20%) hue-rotate(-20deg); }

.timer-urgent-pulse { color: var(--urgent-red)!important; animation: pulse-red-glow 1s infinite ease-in-out; font-weight: 700!important; }
.timer-active-pulse { color: var(--green)!important; animation: pulse-green-glow 1.5s infinite ease-in-out; font-weight: 700!important; }

.name-effect-fade { animation: effect-fade 2s infinite ease-in-out; }
.name-effect-glow { animation: effect-glow 1.5s infinite ease-in-out; }
.name-effect-sparkle { animation: effect-sparkle 0.8s infinite ease-in-out; }
.name-effect-rainbow { animation: effect-rainbow 3s infinite linear; background: none; -webkit-text-fill-color: initial; }
.name-effect-fire { color: #ffeb3b!important; animation: effect-fire 1.2s infinite alternate; }
.name-effect-ice { color: #e1f5fe!important; animation: effect-ice 2s infinite ease-in-out; }
.name-effect-neon { color: #fff!important; animation: effect-neon 1.5s infinite alternate; }
.name-effect-glitch { animation: effect-glitch 0.8s infinite steps(4); position: relative; display: inline-block; }
.name-effect-matrix { color: #0f0!important; font-family: 'Courier New', monospace; animation: effect-matrix 1s infinite; }
.name-effect-cosmic { animation: effect-cosmic 5s infinite linear; }
.name-effect-lightning { animation: effect-lightning 3s infinite; }
.name-effect-blood { animation: effect-blood 3s infinite ease-in-out; }
.name-effect-golden { background: linear-gradient(to bottom, #cfc09f 22%,#634f2c 24%, #cfc09f 26%, #cfc09f 27%,#ffecb3 40%,#3a2c0f 78%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: #ffd700; text-shadow: 0 0 3px rgba(255,215,0,0.5); }
.name-effect-radioactive { color: #ccff00!important; text-shadow: 0 0 8px #0f0, 0 0 15px #0f0, 0 0 20px #0f0; animation: pulse-green 1.5s infinite; }
.name-effect-shadow { color: #333!important; animation: effect-shadow 3s infinite; }
.name-effect-holographic { color: #00ffff!important; text-shadow: 1px 0 0 #ff0000, 2px 0 2px #ff0000, -1px 0 0 #0000ff, -2px 0 2px #0000ff; opacity: 0.8; }
.name-effect-terminal { color: #0f0!important; font-family: 'Courier New', monospace!important; font-weight: bold!important; animation: effect-terminal 1s infinite; padding-right: 6px; text-shadow: 0 0 5px rgba(0,255,0,0.5), 0 0 10px rgba(0,255,0,0.3); }

/* =============================================================================
   CLAN PREVIEW EFFECT CLASSES
   ============================================================================= */

.effect-none { }
.effect-glow { animation: effect-glow 1.5s infinite ease-in-out; }
.effect-glow-intense { animation: effect-glow-intense 1s infinite ease-in-out; }
.effect-glow-soft { animation: effect-glow-soft 2s infinite ease-in-out; }
.effect-rainbow { animation: effect-rainbow 3s infinite linear; }
.effect-rainbow-fast { animation: effect-rainbow 1s infinite linear; }
.effect-shimmer { animation: effect-shimmer 2s infinite linear; background: linear-gradient(90deg, currentColor 0%, #fff 50%, currentColor 100%); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.effect-gradient-shift { animation: gradient-shift 3s infinite linear; background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3); background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.effect-fire { color: #ff4500!important; animation: effect-fire 0.4s infinite alternate; text-shadow: 0 0 8px #ff0, 0 0 15px #ff0, 0 0 25px #f80, 0 0 35px #f00; }
.effect-fire-intense { color: #ff0!important; animation: effect-fire-intense 0.2s infinite alternate; text-shadow: 0 0 10px #ff0, 0 0 20px #ff0, 0 0 30px #f80, 0 0 45px #f00; }
.effect-ice { color: #b3e5fc!important; animation: effect-ice 2s infinite ease-in-out; text-shadow: 0 0 8px #81d4fa, 0 0 15px #81d4fa, 0 0 25px #4fc3f7; }
.effect-electric { color: #ffeb3b!important; animation: effect-electric 0.3s infinite; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ffeb3b, 0 0 30px #ffc107; }
.effect-plasma { color: #e040fb!important; animation: effect-plasma 1.5s infinite; text-shadow: 0 0 8px #e040fb, 0 0 15px #e040fb, 0 0 25px #7c4dff; }
.effect-lava { color: #ff5722!important; animation: effect-lava 1s infinite; text-shadow: 0 0 8px #ff9800, 0 0 15px #ff9800, 0 0 25px #ff5722; }
.effect-nature { color: #4caf50!important; animation: effect-nature 2s infinite; text-shadow: 0 0 8px #8bc34a, 0 0 15px #8bc34a, 0 0 25px #4caf50; }
.effect-water { color: #03a9f4!important; animation: effect-water 2s infinite; text-shadow: 0 0 8px #03a9f4, 0 0 15px #03a9f4, 0 0 25px #0288d1; }
.effect-shadow { color: #424242!important; animation: effect-shadow-pulse 2s infinite; text-shadow: 2px 2px 4px #000, -2px -2px 4px #000, 0 0 8px #000, 0 0 15px #000; }
.effect-gold { background: linear-gradient(180deg, #ffd700 0%, #b8860b 50%, #ffd700 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 5px rgba(255,215,0,0.5); animation: effect-gold-shine 2s infinite; }
.effect-silver { background: linear-gradient(180deg, #c0c0c0 0%, #808080 50%, #c0c0c0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 3px rgba(192,192,192,0.5); }
.effect-bronze { background: linear-gradient(180deg, #cd7f32 0%, #8b4513 50%, #cd7f32 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.effect-chrome { background: linear-gradient(180deg, #fff 0%, #888 50%, #fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 2px rgba(0,0,0,0.5); }
.effect-neon { color: #fff!important; animation: effect-neon 1.5s infinite alternate; text-shadow: 0 0 5px #fff, 0 0 10px #ff00de, 0 0 20px #ff00de; }
.effect-neon-blue { color: #fff!important; animation: effect-neon-blue 1.5s infinite alternate; text-shadow: 0 0 5px #fff, 0 0 10px #00f, 0 0 20px #00f; }
.effect-neon-green { color: #fff!important; animation: effect-neon-green 1.5s infinite alternate; text-shadow: 0 0 5px #fff, 0 0 10px #0f0, 0 0 20px #0f0; }
.effect-neon-pink { color: #fff!important; animation: effect-neon-pink 1.5s infinite alternate; text-shadow: 0 0 5px #fff, 0 0 10px #ff1493, 0 0 20px #ff1493; }
.effect-cyberpunk { color: #fff!important; animation: effect-cyberpunk 2s infinite; background: linear-gradient(90deg, #ff00ff, #00ffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.effect-retro { animation: effect-retro 0.5s infinite ease-in-out; background: linear-gradient(180deg, #ff6ec7, #7873f5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.effect-glitch { animation: effect-glitch 0.4s infinite steps(2); position: relative; display: inline-block; }
.effect-typewriter { border-right: 2px solid currentColor; padding-right: 3px; animation: typewriter-blink 0.7s infinite; }
.effect-bounce { display: inline-block; animation: effect-bounce 0.8s infinite ease-in-out; }
.effect-shake { display: inline-block; animation: effect-shake 0.15s infinite linear; }
.effect-float { display: inline-block; animation: effect-float 3s infinite ease-in-out; }
.effect-pulse { display: inline-block; animation: effect-pulse-grow 1.5s infinite ease-in-out; }
.effect-wave { display: inline-block; animation: effect-wave 1s infinite ease-in-out; }
.effect-3d { text-shadow: 1px 1px 0 #666, 2px 2px 0 #555, 3px 3px 0 #444, 4px 4px 5px rgba(0,0,0,0.5); }
/* New effects */
.effect-glow-rainbow { animation: effect-glow-rainbow 3s infinite linear; }
.effect-disco { animation: effect-disco 0.5s infinite; }
.effect-aurora { animation: effect-aurora 5s infinite linear; background: linear-gradient(90deg, #00ffaa, #ff00ff, #00ffff, #ffff00, #00ffaa); background-size: 400%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.effect-lightning { color: #ffeb3b!important; animation: effect-lightning 0.3s infinite; text-shadow: 0 0 5px #fff, 0 0 15px #ffeb3b, 0 0 25px #ffc107; }
.effect-cosmic { animation: effect-cosmic 3s infinite linear; background: linear-gradient(90deg, #8b5cf6, #ec4899, #06b6d4, #8b5cf6); background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 20px rgba(139, 92, 246, 0.5); }
.effect-copper { background: linear-gradient(180deg, #b87333 0%, #8b4513 50%, #cd853f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.effect-spin { display: inline-block; animation: effect-spin 3s infinite linear; }
.effect-swing { display: inline-block; animation: effect-swing 1.5s infinite ease-in-out; transform-origin: top center; }
.effect-jello { display: inline-block; animation: effect-jello 1s infinite; }
.effect-heartbeat { display: inline-block; animation: effect-heartbeat 1.5s infinite; }
.effect-tada { display: inline-block; animation: effect-tada 1.5s infinite; }
.effect-matrix { color: #00ff00!important; font-family: 'Courier New', monospace!important; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; animation: effect-matrix-flicker 0.1s infinite; }
.effect-hologram { color: #00ffff!important; animation: effect-hologram 2s infinite; text-shadow: 2px 2px 0 #ff00ff, -2px -2px 0 #00ff00; }
.effect-vaporwave { animation: effect-vaporwave 3s infinite linear; background: linear-gradient(90deg, #ff6ad5, #c774e8, #ad8cff, #8795e8, #94d0ff); background-size: 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Keyframes for preview effects (unique to preview — shared ones live in animations.css) */
@keyframes effect-glow { 0%, 100% { text-shadow: 0 0 4px currentColor, 0 0 8px currentColor; } 50% { text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor; } }
@keyframes effect-glow-intense { 0%, 100% { text-shadow: 0 0 8px currentColor, 0 0 16px currentColor, 0 0 24px currentColor; } 50% { text-shadow: 0 0 20px currentColor, 0 0 35px currentColor, 0 0 50px currentColor; } }
@keyframes effect-glow-soft { 0%, 100% { text-shadow: 0 0 3px currentColor, 0 0 6px currentColor; } 50% { text-shadow: 0 0 6px currentColor, 0 0 10px currentColor, 0 0 14px currentColor; } }
@keyframes effect-shimmer { 0% { background-position: -200%; } 100% { background-position: 200%; } }
@keyframes effect-fire-intense { 0% { text-shadow: 0 -5px 15px #ff0, 0 -10px 30px #f80, 0 -15px 40px #f00; transform: scale(1); } 100% { text-shadow: 0 -10px 25px #ff0, 0 -15px 40px #f80, 0 -20px 50px #f00; transform: scale(1.02); } }
@keyframes effect-plasma { 0%, 100% { text-shadow: 0 0 10px #e040fb, 0 0 20px #7c4dff; } 50% { text-shadow: 0 0 20px #e040fb, 0 0 40px #7c4dff, 0 0 60px #ea80fc; } }
@keyframes effect-lava { 0%, 100% { text-shadow: 0 0 10px #ff5722, 0 5px 20px #ff9800; } 50% { text-shadow: 0 0 15px #ff5722, 0 10px 30px #ff9800, 0 15px 40px #e64a19; } }
@keyframes effect-nature { 0%, 100% { text-shadow: 0 0 10px #8bc34a; } 50% { text-shadow: 0 0 15px #8bc34a, 0 0 25px #4caf50; } }
@keyframes effect-water { 0%, 100% { text-shadow: 0 0 10px #03a9f4; transform: translateY(0); } 50% { text-shadow: 0 0 20px #03a9f4, 0 0 30px #0288d1; transform: translateY(-2px); } }
@keyframes effect-shadow-pulse { 0%, 100% { text-shadow: 3px 3px 6px #000; } 50% { text-shadow: 5px 5px 10px #000, -2px -2px 4px rgba(0,0,0,0.5); } }
@keyframes effect-gold-shine { 0%, 100% { text-shadow: 0 0 5px rgba(255,215,0,0.5); } 50% { text-shadow: 0 0 15px rgba(255,215,0,0.8), 0 0 25px rgba(255,215,0,0.4); } }
@keyframes effect-neon-blue { 0% { text-shadow: 0 0 5px #fff, 0 0 10px #00f; } 100% { text-shadow: 0 0 10px #fff, 0 0 20px #00f, 0 0 30px #00f; } }
@keyframes effect-neon-green { 0% { text-shadow: 0 0 5px #fff, 0 0 10px #0f0; } 100% { text-shadow: 0 0 10px #fff, 0 0 20px #0f0, 0 0 30px #0f0; } }
@keyframes effect-neon-pink { 0% { text-shadow: 0 0 5px #fff, 0 0 10px #ff1493; } 100% { text-shadow: 0 0 10px #fff, 0 0 20px #ff1493, 0 0 30px #ff1493; } }
@keyframes effect-cyberpunk { 0%, 100% { color: #0ff; text-shadow: 0 0 10px #0ff; } 50% { color: #f0f; text-shadow: 0 0 10px #f0f; } }
@keyframes effect-retro { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes effect-glitch { 0% { transform: translate(0); } 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, -1px); } 100% { transform: translate(0); } }
@keyframes typewriter-blink { 0%, 50% { border-color: currentColor; } 51%, 100% { border-color: transparent; } }
@keyframes effect-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes effect-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes effect-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes effect-pulse-grow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes effect-wave { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
/* New keyframes */
@keyframes effect-glow-rainbow { 0% { text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; } 16% { text-shadow: 0 0 10px #ff8000, 0 0 20px #ff8000; } 33% { text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00; } 50% { text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; } 66% { text-shadow: 0 0 10px #0080ff, 0 0 20px #0080ff; } 83% { text-shadow: 0 0 10px #8000ff, 0 0 20px #8000ff; } 100% { text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; } }
@keyframes effect-disco { 0% { color: #ff0000; text-shadow: 0 0 10px #ff0000; } 25% { color: #00ff00; text-shadow: 0 0 10px #00ff00; } 50% { color: #0000ff; text-shadow: 0 0 10px #0000ff; } 75% { color: #ffff00; text-shadow: 0 0 10px #ffff00; } 100% { color: #ff0000; text-shadow: 0 0 10px #ff0000; } }
@keyframes effect-aurora { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } }
@keyframes effect-lightning { 0%, 100% { opacity: 1; text-shadow: 0 0 5px #fff, 0 0 15px #ffeb3b; } 10%, 30%, 50% { opacity: 0.4; } 20%, 40%, 60% { opacity: 1; text-shadow: 0 0 15px #fff, 0 0 30px #ffeb3b, 0 0 45px #ffc107; } }
@keyframes effect-cosmic { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@keyframes effect-spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
@keyframes effect-swing { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(15deg); } 75% { transform: rotate(-15deg); } }
@keyframes effect-jello { 0%, 100% { transform: scale(1); } 25% { transform: scale(0.9, 1.1); } 50% { transform: scale(1.1, 0.9); } 75% { transform: scale(0.95, 1.05); } }
@keyframes effect-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } }
@keyframes effect-tada { 0%, 100% { transform: scale(1) rotate(0); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } }
@keyframes effect-matrix-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.95; } }
@keyframes effect-hologram { 0%, 100% { text-shadow: 2px 2px 0 #ff00ff, -2px -2px 0 #00ff00; opacity: 0.9; } 50% { text-shadow: -2px 2px 0 #00ff00, 2px -2px 0 #ff00ff; opacity: 1; } }
@keyframes effect-vaporwave { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

/* =============================================================================
   BLURB EFFECTS
   ============================================================================= */

.blurb-effect-glow { animation: effect-glow-soft 2s infinite ease-in-out; }
.blurb-effect-fade { animation: blurb-fade 3s infinite ease-in-out; }
.blurb-effect-typing { border-right: 1px solid currentColor; animation: typewriter-blink 0.7s infinite; }
.blurb-effect-scroll { animation: blurb-scroll 10s linear infinite; }

@keyframes blurb-fade { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes blurb-scroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

/* =============================================================================
   BUBBLE STYLES
   ============================================================================= */

/* For community chat .message-content elements only */
/* Floating chat uses inline styles set by JS */
.message-content.bubble-style-glossy { background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }
.message-content.bubble-style-glass { background: rgba(255,255,255,0.05)!important; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15)!important; }
.message-content.bubble-style-gradient { border: 2px solid transparent; background-clip: padding-box; }
/* Neon style is handled in community.css for proper border-radius glow */
.message-content.bubble-style-neon { border-width: 2px; }

/* =============================================================================
   AVATAR STYLES - SHAPES & ANIMATIONS
   ============================================================================= */

/* Base avatar border color - all avatars should use this */
[class*="avatar-style-"] { border-color: var(--av-color, #333)!important; }

.avatar-style-none { border: none!important; }
.avatar-style-solid { border-style: solid!important; border-width: 3px!important; border-color: var(--av-color)!important; }
.avatar-style-double { border-style: double!important; border-width: 4px!important; border-color: var(--av-color)!important; }
.avatar-style-dashed { border-style: dashed!important; border-width: 2px!important; border-color: var(--av-color)!important; }
.avatar-style-glow { border-style: solid!important; border-width: 3px!important; border-color: var(--av-color)!important; box-shadow: 0 0 10px var(--av-color), 0 0 20px var(--av-color); }
.avatar-style-pulse { border-style: solid!important; animation: avatar-pulse 2s infinite ease-in-out; }
.avatar-style-runic { border-style: double!important; border-width: 4px!important; box-shadow: 0 0 0 2px #000, 0 0 10px var(--av-color); }
.avatar-style-gold-leaf { border: 3px solid transparent!important; background: linear-gradient(#111, #111) padding-box, linear-gradient(45deg, #ffd700, #fff, #aa9d56) border-box; }
.avatar-style-diamond { border: 3px solid transparent!important; background: linear-gradient(#111, #111) padding-box, linear-gradient(135deg, #b3e5fc, #fff, #01579b) border-box; box-shadow: 0 0 15px rgba(179,229,252,0.5); }
.avatar-style-neon { border: 2px solid #fff!important; box-shadow: 0 0 5px #fff, 0 0 10px var(--av-color), 0 0 20px var(--av-color); }
.avatar-style-ember { border: 2px solid #ff5722!important; box-shadow: 0 0 10px #ff5722, inset 0 0 10px #ff5722; animation: pulse-red-glow 2s infinite; }
.avatar-style-plasma { border: 2px solid #b388ff!important; box-shadow: 0 0 10px #b388ff, 0 0 20px #651fff; }
.avatar-style-galaxy { border: 2px solid transparent!important; background: linear-gradient(#111,#111) padding-box, linear-gradient(45deg, #f0f, #0ff, #f0f) border-box; animation: runic-rotation 4s linear infinite; }
.avatar-style-circuit { border: 2px dashed #0ff!important; box-shadow: 0 0 5px #0ff; }
.avatar-style-hexagon { border-radius: 10px!important; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border: 3px solid var(--av-color)!important; }
.avatar-style-spirit { opacity: 0.7; filter: grayscale(100%) drop-shadow(0 0 5px var(--av-color)); border: none!important; }
.avatar-style-spin { border-top: 3px solid var(--av-color)!important; border-bottom: 3px solid var(--av-color)!important; border-left: 3px solid transparent!important; border-right: 3px solid transparent!important; animation: runic-rotation 3s linear infinite; }
.avatar-style-portal { border: 4px solid transparent!important; background: linear-gradient(#000,#000) padding-box, conic-gradient(from 0deg, var(--av-color), transparent, var(--av-color)) border-box; animation: runic-rotation 2s linear infinite; border-radius: 50%; }

@keyframes runic-rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* =============================================================================
   STYLE STUDIO MODAL
   ============================================================================= */

.style-studio-grid { display: grid; grid-template-columns: 1fr 280px; gap: 0; min-height: 600px; height: 100%; }
@media (max-width: 1200px) { .style-studio-grid { grid-template-columns: 1fr; } }
.studio-controls { background: #0a0a0a; padding: 20px; border-right: 1px solid #222; overflow-y: auto; max-height: 80vh; }
.studio-preview-panel { background: radial-gradient(circle at center, #1a1a1a, #050505); padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; }
.preview-sticky { position: sticky; top: 10px; width: 100%; max-width: 260px; display: flex; flex-direction: column; align-items: center; }

.section-title { font-size: 0.8rem; color: #666; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; margin-bottom: 15px; border-bottom: 1px solid #222; padding-bottom: 5px; width: 100%; }
.section-title.collapsible { cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: color 0.2s; }
.section-title.collapsible:hover { color: #888; }
.section-title.collapsible::after { content: 'â–¼'; font-size: 0.6rem; transition: transform 0.3s; }
.section-title.collapsible.collapsed::after { transform: rotate(-90deg); }
.studio-section.collapsed .effects-grid, .studio-section.collapsed .avatar-style-grid, .studio-section.collapsed .studio-row, .studio-section.collapsed .gradient-options { display: none; }
.studio-row { display: flex; gap: 15px; margin-bottom: 20px; width: 100%; }
.studio-color-picker { width: 100%; height: 40px; border: none; background: transparent; cursor: pointer; padding: 0; }
.studio-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.studio-color-picker::-webkit-color-swatch { border: 1px solid #444; border-radius: 6px; }

/* Identity Tab Row Layout */
.identity-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-left: 2px;
}
.identity-section-label:not(:first-child) {
    margin-top: 20px;
}
.identity-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 8px;
}
.identity-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.identity-item.flex-grow {
    flex: 1;
    min-width: 120px;
}
.identity-item.color-item {
    width: 60px;
    flex-shrink: 0;
}
.identity-item label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
}
.identity-item .style-input,
.identity-item .style-select {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #333;
    background: #111;
    color: #fff;
    font-size: 0.85rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.identity-item .style-input:focus,
.identity-item .style-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
}
.identity-item .studio-color-picker {
    height: 38px;
    border-radius: 6px;
    overflow: hidden;
}
@media (max-width: 500px) {
    .identity-row {
        flex-wrap: wrap;
    }
    .identity-item.flex-grow {
        flex: 1 1 100%;
    }
    .identity-item.color-item {
        width: 50px;
    }
}

.effects-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 25px; }
.effects-grid.large { grid-template-columns: repeat(5, 1fr); }
.effect-category-label { grid-column: 1 / -1; font-size: 0.65rem; color: #555; text-transform: uppercase; font-weight: 700; margin: 10px 0 5px 0; padding-left: 5px; border-left: 2px solid var(--accent); }
.effect-option { background: #111; border: 1px solid #333; padding: 8px 4px; text-align: center; font-size: 0.7rem; cursor: pointer; border-radius: 6px; transition: 0.2s; color: #888; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.effect-option:hover { background: #1a1a1a; color: #fff; border-color: #555; }
.effect-option.selected { background: #222; border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px rgba(255,152,0,0.1); }
.effect-option.legendary { border-color: #9966cc; background: linear-gradient(135deg, #111, #1a1a2a); }
.effect-option.legendary.selected { border-color: #da70d6; box-shadow: 0 0 15px rgba(218,112,214,0.3); }

.avatar-style-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 25px; }
.av-opt { background: #111; border: 1px solid #333; padding: 6px 2px; text-align: center; font-size: 0.65rem; cursor: pointer; border-radius: 6px; transition: 0.2s; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-opt:hover { color: #fff; border-color: #555; }
.av-opt.selected { border-color: var(--accent); color: var(--accent); background: #222; }
.av-opt.legendary { border-color: #9966cc; background: linear-gradient(135deg, #111, #1a1a2a); }
.av-opt.legendary.selected { border-color: #da70d6; box-shadow: 0 0 10px rgba(218,112,214,0.2); }

.avatar-style-grid .effect-category-label { grid-column: 1 / -1; font-size: 0.6rem; color: #555; text-transform: uppercase; font-weight: 700; margin: 8px 0 4px 0; padding-left: 5px; border-left: 2px solid var(--accent); }

.preview-box { width: 100%; background: #111; border: 1px solid #333; border-radius: 12px; padding: 15px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 10px 40px rgba(0,0,0,0.5); min-height: 180px; }
.preview-name-row { margin-bottom: 10px; text-align: center; }
.preview-chat-area { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: 0.85rem; }

/* =============================================================================
   DASHBOARD IMAGES
   ============================================================================= */

.icon-img { width: 32px; height: 32px; object-fit: contain; opacity: 0.9; animation: float 3s ease-in-out infinite; }
.pill-icon { width: 55px; height: 55px; object-fit: contain; filter: drop-shadow(0 0 4px rgba(0,0,0,0.6)); }
.special-img { width: 55px; height: 55px; object-fit: contain; animation: popIn 0.5s; }
#feat-special-img { width: 100%; max-width: 140px; height: auto; object-fit: contain; filter: drop-shadow(0 0 15px rgba(255,51,51,0.4)); animation: float 4s ease-in-out infinite; }
.achievement-grid .ach-item img { width: 100%; height: 100%; object-fit: contain; }
.skill-icon-lg { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.clan-table img { width: 14px; vertical-align: middle; }
.stat-pill img { width: 16px; height: 16px; object-fit: contain; }
.log-icon { width: 50px; height: 50px; object-fit: contain; flex-shrink: 0; border-radius: 4px; background: #000; padding: 2px; border: 1px solid #333; }

.podium-header img { width: 24px; height: 24px; object-fit: contain; }
.merch-item-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vos-img { width: 20px; height: 20px; object-fit: contain; }
.task-icon { width: 36px; height: 36px; object-fit: contain; margin-right: 12px; flex-shrink: 0; }
.p-avatar { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--accent); object-fit: cover; flex-shrink: 0; }

/* =============================================================================
   APPEARANCE MODAL IMAGE SIZING
   ============================================================================= */

#style-preview-container .avatar-preview-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background: #000;
}

/* =============================================================================
   USERNAME GLOW EFFECT FIXES
   ============================================================================= */

/* Ensure glow effects display properly without clipping */
.profile-link-btn,
.clickable-username {
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* The inner span with the effect class needs overflow visible too */
.profile-link-btn > span[class*="name-effect-"],
.clickable-username > span[class*="name-effect-"],
[class*="name-effect-"] {
    overflow: visible !important;
    padding: 4px 8px;
    margin: -4px -8px;
}

/* Ensure thread modal content allows glow overflow */
.thread-modal-body .profile-link-btn,
.thread-modal-body .clickable-username,
.thread-detail .profile-link-btn,
.nested-reply-item .profile-link-btn,
.reply-item .profile-link-btn {
    overflow: visible !important;
}

/* Parent containers need overflow visible for glow to show */
.reply-author,
.thread-detail-meta,
.nested-reply-item,
.reply-item,
.suggestion-author,
.user-name-large,
.header-info,
.card-header {
    overflow: visible !important;
}

/* Fix for flex containers with min-width:0 clipping glow */
.header-info > div,
.card-header > div,
.thread-detail-header > div {
    overflow: visible !important;
}

/* =============================================================================
   SUPPORTER TIER BADGES - Animated Donation Tier System
   ============================================================================= */

/* Common badge styles */
.supporter-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.4;
    vertical-align: middle;
    position: relative;
}

/* =========================================================================
   Tier 1: Adventurer ($5)
   SPARKLE: 1 slow golden sparkle that orbits the border — gentle twinkle
   ========================================================================= */
.supporter-badge.tier-adventurer {
    background: linear-gradient(160deg, #6b4f1d 0%, #b8913a 40%, #9a7528 60%, #6b4f1d 100%);
    color: #ffe8c0;
    border: 1px solid rgba(184, 145, 58, 0.45);
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
    animation: adventurer-border 3.5s ease-in-out infinite;
    overflow: hidden;
}

/* Single orbiting sparkle dot */
.supporter-badge.tier-adventurer::after {
    content: '';
    position: absolute;
    width: 3px; height: 3px;
    background: #ffd97a;
    border-radius: 50%;
    box-shadow: 0 0 4px 1px rgba(255, 217, 122, 0.8);
    animation: sparkle-orbit-1 4s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes adventurer-border {
    0%, 100% { border-color: rgba(184, 145, 58, 0.35); }
    50% { border-color: rgba(210, 175, 80, 0.7); }
}

/* Single dot orbits: top-right → right → bottom-right → bottom-left → left → top-left */
@keyframes sparkle-orbit-1 {
    0%   { top: -1px; left: 25%; opacity: 0; }
    5%   { opacity: 1; }
    12%  { top: -1px; left: 75%; }
    25%  { top: 30%; left: calc(100% - 1px); }
    37%  { top: calc(100% - 1px); left: 75%; }
    50%  { top: calc(100% - 1px); left: 25%; opacity: 1; }
    62%  { top: 30%; left: -1px; }
    75%  { top: -1px; left: 25%; }
    85%  { opacity: 1; }
    95%  { opacity: 0; }
    100% { top: -1px; left: 25%; opacity: 0; }
}

/* =========================================================================
   Tier 2: Mystic ($15)
   SPARKLE: 2 purple sparkles orbiting in opposite directions + glow pulse
   ========================================================================= */
.supporter-badge.tier-mystic {
    background: linear-gradient(150deg, #3d1166 0%, #6a2c9e 50%, #3d1166 100%);
    color: #e8d0ff;
    border: 1px solid rgba(160, 90, 220, 0.4);
    text-shadow: 0 0 6px rgba(170, 100, 230, 0.65);
    box-shadow: 0 0 8px rgba(120, 50, 180, 0.25);
    animation: mystic-glow-pulse 3s ease-in-out infinite;
    overflow: visible;
}

/* Sparkle 1 — orbits clockwise */
.supporter-badge.tier-mystic::before {
    content: '';
    position: absolute;
    width: 3px; height: 3px;
    background: #d4a0ff;
    border-radius: 50%;
    box-shadow: 0 0 5px 2px rgba(212, 160, 255, 0.9), 0 0 10px 3px rgba(170, 100, 230, 0.4);
    animation: sparkle-orbit-cw 3s linear infinite;
    pointer-events: none;
    z-index: 2;
}

/* Sparkle 2 — orbits counter-clockwise */
.supporter-badge.tier-mystic::after {
    content: '';
    position: absolute;
    width: 2.5px; height: 2.5px;
    background: #c080ff;
    border-radius: 50%;
    box-shadow: 0 0 4px 1px rgba(192, 128, 255, 0.8);
    animation: sparkle-orbit-ccw 3.5s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes mystic-glow-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(120, 50, 180, 0.25); }
    50% { box-shadow: 0 0 14px rgba(160, 80, 220, 0.45), 0 0 4px rgba(200, 140, 255, 0.2); }
}

@keyframes sparkle-orbit-cw {
    0%   { top: -2px; left: 20%; }
    15%  { top: -2px; left: 80%; }
    30%  { top: 40%; left: calc(100% + 1px); }
    45%  { top: calc(100% + 1px); left: 80%; }
    60%  { top: calc(100% + 1px); left: 20%; }
    75%  { top: 40%; left: -2px; }
    100% { top: -2px; left: 20%; }
}

@keyframes sparkle-orbit-ccw {
    0%   { top: calc(100% + 1px); left: 80%; }
    15%  { top: calc(100% + 1px); left: 20%; }
    30%  { top: 40%; left: -2px; }
    45%  { top: -2px; left: 20%; }
    60%  { top: -2px; left: 80%; }
    75%  { top: 40%; left: calc(100% + 1px); }
    100% { top: calc(100% + 1px); left: 80%; }
}

/* =========================================================================
   Tier 3: Dragonkin ($30)
   SPARKLE: 3 fiery ember sparkles that pop up randomly around the border
   with a flickering, crackling feel — like sparks flying off hot metal
   ========================================================================= */
.supporter-badge.tier-dragonkin {
    background: linear-gradient(135deg, #7a1500, #c03000, #e06000, #c03000, #7a1500);
    background-size: 300% 100%;
    color: #ffe4cc;
    border: 1px solid rgba(255, 100, 0, 0.55);
    text-shadow: 0 0 6px rgba(255, 120, 0, 0.9), 0 0 12px rgba(255, 60, 0, 0.4);
    box-shadow: 0 0 6px rgba(255, 50, 0, 0.3), inset 0 0 6px rgba(255, 120, 0, 0.1);
    animation: dragonkin-flicker 0.15s steps(2) infinite, dragonkin-glow 1.2s ease-in-out infinite alternate;
    overflow: visible;
}

/* Ember sparkle 1 — pops at different border spots */
.supporter-badge.tier-dragonkin::before {
    content: '';
    position: absolute;
    width: 3px; height: 3px;
    background: #ffcc00;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px rgba(255, 180, 0, 0.9), 0 0 12px 3px rgba(255, 100, 0, 0.5);
    animation: ember-pop-1 1.8s steps(1) infinite;
    pointer-events: none;
    z-index: 2;
}

/* Ember sparkle 2 + 3 combined via box-shadow */
.supporter-badge.tier-dragonkin::after {
    content: '';
    position: absolute;
    width: 2px; height: 2px;
    background: transparent;
    border-radius: 50%;
    animation: ember-pop-2 1.4s steps(1) infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes dragonkin-flicker {
    0% { background-position: 0% 50%; filter: brightness(1); }
    50% { background-position: 15% 50%; filter: brightness(1.15); }
    100% { background-position: 0% 50%; filter: brightness(0.95); }
}

@keyframes dragonkin-glow {
    from { box-shadow: 0 0 6px rgba(255, 50, 0, 0.3), inset 0 0 6px rgba(255, 120, 0, 0.1); }
    to { box-shadow: 0 0 16px rgba(255, 70, 0, 0.55), 0 0 3px rgba(255, 200, 50, 0.3), inset 0 0 10px rgba(255, 150, 0, 0.2); }
}

/* Sparkle 1 jumps to random border spots and flashes */
@keyframes ember-pop-1 {
    0%        { top: -3px; left: 30%; opacity: 1; box-shadow: 0 0 6px 2px rgba(255, 180, 0, 0.9), 0 0 12px 3px rgba(255, 100, 0, 0.5); }
    14%       { top: -3px; left: 30%; opacity: 0; }
    15%       { top: calc(100% + 1px); left: 65%; opacity: 1; }
    28%       { opacity: 0; }
    29%       { top: 20%; left: calc(100% + 1px); opacity: 1; }
    42%       { opacity: 0; }
    43%       { top: -3px; left: 70%; opacity: 1; }
    56%       { opacity: 0; }
    57%       { top: calc(100% + 1px); left: 20%; opacity: 1; }
    70%       { opacity: 0; }
    71%       { top: 60%; left: -3px; opacity: 1; }
    84%       { opacity: 0; }
    85%       { top: -3px; left: 50%; opacity: 1; }
    100%      { top: -3px; left: 50%; opacity: 0; }
}

/* Sparkles 2 & 3 as dual box-shadow dots that jump around */
@keyframes ember-pop-2 {
    0%   { top: 50%; left: calc(100% + 2px); box-shadow: 0 0 5px 2px rgba(255, 200, 50, 0.9), -20px -12px 5px 1px rgba(255, 120, 0, 0.8); }
    16%  { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
    17%  { top: -3px; left: 45%; box-shadow: 0 0 5px 2px rgba(255, 160, 0, 0.9), 15px 14px 4px 1px rgba(255, 220, 50, 0.8); }
    33%  { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
    34%  { top: calc(100% + 2px); left: 40%; box-shadow: 0 0 5px 2px rgba(255, 200, 50, 0.9), 25px -10px 4px 1px rgba(255, 100, 0, 0.8); }
    50%  { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
    51%  { top: 30%; left: -3px; box-shadow: 0 0 5px 2px rgba(255, 140, 0, 0.9), 20px 8px 4px 1px rgba(255, 200, 50, 0.8); }
    67%  { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
    68%  { top: -3px; left: 80%; box-shadow: 0 0 5px 2px rgba(255, 180, 0, 0.9), -15px 12px 4px 1px rgba(255, 100, 0, 0.8); }
    84%  { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
    85%  { top: calc(100% + 2px); left: 70%; box-shadow: 0 0 5px 2px rgba(255, 220, 50, 0.9), -20px -8px 4px 1px rgba(255, 160, 0, 0.8); }
    100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
}

/* =========================================================================
   Tier 4: Celestial ($50)
   Deep space badge with twinkling constellation stars around the border
   and a soft breathing nebula glow. No spinning elements.
   ========================================================================= */
.supporter-badge.tier-celestial {
    background: linear-gradient(160deg, #020c24 0%, #0a1e50 35%, #132d6b 50%, #0a1e50 65%, #020c24 100%);
    color: #c4dfff;
    border: 1px solid rgba(80, 150, 255, 0.35);
    text-shadow: 0 0 8px rgba(100, 180, 255, 0.9), 0 0 18px rgba(50, 120, 255, 0.4);
    box-shadow: 0 0 12px rgba(30, 80, 200, 0.35), 0 0 28px rgba(80, 150, 255, 0.1);
    animation: celestial-nebula 3s ease-in-out infinite;
    overflow: visible;
}

/* Star group A — twinkle at different rates */
.supporter-badge.tier-celestial::before {
    content: '';
    position: absolute;
    width: 2px; height: 2px;
    background: #fff;
    border-radius: 50%;
    top: -4px; left: 15%;
    box-shadow:
        20px -1px 4px 1px rgba(200, 230, 255, 0.9),
        45px 2px 3px 1px rgba(180, 220, 255, 0.85),
        58px 10px 4px 1px rgba(255, 255, 255, 0.8);
    animation: celestial-twinkle-a 2.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

/* Star group B — offset timing so they alternate with group A */
.supporter-badge.tier-celestial::after {
    content: '';
    position: absolute;
    width: 2px; height: 2px;
    background: #d0e8ff;
    border-radius: 50%;
    bottom: -4px; right: 15%;
    box-shadow:
        -20px -1px 4px 1px rgba(200, 230, 255, 0.9),
        -45px -2px 3px 1px rgba(180, 220, 255, 0.85),
        -58px -10px 4px 1px rgba(255, 255, 255, 0.8);
    animation: celestial-twinkle-b 2.5s ease-in-out infinite 1.25s;
    pointer-events: none;
    z-index: 2;
}

@keyframes celestial-nebula {
    0%, 100% { 
        box-shadow: 0 0 12px rgba(30, 80, 200, 0.35), 0 0 28px rgba(80, 150, 255, 0.1); 
        border-color: rgba(80, 150, 255, 0.25);
    }
    50% { 
        box-shadow: 0 0 20px rgba(30, 80, 200, 0.55), 0 0 40px rgba(80, 150, 255, 0.25), 0 0 8px rgba(200, 230, 255, 0.2); 
        border-color: rgba(120, 180, 255, 0.45);
    }
}

/* Stars brighten individually in sequence */
@keyframes celestial-twinkle-a {
    0%, 100% { 
        opacity: 0.3;
        box-shadow: 20px -1px 2px 0px rgba(200,230,255,0.3), 45px 2px 2px 0px rgba(180,220,255,0.3), 58px 10px 2px 0px rgba(255,255,255,0.3);
    }
    33% { 
        opacity: 1;
        box-shadow: 20px -1px 6px 2px rgba(200,230,255,1), 45px 2px 2px 0px rgba(180,220,255,0.4), 58px 10px 2px 0px rgba(255,255,255,0.3);
    }
    66% { 
        opacity: 0.7;
        box-shadow: 20px -1px 3px 1px rgba(200,230,255,0.5), 45px 2px 6px 2px rgba(180,220,255,1), 58px 10px 6px 2px rgba(255,255,255,1);
    }
}

@keyframes celestial-twinkle-b {
    0%, 100% { 
        opacity: 0.3;
        box-shadow: -20px -1px 2px 0px rgba(200,230,255,0.3), -45px -2px 2px 0px rgba(180,220,255,0.3), -58px -10px 2px 0px rgba(255,255,255,0.3);
    }
    33% { 
        opacity: 1;
        box-shadow: -20px -1px 6px 2px rgba(200,230,255,1), -45px -2px 2px 0px rgba(180,220,255,0.4), -58px -10px 2px 0px rgba(255,255,255,0.3);
    }
    66% { 
        opacity: 0.7;
        box-shadow: -20px -1px 3px 1px rgba(200,230,255,0.5), -45px -2px 6px 2px rgba(180,220,255,1), -58px -10px 6px 2px rgba(255,255,255,1);
    }
}

/* =========================================================================
   Tier 5: Immortal ($100)
   Rainbow border that slowly rotates around the badge. Clean, visible
   rainbow outline using a conic-gradient with a mask to cut out the
   center, leaving only the border ring visible.
   ========================================================================= */
.supporter-badge.tier-immortal {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    color: #ffffff;
    border: 2px solid transparent;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 10px rgba(255, 100, 200, 0.3), 0 0 20px rgba(100, 200, 255, 0.2);
    animation: immortal-glow 2s ease-in-out infinite, immortal-rotate 5s linear infinite;
    overflow: visible;
    /* Rainbow border via background-image on padding area */
    background-image: 
        linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%),
        conic-gradient(
            from var(--immortal-angle, 0deg),
            #ff0040, #ff8800, #ffe600, #00ff66, 
            #00ccff, #7b2fff, #ff00aa, #ff0040
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Outer soft rainbow glow ring — slightly larger, blurred */
.supporter-badge.tier-immortal::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    background: conic-gradient(
        from var(--immortal-angle, 0deg),
        #ff0040, #ff8800, #ffe600, #00ff66, 
        #00ccff, #7b2fff, #ff00aa, #ff0040
    );
    filter: blur(6px);
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
}


@keyframes immortal-glow {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(255, 100, 200, 0.3), 0 0 20px rgba(100, 200, 255, 0.2);
    }
    50% { 
        box-shadow: 0 0 16px rgba(255, 100, 200, 0.5), 0 0 30px rgba(100, 200, 255, 0.35), 0 0 6px rgba(255, 255, 255, 0.25);
    }
}


/* =============================================================================
   SUPPORTER BADGE IN DIFFERENT CONTEXTS
   ============================================================================= */

/* In online users modal - next to username */
.online-user-card .supporter-badge {
    margin-left: 4px;
    font-size: 0.58rem;
    padding: 0px 5px;
}

/* In chat messages - next to username */
.chat-username .supporter-badge,
.floating-chat-username .supporter-badge,
.msg-author .supporter-badge {
    margin-left: 4px;
    font-size: 0.55rem;
    padding: 0px 5px;
}

/* In user directory cards — compact so it doesn't dominate the name */
.ud-user-card .supporter-badge {
    margin-top: 0;
    font-size: 0.6rem;
    padding: 1px 5px;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Supporter tier borders on user directory cards */
.ud-user-card.ud-tier-adventurer {
    border-color: rgba(184, 145, 58, 0.45);
    box-shadow: 0 0 4px rgba(184, 145, 58, 0.15);
}
.ud-user-card.ud-tier-adventurer:hover {
    border-color: rgba(210, 175, 80, 0.7);
    box-shadow: 0 0 8px rgba(184, 145, 58, 0.3);
}

.ud-user-card.ud-tier-mystic {
    border-color: rgba(160, 90, 220, 0.4);
    box-shadow: 0 0 4px rgba(120, 50, 180, 0.15);
}
.ud-user-card.ud-tier-mystic:hover {
    border-color: rgba(160, 90, 220, 0.7);
    box-shadow: 0 0 8px rgba(120, 50, 180, 0.3);
}

.ud-user-card.ud-tier-dragonkin {
    border-color: rgba(255, 100, 0, 0.45);
    box-shadow: 0 0 4px rgba(255, 50, 0, 0.15);
}
.ud-user-card.ud-tier-dragonkin:hover {
    border-color: rgba(255, 100, 0, 0.7);
    box-shadow: 0 0 8px rgba(255, 50, 0, 0.3);
}

.ud-user-card.ud-tier-celestial {
    border-color: rgba(80, 150, 255, 0.35);
    box-shadow: 0 0 4px rgba(30, 80, 200, 0.15);
}
.ud-user-card.ud-tier-celestial:hover {
    border-color: rgba(80, 150, 255, 0.6);
    box-shadow: 0 0 8px rgba(30, 80, 200, 0.3);
}

.ud-user-card.ud-tier-immortal {
    border: 2px solid transparent;
    background-image:
        linear-gradient(var(--bg-card), var(--bg-card)),
        conic-gradient(from var(--immortal-angle, 0deg), #ff0040, #ff8800, #ffe600, #00ff66, #00ccff, #7b2fff, #ff00aa, #ff0040);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: immortal-rotate 5s linear infinite;
}
.ud-user-card.ud-tier-immortal:hover {
    box-shadow: 0 0 12px rgba(255, 100, 200, 0.25), 0 0 6px rgba(100, 200, 255, 0.2);
}

@keyframes ud-immortal-rotate {
    0% { background-image: linear-gradient(var(--bg-card), var(--bg-card)), conic-gradient(from 0deg, #ff0040, #ff8800, #ffe600, #00ff66, #00ccff, #7b2fff, #ff00aa, #ff0040); }
    25% { background-image: linear-gradient(var(--bg-card), var(--bg-card)), conic-gradient(from 90deg, #ff0040, #ff8800, #ffe600, #00ff66, #00ccff, #7b2fff, #ff00aa, #ff0040); }
    50% { background-image: linear-gradient(var(--bg-card), var(--bg-card)), conic-gradient(from 180deg, #ff0040, #ff8800, #ffe600, #00ff66, #00ccff, #7b2fff, #ff00aa, #ff0040); }
    75% { background-image: linear-gradient(var(--bg-card), var(--bg-card)), conic-gradient(from 270deg, #ff0040, #ff8800, #ffe600, #00ff66, #00ccff, #7b2fff, #ff00aa, #ff0040); }
    100% { background-image: linear-gradient(var(--bg-card), var(--bg-card)), conic-gradient(from 360deg, #ff0040, #ff8800, #ffe600, #00ff66, #00ccff, #7b2fff, #ff00aa, #ff0040); }
}

/* In profile header */
.profile-supporter-badge {
    display: inline-flex;
    margin-top: 4px;
}

.profile-supporter-badge .supporter-badge {
    font-size: 0.72rem;
    padding: 2px 10px;
}

/* =============================================================================
   SUPPORTER CATEGORY IN ONLINE MODAL
   ============================================================================= */

.online-list-category.supporter-category {
    background: linear-gradient(135deg, rgba(255, 180, 50, 0.04), rgba(200, 160, 80, 0.03));
    border-radius: 12px;
    padding: 2px 0;
    margin: 4px 0;
    border: 1px solid rgba(255, 180, 50, 0.1);
}

.online-list-category.supporter-category .online-list-category-header {
    background: linear-gradient(135deg, rgba(255, 180, 50, 0.1), rgba(200, 160, 80, 0.06));
    border-bottom: 1px solid rgba(255, 180, 50, 0.1);
    border-radius: 12px 12px 0 0;
    padding: 10px 14px;
    color: #d4a843;
}

.online-list-category.supporter-category .online-list-category-header .category-label {
    color: #d4a843;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.online-list-category.supporter-category .online-list-category-header .category-count {
    background: rgba(255, 180, 50, 0.15);
    color: #d4a843;
    border: 1px solid rgba(255, 180, 50, 0.2);
}

.online-list-category.supporter-category .category-icon {
    animation: supporter-icon-pulse 2s ease-in-out infinite;
}

.online-list-category.supporter-category .online-list-category-users {
    padding: 6px 4px 8px;
}

@keyframes supporter-icon-pulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.15); filter: brightness(1.4) drop-shadow(0 0 4px rgba(255, 180, 50, 0.4)); }
}

/* =============================================================================
   SUPPORTER TIER-THEMED ONLINE USER CARDS
   Applies to: .online-user-item (suggestions sidebar),
               .online-user-card (presence modal),
               .floating-chat-online-user (floating chat panel)
   ============================================================================= */

/* ── Shared: all supporter cards get relative positioning for pseudo-elements ── */
[class*="supporter-card-"] {
    position: relative;
    overflow: visible;
    z-index: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Tier 1: Adventurer ($5) — Molten gold card with liquid-metal shimmer
   Full gold border that pulses, heated-metal gradient sweeps across card
   ───────────────────────────────────────────────────────────────────────────── */
@property --adventurer-sweep {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.supporter-card-adventurer {
    border: 1px solid rgba(210, 175, 80, 0.6) !important;
    border-left: 3px solid rgba(230, 195, 90, 0.9) !important;
    background:
        linear-gradient(
            var(--adventurer-sweep),
            transparent 0%,
            rgba(255, 215, 100, 0.08) 20%,
            rgba(184, 145, 58, 0.14) 40%,
            rgba(255, 200, 60, 0.08) 60%,
            transparent 80%
        ),
        linear-gradient(135deg, rgba(50, 40, 15, 0.5) 0%, rgba(30, 25, 10, 0.3) 100%) !important;
    box-shadow:
        inset 0 0 20px rgba(184, 145, 58, 0.12),
        0 0 12px rgba(184, 145, 58, 0.15),
        0 0 4px rgba(255, 200, 80, 0.08);
    animation: adventurer-card-sweep 4s linear infinite, adventurer-card-pulse 2.5s ease-in-out infinite;
}

.supporter-card-adventurer:hover {
    border-color: rgba(240, 210, 100, 0.8) !important;
    border-left-color: rgba(255, 225, 120, 1) !important;
    box-shadow:
        inset 0 0 28px rgba(184, 145, 58, 0.2),
        0 0 20px rgba(184, 145, 58, 0.3),
        0 0 8px rgba(255, 220, 100, 0.2);
}

/* Warm gold outer glow */
.supporter-card-adventurer::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: radial-gradient(ellipse at 20% 50%, rgba(184, 145, 58, 0.25), transparent 60%);
    filter: blur(6px);
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
    animation: adventurer-glow-shift 3s ease-in-out infinite alternate;
}

.supporter-card-adventurer:hover::before {
    opacity: 0.8;
    filter: blur(8px);
}

@keyframes adventurer-card-sweep {
    from { --adventurer-sweep: 0deg; }
    to   { --adventurer-sweep: 360deg; }
}

@keyframes adventurer-card-pulse {
    0%, 100% {
        box-shadow: inset 0 0 20px rgba(184, 145, 58, 0.12), 0 0 12px rgba(184, 145, 58, 0.15), 0 0 4px rgba(255, 200, 80, 0.08);
        border-left-color: rgba(230, 195, 90, 0.85);
    }
    50% {
        box-shadow: inset 0 0 30px rgba(184, 145, 58, 0.2), 0 0 18px rgba(184, 145, 58, 0.25), 0 0 6px rgba(255, 220, 100, 0.15);
        border-left-color: rgba(255, 225, 120, 1);
    }
}

@keyframes adventurer-glow-shift {
    0%   { background: radial-gradient(ellipse at 15% 50%, rgba(184, 145, 58, 0.25), transparent 55%); }
    100% { background: radial-gradient(ellipse at 85% 50%, rgba(210, 175, 80, 0.2), transparent 55%); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Tier 2: Mystic ($15) — Arcane rift card with swirling purple energy vortex
   Rotating conic gradient border, pulsing inner sigil glow
   ───────────────────────────────────────────────────────────────────────────── */
@property --mystic-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.supporter-card-mystic {
    border: 1px solid transparent !important;
    border-left: 3px solid rgba(160, 100, 230, 0.85) !important;
    background-image:
        linear-gradient(135deg, rgba(30, 15, 50, 0.85), rgba(20, 10, 35, 0.9)),
        conic-gradient(
            from var(--mystic-angle),
            rgba(140, 80, 210, 0.7),
            rgba(100, 40, 180, 0.2),
            rgba(200, 160, 255, 0.6),
            rgba(100, 40, 180, 0.2),
            rgba(140, 80, 210, 0.7)
        ) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    box-shadow:
        inset 0 0 22px rgba(120, 50, 180, 0.12),
        0 0 14px rgba(120, 50, 180, 0.18),
        0 0 4px rgba(200, 160, 255, 0.08);
    animation: mystic-card-rotate 6s linear infinite, mystic-card-pulse 3s ease-in-out infinite;
}

.supporter-card-mystic:hover {
    box-shadow:
        inset 0 0 30px rgba(120, 50, 180, 0.2),
        0 0 24px rgba(120, 50, 180, 0.3),
        0 0 10px rgba(200, 160, 255, 0.15) !important;
}

/* Mystic outer aura — purple energy bleed */
.supporter-card-mystic::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--mystic-angle),
        rgba(140, 80, 210, 0.3),
        transparent,
        rgba(200, 160, 255, 0.25),
        transparent,
        rgba(140, 80, 210, 0.3)
    );
    filter: blur(8px);
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
    animation: mystic-card-rotate 6s linear infinite;
}

.supporter-card-mystic:hover::before {
    opacity: 0.65;
    filter: blur(10px);
}

@keyframes mystic-card-rotate {
    from { --mystic-angle: 0deg; }
    to   { --mystic-angle: 360deg; }
}

@keyframes mystic-card-pulse {
    0%, 100% {
        box-shadow: inset 0 0 22px rgba(120, 50, 180, 0.12), 0 0 14px rgba(120, 50, 180, 0.18), 0 0 4px rgba(200, 160, 255, 0.08);
    }
    50% {
        box-shadow: inset 0 0 32px rgba(120, 50, 180, 0.2), 0 0 22px rgba(120, 50, 180, 0.28), 0 0 8px rgba(200, 160, 255, 0.15);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Tier 3: Dragonkin ($30) — Inferno card with blazing animated fire border,
   ember particles, and heat distortion glow
   ───────────────────────────────────────────────────────────────────────────── */
@property --dragonkin-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.supporter-card-dragonkin {
    border: 1px solid transparent !important;
    border-left: 3px solid rgba(255, 120, 20, 0.9) !important;
    background-image:
        linear-gradient(135deg, rgba(40, 10, 0, 0.88), rgba(25, 5, 0, 0.92)),
        conic-gradient(
            from var(--dragonkin-angle),
            rgba(255, 60, 0, 0.8),
            rgba(255, 160, 0, 0.5),
            rgba(255, 220, 50, 0.7),
            rgba(255, 100, 0, 0.3),
            rgba(255, 40, 0, 0.6),
            rgba(255, 180, 50, 0.5),
            rgba(255, 60, 0, 0.8)
        ) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    box-shadow:
        inset 0 0 24px rgba(255, 60, 0, 0.1),
        0 0 16px rgba(255, 60, 0, 0.2),
        0 0 6px rgba(255, 160, 0, 0.12),
        0 0 2px rgba(255, 220, 50, 0.08);
    animation: dragonkin-card-rotate 4s linear infinite, dragonkin-card-blaze 1.5s ease-in-out infinite;
}

.supporter-card-dragonkin:hover {
    box-shadow:
        inset 0 0 36px rgba(255, 60, 0, 0.18),
        0 0 28px rgba(255, 60, 0, 0.35),
        0 0 14px rgba(255, 160, 0, 0.2),
        0 0 6px rgba(255, 220, 50, 0.15) !important;
}

/* Fire haze glow ring behind card */
.supporter-card-dragonkin::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--dragonkin-angle),
        rgba(255, 80, 0, 0.35),
        rgba(255, 200, 50, 0.15),
        rgba(255, 50, 0, 0.3),
        rgba(255, 180, 0, 0.2),
        rgba(255, 80, 0, 0.35)
    );
    filter: blur(8px);
    opacity: 0.45;
    pointer-events: none;
    z-index: -1;
    animation: dragonkin-card-rotate 4s linear infinite;
}

.supporter-card-dragonkin:hover::before {
    opacity: 0.7;
    filter: blur(10px);
}

/* Floating ember sparks above the card */
.supporter-card-dragonkin::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffcc00;
    top: -4px;
    left: 25%;
    box-shadow:
        20px 2px 4px 1px rgba(255, 180, 0, 0.8),
        45px -1px 3px 1px rgba(255, 100, 0, 0.7),
        70px 1px 4px 1px rgba(255, 220, 50, 0.7);
    pointer-events: none;
    z-index: 2;
    animation: dragonkin-ember-dance 2s ease-in-out infinite;
}

@keyframes dragonkin-card-rotate {
    from { --dragonkin-angle: 0deg; }
    to   { --dragonkin-angle: 360deg; }
}

@keyframes dragonkin-card-blaze {
    0%, 100% {
        box-shadow: inset 0 0 24px rgba(255, 60, 0, 0.1), 0 0 16px rgba(255, 60, 0, 0.2), 0 0 6px rgba(255, 160, 0, 0.12), 0 0 2px rgba(255, 220, 50, 0.08);
        border-left-color: rgba(255, 120, 20, 0.85);
    }
    30% {
        box-shadow: inset 0 0 32px rgba(255, 60, 0, 0.18), 0 0 22px rgba(255, 60, 0, 0.3), 0 0 10px rgba(255, 180, 0, 0.18), 0 0 4px rgba(255, 220, 50, 0.12);
        border-left-color: rgba(255, 160, 40, 1);
    }
    60% {
        box-shadow: inset 0 0 20px rgba(255, 60, 0, 0.08), 0 0 14px rgba(255, 60, 0, 0.18), 0 0 5px rgba(255, 160, 0, 0.1), 0 0 2px rgba(255, 220, 50, 0.06);
        border-left-color: rgba(255, 90, 10, 0.75);
    }
}

@keyframes dragonkin-ember-dance {
    0%, 100% {
        opacity: 0.9;
        box-shadow: 20px 2px 4px 1px rgba(255, 180, 0, 0.8), 45px -1px 3px 1px rgba(255, 100, 0, 0.7), 70px 1px 4px 1px rgba(255, 220, 50, 0.7);
    }
    25% {
        opacity: 0.4;
        box-shadow: 18px -3px 3px 1px rgba(255, 180, 0, 0.5), 48px 2px 4px 1px rgba(255, 100, 0, 0.9), 65px -2px 3px 1px rgba(255, 220, 50, 0.4);
    }
    50% {
        opacity: 1;
        box-shadow: 22px 1px 5px 2px rgba(255, 200, 50, 1), 42px -2px 3px 1px rgba(255, 120, 0, 0.5), 72px 2px 5px 2px rgba(255, 220, 50, 1);
    }
    75% {
        opacity: 0.5;
        box-shadow: 16px 3px 3px 1px rgba(255, 160, 0, 0.6), 50px 1px 4px 1px rgba(255, 80, 0, 0.8), 68px -1px 3px 1px rgba(255, 200, 30, 0.5);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Tier 4: Celestial ($50) — Cosmic nebula card with rotating star-field border,
   twinkling constellation sparks, and deep space breathing aura
   ───────────────────────────────────────────────────────────────────────────── */
@property --celestial-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.supporter-card-celestial {
    border: 1px solid transparent !important;
    border-left: 3px solid rgba(100, 170, 255, 0.85) !important;
    background-image:
        linear-gradient(135deg, rgba(5, 10, 30, 0.92), rgba(10, 18, 45, 0.88)),
        conic-gradient(
            from var(--celestial-angle),
            rgba(60, 130, 255, 0.65),
            rgba(20, 50, 120, 0.2),
            rgba(180, 220, 255, 0.55),
            rgba(100, 200, 255, 0.3),
            rgba(20, 50, 120, 0.2),
            rgba(60, 130, 255, 0.65)
        ) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    box-shadow:
        inset 0 0 24px rgba(30, 80, 200, 0.1),
        0 0 16px rgba(60, 130, 255, 0.18),
        0 0 6px rgba(180, 220, 255, 0.08);
    animation: celestial-card-rotate 8s linear infinite, celestial-card-nebula 3s ease-in-out infinite;
}

.supporter-card-celestial:hover {
    box-shadow:
        inset 0 0 36px rgba(30, 80, 200, 0.18),
        0 0 28px rgba(60, 130, 255, 0.3),
        0 0 12px rgba(180, 220, 255, 0.15),
        0 0 4px rgba(255, 255, 255, 0.08) !important;
}

/* Nebula glow ring */
.supporter-card-celestial::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--celestial-angle),
        rgba(60, 130, 255, 0.3),
        transparent,
        rgba(180, 220, 255, 0.25),
        rgba(100, 200, 255, 0.15),
        transparent,
        rgba(60, 130, 255, 0.3)
    );
    filter: blur(9px);
    opacity: 0.45;
    pointer-events: none;
    z-index: -1;
    animation: celestial-card-rotate 8s linear infinite;
}

.supporter-card-celestial:hover::before {
    opacity: 0.7;
    filter: blur(11px);
}

/* Twinkling star sparks around the card */
.supporter-card-celestial::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #fff;
    top: -3px;
    left: 20%;
    box-shadow:
        15px 1px 4px 1px rgba(200, 230, 255, 0.9),
        40px -2px 3px 1px rgba(150, 200, 255, 0.8),
        65px 2px 4px 1px rgba(255, 255, 255, 0.85),
        80px 0px 3px 1px rgba(180, 220, 255, 0.7);
    pointer-events: none;
    z-index: 2;
    animation: celestial-star-twinkle 3s ease-in-out infinite;
}

@keyframes celestial-card-rotate {
    from { --celestial-angle: 0deg; }
    to   { --celestial-angle: 360deg; }
}

@keyframes celestial-card-nebula {
    0%, 100% {
        box-shadow: inset 0 0 24px rgba(30, 80, 200, 0.1), 0 0 16px rgba(60, 130, 255, 0.18), 0 0 6px rgba(180, 220, 255, 0.08);
        border-left-color: rgba(100, 170, 255, 0.8);
    }
    50% {
        box-shadow: inset 0 0 36px rgba(30, 80, 200, 0.18), 0 0 24px rgba(60, 130, 255, 0.28), 0 0 10px rgba(180, 220, 255, 0.15);
        border-left-color: rgba(150, 210, 255, 1);
    }
}

@keyframes celestial-star-twinkle {
    0%, 100% {
        opacity: 0.4;
        box-shadow: 15px 1px 2px 0px rgba(200, 230, 255, 0.3), 40px -2px 2px 0px rgba(150, 200, 255, 0.3), 65px 2px 2px 0px rgba(255, 255, 255, 0.3), 80px 0px 2px 0px rgba(180, 220, 255, 0.3);
    }
    25% {
        opacity: 1;
        box-shadow: 15px 1px 5px 2px rgba(200, 230, 255, 1), 40px -2px 2px 0px rgba(150, 200, 255, 0.3), 65px 2px 5px 2px rgba(255, 255, 255, 1), 80px 0px 2px 0px rgba(180, 220, 255, 0.4);
    }
    50% {
        opacity: 0.6;
        box-shadow: 15px 1px 3px 1px rgba(200, 230, 255, 0.5), 40px -2px 5px 2px rgba(150, 200, 255, 1), 65px 2px 3px 1px rgba(255, 255, 255, 0.5), 80px 0px 5px 2px rgba(180, 220, 255, 1);
    }
    75% {
        opacity: 0.9;
        box-shadow: 15px 1px 2px 0px rgba(200, 230, 255, 0.4), 40px -2px 3px 1px rgba(150, 200, 255, 0.5), 65px 2px 2px 0px rgba(255, 255, 255, 0.4), 80px 0px 3px 1px rgba(180, 220, 255, 0.6);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Tier 5: Immortal ($100) — Animated rainbow border with prismatic aura
   ───────────────────────────────────────────────────────────────────────────── */
.supporter-card-immortal {
    border: 1px solid transparent !important;
    border-left: 3px solid transparent !important;
    background-image:
        linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(22, 33, 62, 0.9)),
        conic-gradient(
            from var(--immortal-angle, 0deg),
            #ff0040, #ff8800, #ffe600, #00ff66,
            #00ccff, #7b2fff, #ff00aa, #ff0040
        ) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    box-shadow: 0 0 10px rgba(255, 100, 200, 0.12), 0 0 20px rgba(100, 200, 255, 0.08);
    animation: immortal-rotate 5s linear infinite, immortal-card-pulse 2.5s ease-in-out infinite;
}

.supporter-card-immortal:hover {
    box-shadow: 0 0 16px rgba(255, 100, 200, 0.25), 0 0 28px rgba(100, 200, 255, 0.18), 0 0 6px rgba(255, 255, 255, 0.1) !important;
}

/* Outer prismatic glow ring behind the card */
.supporter-card-immortal::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--immortal-angle, 0deg),
        #ff0040, #ff8800, #ffe600, #00ff66,
        #00ccff, #7b2fff, #ff00aa, #ff0040
    );
    filter: blur(8px);
    opacity: 0.2;
    pointer-events: none;
    z-index: -1;
    animation: immortal-rotate 5s linear infinite;
}

.supporter-card-immortal:hover::before {
    opacity: 0.35;
    filter: blur(10px);
}

@keyframes immortal-card-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 100, 200, 0.12), 0 0 20px rgba(100, 200, 255, 0.08); }
    50%      { box-shadow: 0 0 14px rgba(255, 100, 200, 0.2), 0 0 26px rgba(100, 200, 255, 0.14), 0 0 4px rgba(255, 255, 255, 0.06); }
}

/* ── Context-specific overrides ── */

/* Presence modal cards already have a border — override it cleanly */
.online-user-card[class*="supporter-card-"] {
    border-left-width: 3px;
}

/* Sidebar items are more compact — ensure border-left doesn't shift content */
.online-user-item[class*="supporter-card-"] {
    border-left-style: solid;
    margin-left: -3px;
    padding-left: 13px;
}

/* Floating chat panel items — match compact padding */
.floating-chat-online-user[class*="supporter-card-"] {
    border-left-style: solid;
    margin-left: -3px;
    padding-left: 13px;
}

/* =============================================================================
   SUPPORTER TIER ADMIN MODAL
   ============================================================================= */

.supporter-tier-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
}

.supporter-tier-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    background: var(--bg-card);
}

.supporter-tier-option:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
}

.supporter-tier-option.selected {
    border-color: var(--accent);
    background: rgba(255, 152, 0, 0.08);
}

.supporter-tier-option input[type="radio"] {
    accent-color: var(--accent);
}

.supporter-tier-option .tier-info {
    flex: 1;
}

.supporter-tier-option .tier-name {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.85rem;
}

.supporter-tier-option .tier-amount {
    font-size: 0.75rem;
    color: var(--text-sub);
}

.supporter-tier-preview {
    margin: 10px 0;
    padding: 10px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    text-align: center;
}

.supporter-tier-preview-label {
    font-size: 0.75rem;
    color: var(--text-sub);
    margin-bottom: 6px;
}

/* Hide supporter badge toggle in profile edit */
.toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-main);
}

.toggle-label input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.toggle-label .label-hint {
    font-size: 0.75rem;
    color: var(--text-dim);
}

/* Supporter badge tooltip cursor */
.supporter-badge {
    cursor: help;
}

/* =============================================================================
   SUPPORTER PARTY HAT OVERLAYS — RS party hats by rarity on avatar upper-left
   Tier mapping follows real RS price order: White < Purple < Green < Red < Blue
   ============================================================================= */

/* Wrapper keeps the avatar as the layout element, hat floats on top */
.avatar-phat-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    line-height: 0;           /* prevent inline gap under the img */
}

/* Fix profile avatar — wrapper must fill the container so img sizing still works */
.profile-avatar-large-container > .avatar-phat-wrap {
    display: block;
    width: 100%;
    height: 100%;
}

/* The party hat — centered on top of the avatar */
.avatar-phat-wrap::before {
    content: '';
    position: absolute;
    z-index: 5;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 55%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
}

/* ── Tier 1: Adventurer — White Party Hat (least valuable) ── */
.avatar-phat-wrap.phat-adventurer::before {
    background-image: url("../icons/items/phat_white.png");
}

/* ── Tier 2: Mystic — Purple Party Hat ── */
.avatar-phat-wrap.phat-mystic::before {
    background-image: url("../icons/items/phat_purple.png");
    filter: drop-shadow(0 0 4px rgba(139,92,246,0.45));
}

/* ── Tier 3: Dragonkin — Green Party Hat ── */
.avatar-phat-wrap.phat-dragonkin::before {
    background-image: url("../icons/items/phat_green.png");
    filter: drop-shadow(0 0 4px rgba(34,197,94,0.4));
}

/* ── Tier 4: Celestial — Red Party Hat ── */
.avatar-phat-wrap.phat-celestial::before {
    background-image: url("../icons/items/phat_red.png");
    filter: drop-shadow(0 0 5px rgba(239,68,68,0.45));
    animation: phatCelestialGlow 3s ease-in-out infinite;
}

@keyframes phatCelestialGlow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(239,68,68,0.4)); }
    50%      { filter: drop-shadow(0 0 10px rgba(239,68,68,0.75)); }
}

/* ── Tier 5: Immortal — Blue Party Hat (most valuable!) ── */
.avatar-phat-wrap.phat-immortal::before {
    background-image: url("../icons/items/phat_blue.png");
    filter: drop-shadow(0 0 7px rgba(59,130,246,0.6));
    animation: phatImmortalShimmer 2.5s ease-in-out infinite;
}

@keyframes phatImmortalShimmer {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(59,130,246,0.5)) brightness(1); }
    50%      { filter: drop-shadow(0 0 14px rgba(59,130,246,0.95)) brightness(1.12); }
}

/* ── Size adjustments per avatar context ── */

/* Large profile avatar (120px) — slightly smaller ratio */
.avatar-phat-wrap.phat-size-lg::before {
    width: 45%;
    height: 45%;
    top: -24%;
}

/* Small avatars (suggestions reply, nested) — slightly larger ratio to stay visible */
.avatar-phat-wrap.phat-size-sm::before {
    width: 60%;
    height: 60%;
    top: -34%;
}

/* Tiny avatars (notifications, toasts) — even bigger ratio */
.avatar-phat-wrap.phat-size-xs::before {
    width: 65%;
    height: 65%;
    top: -36%;
}

/* =============================================================================
   STAR SYSTEM — INLINE STAR BADGES (BELOW USERNAME, OVERLAPPING)
   ============================================================================= */

/* Wrapper: name on top, stars in a centered row beneath — wraps ONLY the username */
.name-with-stars {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    line-height: 1.2;
}

.name-top-row {
    display: inline;
    white-space: nowrap;
    text-align: center;
}

.star-row-below {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    line-height: 1;
}

.user-star {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin: 0 1px;
    display: inline-block;
    image-rendering: auto;
    position: relative;
}

/* Overlapping: subsequent stars tuck behind the previous one */
.user-star.star-overlap {
    margin-left: -4px;
}

/* ── Tier 3: Gold — subtle sparkle glow ──────────────────────────────── */
.user-star.star-tier-3 {
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.5));
}

/* ── Tier 4: Platinum — shimmering glow ──────────────────────────────── */
.user-star.star-tier-4 {
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6));
    animation: star-shimmer 2s ease-in-out infinite;
}

/* ── Tier 5: Diamond — pulsing scale + glow ──────────────────────────── */
.user-star.star-tier-5 {
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
    animation: star-pulse 1.5s ease-in-out infinite;
}

/* ── Tier 6: Rotating Star — continuous spin ─────────────────────────── */
.user-star.star-tier-6 {
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6));
    animation: star-rotate 3s linear infinite;
}

/* ── Tier 7: Rainbow Star — cycling color glow border ────────────────── */
.user-star.star-tier-7 {
    animation: star-rainbow-glow 3s linear infinite;
}

/* ── Tier 8: Ultimate Star — rotating + rainbow glow ─────────────────── */
.user-star.star-tier-8 {
    animation: star-rotate 3s linear infinite, star-rainbow-glow 3s linear infinite;
}

@keyframes star-rotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes star-rainbow-glow {
    0%        { filter: drop-shadow(0 0 3px #ff0000) drop-shadow(0 0 1px #ff0000); }
    14.28%    { filter: drop-shadow(0 0 3px #ff8800) drop-shadow(0 0 1px #ff8800); }
    28.57%    { filter: drop-shadow(0 0 3px #ffff00) drop-shadow(0 0 1px #ffff00); }
    42.85%    { filter: drop-shadow(0 0 3px #00ff00) drop-shadow(0 0 1px #00ff00); }
    57.14%    { filter: drop-shadow(0 0 3px #0088ff) drop-shadow(0 0 1px #0088ff); }
    71.42%    { filter: drop-shadow(0 0 3px #8800ff) drop-shadow(0 0 1px #8800ff); }
    85.71%    { filter: drop-shadow(0 0 3px #ff00ff) drop-shadow(0 0 1px #ff00ff); }
    100%      { filter: drop-shadow(0 0 3px #ff0000) drop-shadow(0 0 1px #ff0000); }
}

@keyframes star-shimmer {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6)); }
    50% { filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.9)); }
}

@keyframes star-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 8px rgba(255, 255, 100, 1)); transform: scale(1.1); }
}

/* =============================================================================
   STAR SHOP — MODAL UI
   ============================================================================= */

.star-shop-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.star-purchase-notice {
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.8rem;
    color: #ffb74d;
    line-height: 1.4;
}

.star-purchase-notice strong {
    color: #ff9800;
}

.star-none-option {
    align-self: flex-start;
    margin-bottom: 4px;
}

.star-tier-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px;
}

.star-owned-section {
    border-color: rgba(76, 175, 80, 0.2);
    background: rgba(76, 175, 80, 0.04);
}

.star-tier-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.star-tier-label {
    font-weight: bold;
    color: #fff;
    font-size: 0.9rem;
}

.star-tier-price {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: bold;
}

.star-tier-desc {
    color: #777;
    font-size: 0.75rem;
}

.star-tier-colors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 6px;
}

.star-shop-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    font-family: inherit;
    color: inherit;
}

.star-shop-item:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.star-shop-item:disabled {
    cursor: default;
}

/* Owned stars in the collection section */
.star-shop-item.owned {
    border-color: rgba(76, 175, 80, 0.3);
    background: rgba(76, 175, 80, 0.08);
}

/* Selected (displayed) stars have a bright highlight */
.star-shop-item.owned.selected {
    border-color: rgba(76, 175, 80, 0.7);
    background: rgba(76, 175, 80, 0.15);
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.3);
}

.star-shop-item.pending {
    border-color: rgba(255, 152, 0, 0.3);
    background: rgba(255, 152, 0, 0.06);
    cursor: default;
    opacity: 0.8;
}

.star-shop-icon {
    width: 24px;
    height: 24px;
}

/* Apply tier animations to shop icons so users see effects before buying */
.star-shop-icon.star-tier-3 {
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.5));
}
.star-shop-icon.star-tier-4 {
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6));
    animation: star-shimmer 2s ease-in-out infinite;
}
.star-shop-icon.star-tier-5 {
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
    animation: star-pulse 1.5s ease-in-out infinite;
}
.star-shop-icon.star-tier-6 {
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6));
    animation: star-rotate 3s linear infinite;
}
.star-shop-icon.star-tier-7 {
    animation: star-rainbow-glow 3s linear infinite;
}
.star-shop-icon.star-tier-8 {
    animation: star-rotate 3s linear infinite, star-rainbow-glow 3s linear infinite;
}

/* Live preview area in the star shop */
/* In-cart highlight on shop tiles */
.star-shop-item.in-cart {
    border-color: rgba(33, 150, 243, 0.6);
    background: rgba(33, 150, 243, 0.12);
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.25);
}

.star-shop-item.in-cart:hover {
    border-color: rgba(244, 67, 54, 0.5);
    background: rgba(244, 67, 54, 0.1);
}

.star-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.5rem;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(33, 150, 243, 0.8);
    color: #fff;
    font-weight: bold;
}

/* =============================================================================
   STAR SHOPPING CART
/* =============================================================================
   STAR CART PREVIEW — PURCHASE-ONLY STAR PREVIEW
   ============================================================================= */

.star-cart-preview {
    margin-top: 10px;
    background: rgba(33, 150, 243, 0.04);
    border: 1px solid rgba(33, 150, 243, 0.15);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.star-cart-preview-label {
    font-size: 0.75rem;
    font-weight: bold;
    color: #42a5f5;
    margin-bottom: 6px;
}

.star-cart-preview-name {
    padding: 6px 0;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.star-cart-preview-hint {
    font-size: 0.65rem;
    color: #666;
    margin-top: 4px;
    font-style: italic;
}

/* =============================================================================
   STAR SHOPPING CART
   ============================================================================= */

.star-cart-section {
    background: rgba(33, 150, 243, 0.06);
    border: 1px solid rgba(33, 150, 243, 0.25);
    border-radius: 8px;
    padding: 10px;
    margin-top: 12px;
}

.star-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(33, 150, 243, 0.15);
}

.star-cart-title {
    font-weight: bold;
    color: #42a5f5;
    font-size: 0.85rem;
}

.star-cart-clear {
    background: transparent;
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: #f44336;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.star-cart-clear:hover {
    background: rgba(244, 67, 54, 0.15);
    border-color: rgba(244, 67, 54, 0.5);
}

.star-cart-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.star-cart-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}

.star-cart-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.star-cart-item-name {
    flex: 1;
    font-size: 0.8rem;
    color: #ddd;
}

.star-cart-item-price {
    color: #4caf50;
    font-weight: bold;
    font-size: 0.8rem;
}

.star-cart-remove {
    background: transparent;
    border: none;
    color: #f44336;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background 0.15s ease;
    font-family: inherit;
}

.star-cart-remove:hover {
    background: rgba(244, 67, 54, 0.2);
}

.star-cart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid rgba(33, 150, 243, 0.15);
}

.star-cart-total {
    color: #fff;
    font-size: 0.85rem;
}

.star-cart-total strong {
    color: #4caf50;
}

.star-cart-buy {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    border: none;
    color: #fff;
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.star-cart-buy:hover {
    background: linear-gradient(135deg, #66bb6a, #388e3c);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
    transform: translateY(-1px);
}

/* =============================================================================
   STAR ARRANGER — DRAG-TO-REORDER
   ============================================================================= */

.star-arrange-section {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 10px;
}

.star-arrange-label {
    font-size: 0.75rem;
    font-weight: bold;
    color: #aaa;
    margin-bottom: 6px;
    text-align: center;
}

.star-arrange-hint {
    font-weight: normal;
    color: #666;
    font-size: 0.65rem;
    font-style: italic;
}

.star-arrange-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 36px;
    flex-wrap: wrap;
}

.star-arrange-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: grab;
    transition: border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    position: relative;
    background: rgba(255, 255, 255, 0.04);
}

.star-arrange-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.star-arrange-item:active,
.star-arrange-item.dragging {
    cursor: grabbing;
    opacity: 0.4;
    transform: scale(0.9);
}

.star-arrange-item.drag-over-left {
    border-left-color: #42a5f5;
    border-left-width: 3px;
}

.star-arrange-item.drag-over-right {
    border-right-color: #42a5f5;
    border-right-width: 3px;
}

.star-arrange-icon {
    width: 22px;
    height: 22px;
    pointer-events: none;
}

.star-shop-color-label {
    font-size: 0.65rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.star-owned-badge,
.star-pending-badge,
.star-selected-badge,
.star-hidden-badge,
.star-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.55rem;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
}

.star-owned-badge {
    background: rgba(76, 175, 80, 0.8);
    color: #fff;
}

.star-pending-badge {
    background: rgba(255, 152, 0, 0.8);
    color: #000;
    font-size: 0.5rem;
}

.star-selected-badge {
    background: rgba(33, 150, 243, 0.8);
    color: #fff;
    font-size: 0.5rem;
}

.star-hidden-badge {
    background: rgba(100, 100, 100, 0.5);
    color: #999;
    font-size: 0.6rem;
}

/* Star collection preview at top of shop */
.star-my-collection {
    background: rgba(76, 175, 80, 0.06);
    border: 1px solid rgba(76, 175, 80, 0.2);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 4px;
}

.star-collection-label {
    font-weight: bold;
    color: #4caf50;
    font-size: 0.8rem;
    margin-bottom: 6px;
}

.star-collection-row {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.star-collection-row .user-star {
    width: 20px;
    height: 20px;
}

.star-collection-desc {
    color: #777;
    font-size: 0.7rem;
    margin: 6px 0 0 0;
}

/* =============================================================================
   ADMIN STAR MANAGEMENT — CHIPS
   ============================================================================= */

.admin-star-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #fff;
}

.admin-star-chip.owned {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.admin-star-chip.pending {
    background: rgba(255, 152, 0, 0.15);
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.admin-star-approve,
.admin-star-revoke {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.15s;
}

.admin-star-approve:hover,
.admin-star-revoke:hover {
    opacity: 0.8;
}

.admin-star-approve {
    background: #4caf50;
    color: #fff;
}

.admin-star-revoke {
    background: #f44336;
    color: #fff;
}

/* =============================================================================
   ACHIEVEMENT BLING — PURCHASABLE RS ACHIEVEMENT BADGES
   ============================================================================= */

/* Achievement icons in shop, cart, and arranger */
.achievement-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.3));
}

/* Achievement badges displayed under usernames */
.user-achievement {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin: 0 1px;
    border-radius: 3px;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.4));
    transition: transform 0.2s ease;
}

.user-achievement:hover {
    transform: scale(1.25);
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.7));
}

/* Achievement row below stars under username */
.achievement-row-below {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-wrap: wrap;
    margin-top: 1px;
}

/* Divider between stars and achievement sections in shop */
.achievement-shop-divider {
    margin: 24px 0 12px;
    padding: 12px 0;
    border-top: 2px solid rgba(255, 215, 0, 0.2);
    text-align: center;
}

.achievement-shop-divider-text {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffd740;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* Achievement section styling */
.achievement-section {
    border-color: rgba(255, 215, 0, 0.12);
    background: rgba(255, 215, 0, 0.03);
}

/* Achievement grid - wider items for longer labels */
.achievement-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

/* Achievement shop items */
.achievement-shop-item .star-shop-icon {
    width: 28px;
    height: 36px;
    object-fit: contain;
    image-rendering: auto;
}

.achievement-shop-item .star-shop-color-label {
    font-size: 0.6rem;
    text-align: center;
    line-height: 1.15;
}

/* Achievement item in cart */
.star-cart-item .achievement-icon {
    width: 22px;
    height: 28px;
    object-fit: contain;
}