/* ==========================================
   RESET & BASE STYLES
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-dark-bg: #0a0a0a;
    --color-dark-secondary: #1a1a1a;
    --color-dark-tertiary: #2a2a2a;
    --color-blood-red: #8b0000;
    --color-blood-red-light: #a52a2a;
    --color-blood-red-dark: #5c0000;
    --color-bone-white: #f5f5dc;
    --color-muted-gray: #6b6b6b;
    --color-shadow: rgba(0, 0, 0, 0.8);
    --color-glow-red: rgba(139, 0, 0, 0.3);
    --color-success: #2d5016;
    --color-reserved: #4a4a4a;
    
    --font-title: 'Cinzel', serif;
    --font-body: 'Crimson Text', serif;
    
    --transition-standard: all 0.3s ease;
}

body {
    font-family: var(--font-body);
    background: linear-gradient(135deg, var(--color-dark-bg) 0%, var(--color-dark-secondary) 100%);
    color: var(--color-bone-white);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background-attachment: fixed;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(139, 0, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(139, 0, 0, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.fog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(20, 20, 20, 0.3) 50%, 
        transparent 100%);
    pointer-events: none;
    z-index: 1;
    animation: fogDrift 20s ease-in-out infinite;
}

@keyframes fogDrift {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* ==========================================
   ATMOSPHERIC PARTICLES
   ========================================== */
.fog-overlay::before,
.fog-overlay::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(245, 245, 220, 0.15);
    border-radius: 50%;
    box-shadow: 
        20vw 10vh 2px 0px rgba(245, 245, 220, 0.1),
        40vw 20vh 1px 1px rgba(245, 245, 220, 0.15),
        60vw 30vh 1px 0px rgba(245, 245, 220, 0.08),
        80vw 40vh 2px 1px rgba(245, 245, 220, 0.12),
        15vw 50vh 1px 0px rgba(245, 245, 220, 0.1),
        35vw 60vh 2px 0px rgba(245, 245, 220, 0.15),
        55vw 70vh 1px 1px rgba(245, 245, 220, 0.08),
        75vw 80vh 1px 0px rgba(245, 245, 220, 0.12),
        90vw 90vh 2px 1px rgba(245, 245, 220, 0.1),
        10vw 15vh 1px 0px rgba(245, 245, 220, 0.15),
        30vw 25vh 2px 1px rgba(245, 245, 220, 0.08),
        50vw 35vh 1px 0px rgba(245, 245, 220, 0.12),
        70vw 45vh 1px 1px rgba(245, 245, 220, 0.1),
        85vw 55vh 2px 0px rgba(245, 245, 220, 0.15),
        25vw 65vh 1px 0px rgba(245, 245, 220, 0.08),
        45vw 75vh 2px 1px rgba(245, 245, 220, 0.12),
        65vw 85vh 1px 0px rgba(245, 245, 220, 0.1),
        5vw 95vh 1px 1px rgba(245, 245, 220, 0.15);
    animation: particleFloat 60s linear infinite;
}

.fog-overlay::after {
    animation: particleFloat 80s linear infinite reverse;
    box-shadow: 
        25vw 15vh 1px 0px rgba(245, 245, 220, 0.12),
        45vw 25vh 2px 1px rgba(245, 245, 220, 0.08),
        65vw 35vh 1px 0px rgba(245, 245, 220, 0.15),
        85vw 45vh 1px 1px rgba(245, 245, 220, 0.1),
        10vw 55vh 2px 0px rgba(245, 245, 220, 0.12),
        30vw 65vh 1px 0px rgba(245, 245, 220, 0.08),
        50vw 75vh 2px 1px rgba(245, 245, 220, 0.15),
        70vw 85vh 1px 0px rgba(245, 245, 220, 0.1),
        90vw 95vh 1px 1px rgba(245, 245, 220, 0.12),
        15vw 5vh 2px 0px rgba(245, 245, 220, 0.15),
        35vw 12vh 1px 1px rgba(245, 245, 220, 0.08),
        55vw 22vh 1px 0px rgba(245, 245, 220, 0.12),
        75vw 32vh 2px 0px rgba(245, 245, 220, 0.1),
        95vw 42vh 1px 1px rgba(245, 245, 220, 0.15),
        20vw 52vh 1px 0px rgba(245, 245, 220, 0.08),
        40vw 62vh 2px 1px rgba(245, 245, 220, 0.12);
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) translateX(20px);
        opacity: 0;
    }
}

/* ==========================================
   AUTHENTICATION SECTION
   ========================================== */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    position: relative;
    z-index: 10;
}

.auth-card {
    background: var(--color-dark-secondary);
    border: 2px solid var(--color-blood-red-dark);
    border-radius: 8px;
    padding: 40px;
    max-width: 450px;
    width: 100%;
    box-shadow: 0 8px 32px var(--color-shadow), 0 0 20px var(--color-glow-red);
}

.auth-title {
    font-family: var(--font-title);
    font-size: 2rem;
    text-align: center;
    color: var(--color-blood-red-light);
    margin-bottom: 10px;
    text-shadow: 0 0 10px var(--color-glow-red);
}

.auth-subtitle {
    text-align: center;
    color: var(--color-muted-gray);
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 1.1rem;
    color: var(--color-bone-white);
    font-weight: 600;
}

.form-group select,
.form-group input {
    width: 100%;
    padding: 12px;
    background: var(--color-dark-tertiary);
    border: 1px solid var(--color-muted-gray);
    border-radius: 4px;
    color: var(--color-bone-white);
    font-size: 1rem;
    font-family: var(--font-body);
    transition: var(--transition-standard);
}

.form-group select:focus,
.form-group input:focus {
    outline: none;
    border-color: var(--color-blood-red-light);
    box-shadow: 0 0 10px var(--color-glow-red);
}

.form-group select option {
    background: var(--color-dark-tertiary);
    color: var(--color-bone-white);
}

.error-message {
    color: var(--color-blood-red-light);
    margin-top: 15px;
    text-align: center;
    font-size: 0.95rem;
    min-height: 20px;
}

/* ==========================================
   BUTTONS
   ========================================== */
.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-family: var(--font-title);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-standard);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary {
    background: var(--color-blood-red);
    color: var(--color-bone-white);
    width: 100%;
    box-shadow: 0 4px 12px var(--color-glow-red);
}

.btn-primary:hover {
    background: var(--color-blood-red-light);
    box-shadow: 0 6px 20px var(--color-glow-red);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--color-dark-tertiary);
    color: var(--color-bone-white);
    border: 1px solid var(--color-muted-gray);
}

.btn-secondary:hover {
    background: var(--color-muted-gray);
    transform: translateY(-2px);
}

.btn-calendar {
    background: var(--color-dark-tertiary);
    color: var(--color-bone-white);
    border: 1px solid var(--color-blood-red-dark);
    padding: 10px 16px;
    font-size: 0.9rem;
}

.btn-calendar:hover {
    background: var(--color-blood-red-dark);
    border-color: var(--color-blood-red-light);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ==========================================
   MAIN CONTENT
   ========================================== */
.hidden {
    display: none !important;
}

#main-content {
    position: relative;
    z-index: 10;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.site-header {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 40px;
    border-bottom: 2px solid var(--color-blood-red-dark);
    position: relative;
}

.main-title {
    font-family: var(--font-title);
    font-size: 3rem;
    color: var(--color-blood-red-light);
    margin-bottom: 10px;
    text-shadow: 0 0 20px var(--color-glow-red), 2px 2px 4px var(--color-shadow);
    letter-spacing: 2px;
}

.tagline {
    font-size: 1.3rem;
    color: var(--color-muted-gray);
    font-style: italic;
    margin-bottom: 20px;
}

.user-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

#welcome-text {
    font-size: 1.1rem;
}

#current-user {
    color: var(--color-blood-red-light);
    font-weight: 600;
}

#logout-btn {
    padding: 8px 16px;
    font-size: 0.9rem;
}

/* ==========================================
   EVENT INFORMATION
   ========================================== */
.event-info {
    margin-bottom: 60px;
}

.event-card {
    background: var(--color-dark-secondary);
    border: 2px solid var(--color-blood-red-dark);
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 16px var(--color-shadow);
}

.event-card h2 {
    font-family: var(--font-title);
    font-size: 2rem;
    color: var(--color-blood-red-light);
    margin-bottom: 20px;
    text-align: center;
}

.event-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.2rem;
    padding: 10px;
    background: var(--color-dark-tertiary);
    border-radius: 4px;
}

.detail-icon {
    font-size: 1.5rem;
    filter: grayscale(100%);
}

.detail-text {
    flex: 1;
}

.calendar-buttons h3 {
    font-family: var(--font-title);
    font-size: 1.3rem;
    color: var(--color-bone-white);
    margin-bottom: 15px;
    text-align: center;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

/* ==========================================
   EVENT REGISTRATION
   ========================================== */
.event-registration {
    margin-bottom: 60px;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.event-registration-card {
    background: var(--color-dark-secondary);
    border: 2px solid var(--color-blood-red-dark);
    border-radius: 8px;
    padding: 25px;
    transition: var(--transition-standard);
    position: relative;
    overflow: hidden;
}

.event-registration-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-glow-red) 0%, transparent 100%);
    opacity: 0;
    transition: var(--transition-standard);
    pointer-events: none;
}

.event-registration-card:hover::before {
    opacity: 0.1;
}

.event-registration-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px var(--color-shadow), 0 0 30px var(--color-glow-red);
    border-color: var(--color-blood-red-light);
}

.event-registration-card.user-registered {
    border-color: var(--color-success);
    background: linear-gradient(135deg, var(--color-dark-secondary) 0%, #1a2a1a 100%);
}

.event-registration-card.user-registered:hover {
    border-color: #3d6e2e;
}

.event-registration-card.event-full {
    border-color: var(--color-reserved);
    opacity: 0.85;
}

.event-registration-card.event-full:hover {
    border-color: var(--color-muted-gray);
}

.event-header {
    margin-bottom: 20px;
}

.event-title {
    font-family: var(--font-title);
    font-size: 1.8rem;
    color: var(--color-blood-red-light);
    margin-bottom: 10px;
}

.event-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--color-dark-tertiary);
    border-radius: 6px;
    border: 1px solid var(--color-blood-red-dark);
}

.date-icon {
    font-size: 1.3rem;
    filter: grayscale(100%);
}

.date-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-bone-white);
}

.event-time {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px;
    background: var(--color-dark-tertiary);
    border-radius: 4px;
    font-size: 1rem;
    color: var(--color-muted-gray);
}

.time-icon {
    font-size: 1.2rem;
    filter: grayscale(100%);
}

.event-capacity {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--color-dark-tertiary);
    border-radius: 6px;
    border: 1px solid var(--color-blood-red-dark);
}

.capacity-label {
    font-size: 0.95rem;
    color: var(--color-muted-gray);
    margin-right: 10px;
}

.capacity-count {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-blood-red-light);
}

.capacity-bar {
    width: 100%;
    height: 8px;
    background: var(--color-dark-bg);
    border-radius: 4px;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid var(--color-blood-red-dark);
}

.capacity-fill {
    height: 100%;
    background: var(--color-success);
    transition: width 0.5s ease, background-color 0.5s ease;
    border-radius: 4px 0 0 4px;
}

.event-players {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--color-dark-bg);
    border-radius: 6px;
    border: 1px solid var(--color-blood-red-dark);
}

.event-players h4 {
    font-family: var(--font-title);
    font-size: 1.1rem;
    color: var(--color-blood-red-light);
    margin-bottom: 10px;
}

.players-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.players-list li {
    padding: 8px 12px;
    margin-bottom: 6px;
    background: var(--color-dark-tertiary);
    border-radius: 4px;
    border-left: 3px solid var(--color-blood-red-dark);
    font-size: 1rem;
    color: var(--color-bone-white);
}

.players-list li.no-players {
    color: var(--color-muted-gray);
    font-style: italic;
    border-left-color: var(--color-muted-gray);
}

.players-list li.current-user-registration {
    border-left-color: var(--color-success);
    background: linear-gradient(90deg, rgba(45, 80, 22, 0.2) 0%, var(--color-dark-tertiary) 100%);
    font-weight: 600;
    color: var(--color-blood-red-light);
}

.event-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-event-register {
    background: var(--color-blood-red);
    color: var(--color-bone-white);
    padding: 12px;
    width: 100%;
    border: 2px solid var(--color-blood-red-dark);
}

.btn-event-register:hover:not(:disabled) {
    background: var(--color-blood-red-light);
    border-color: var(--color-blood-red-light);
}

.btn-event-register:disabled {
    background: var(--color-reserved);
    border-color: var(--color-muted-gray);
    cursor: not-allowed;
}

.btn-event-unregister {
    background: var(--color-dark-tertiary);
    color: var(--color-bone-white);
    padding: 10px;
    width: 100%;
    border: 2px solid var(--color-blood-red-dark);
}

.btn-event-unregister:hover {
    background: var(--color-blood-red-dark);
    border-color: var(--color-blood-red-light);
}

/* ==========================================
   CHARACTER SECTION
   ========================================== */
.character-section {
    margin-bottom: 60px;
}

.section-title {
    font-family: var(--font-title);
    font-size: 2.5rem;
    color: var(--color-blood-red-light);
    text-align: center;
    margin-bottom: 10px;
    text-shadow: 0 0 15px var(--color-glow-red);
}

.section-subtitle {
    text-align: center;
    color: var(--color-muted-gray);
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-style: italic;
}

/* ==========================================
   RANDOMIZER
   ========================================== */
.randomizer-container {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px;
    background: linear-gradient(135deg, var(--color-dark-secondary) 0%, var(--color-dark-tertiary) 100%);
    border: 2px solid var(--color-blood-red-dark);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.randomizer-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(139, 0, 0, 0.1) 0%, transparent 70%);
    animation: randomGlow 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes randomGlow {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate(10px, 10px) scale(1.1); opacity: 0.8; }
}

.btn-randomize {
    background: linear-gradient(135deg, var(--color-blood-red) 0%, var(--color-blood-red-dark) 100%);
    color: var(--color-bone-white);
    padding: 15px 40px;
    font-size: 1.2rem;
    border: 2px solid var(--color-blood-red-light);
    box-shadow: 0 4px 20px var(--color-glow-red);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.btn-randomize:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-blood-red-light) 0%, var(--color-blood-red) 100%);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 30px var(--color-glow-red);
}

.btn-randomize:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.dice-icon {
    font-size: 1.5rem;
    margin-right: 10px;
    display: inline-block;
    transition: transform 0.3s ease;
}

.btn-randomize:hover:not(:disabled) .dice-icon {
    transform: rotate(15deg);
}

.dice-icon.spinning {
    animation: diceRoll 0.6s linear infinite;
}

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

.randomizer-hint {
    margin-top: 15px;
    color: var(--color-muted-gray);
    font-size: 0.95rem;
    font-style: italic;
    position: relative;
    z-index: 1;
}

/* Randomizer highlight animation */
.character-card.randomize-highlight {
    border-color: #FFD700 !important;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.3);
    transform: scale(1.05) translateY(-5px);
    animation: pulse 0.3s ease-in-out;
    z-index: 10;
}

@keyframes pulse {
    0%, 100% { transform: scale(1.05) translateY(-5px); }
    50% { transform: scale(1.08) translateY(-8px); }
}

.character-card.randomize-selected {
    border-color: #FFD700 !important;
    box-shadow: 
        0 0 40px rgba(255, 215, 0, 0.8),
        0 0 80px rgba(255, 215, 0, 0.5),
        0 0 120px rgba(255, 215, 0, 0.3),
        inset 0 0 30px rgba(255, 215, 0, 0.2);
    transform: scale(1.08) translateY(-10px);
    animation: selectedGlow 1.5s ease-in-out infinite;
    z-index: 15;
    position: relative;
}

.character-card.randomize-selected::before {
    opacity: 0.3 !important;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, transparent 100%) !important;
}

@keyframes selectedGlow {
    0%, 100% {
        box-shadow: 
            0 0 40px rgba(255, 215, 0, 0.8),
            0 0 80px rgba(255, 215, 0, 0.5),
            0 0 120px rgba(255, 215, 0, 0.3),
            inset 0 0 30px rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow: 
            0 0 50px rgba(255, 215, 0, 1),
            0 0 100px rgba(255, 215, 0, 0.7),
            0 0 150px rgba(255, 215, 0, 0.5),
            inset 0 0 40px rgba(255, 215, 0, 0.3);
    }
}

/* Sparkles effect for selected card */
.character-card.randomize-selected::after {
    content: '✨';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    animation: sparkle 1s ease-in-out infinite;
    z-index: 20;
    pointer-events: none;
}

@keyframes sparkle {
    0%, 100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateX(-50%) translateY(-10px) scale(1.2);
    }
}

.characters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.character-card {
    background: var(--color-dark-secondary);
    border: 2px solid var(--color-blood-red-dark);
    border-radius: 8px;
    padding: 25px;
    transition: var(--transition-standard);
    position: relative;
    overflow: hidden;
}

.character-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-glow-red) 0%, transparent 100%);
    opacity: 0;
    transition: var(--transition-standard);
    pointer-events: none;
    z-index: 1;
}

/* Blood drip effect - ultra-realistic viscous flow with oxidation */
.character-card::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 20%;
    width: 3.5px;
    height: 0;
    /* Realistic blood gradient - fresh to oxidized */
    background: linear-gradient(to bottom, 
        #A50000 0%,          /* Fresh oxygenated blood */
        #8B0000 8%,          /* Slightly deoxygenated */
        #750000 18%,         /* Beginning oxidation */
        #6B0000 30%,         /* Mid oxidation */
        #5C0000 45%,         /* Deep oxidation */
        #4A0000 62%,         /* Brown undertones emerging */
        rgba(60, 10, 5, 0.9) 78%,  /* Dark brown-red */
        rgba(45, 8, 4, 0.7) 88%,   /* Nearly dried */
        rgba(30, 5, 3, 0.4) 95%,
        transparent 100%);
    /* Irregular drip shape - not perfectly round */
    border-radius: 48% 52% 51% 49% / 58% 62% 38% 42%;
    filter: blur(0.4px) contrast(1.15);
    box-shadow: 
        /* Main drips with varying thickness and irregularity */
        42px 0 0 1.2px #7A0000,
        44px 1px 0 0px rgba(122, 0, 0, 0.6),
        83px 0 0 0.8px #8B0000,
        85px -1px 0 0px rgba(139, 0, 0, 0.5),
        118px 0 0 1.5px #6B0000,
        120px 2px 0 0px rgba(107, 0, 0, 0.7),
        162px 0 0 0.9px #7A0000,
        164px 1px 0 0px rgba(122, 0, 0, 0.55),
        198px 0 0 1.3px #8B0000,
        201px -1px 0 0px rgba(139, 0, 0, 0.65),
        /* Wet sheen effect - asymmetric light reflection */
        -0.5px 0 2px rgba(180, 20, 20, 0.4),
        0.5px 0 4px rgba(139, 0, 0, 0.6),
        41px 0 3px rgba(122, 0, 0, 0.55),
        82px 0 3.5px rgba(139, 0, 0, 0.5),
        119px 0 4px rgba(107, 0, 0, 0.6),
        163px 0 3px rgba(122, 0, 0, 0.52),
        199px 0 3.5px rgba(139, 0, 0, 0.58),
        /* Dark edges simulating surface tension */
        0 0 0 0.5px rgba(60, 0, 0, 0.8),
        42px 0 0 0.5px rgba(50, 0, 0, 0.75),
        83px 0 0 0.5px rgba(55, 0, 0, 0.8);
    animation: bloodDripViscousRealistic 14s cubic-bezier(0.35, 0, 0.15, 1) infinite;
    pointer-events: none;
    z-index: 3;
    opacity: 0.75;
    /* Slight wobble for realism */
    transform-origin: top center;
}

/* Blood droplet at the end - realistic surface tension */
.character-image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22%;
    width: 9px;
    height: 9px;
    /* Multi-layered droplet with realistic light refraction */
    background: 
        radial-gradient(ellipse 60% 70% at 35% 35%, 
            rgba(200, 40, 40, 0.4) 0%, 
            transparent 40%),
        radial-gradient(circle at 50% 50%, 
            #A50000 0%, 
            #8B0000 25%, 
            #6B0000 50%, 
            #5C0000 75%, 
            #4A0000 100%);
    /* Slightly irregular shape - real blood isn't perfectly round */
    border-radius: 47% 53% 52% 48% / 51% 49% 51% 49%;
    filter: blur(0.2px) contrast(1.2);
    box-shadow: 
        /* Top highlight - light reflection */
        inset -1px -2px 2px rgba(220, 50, 50, 0.35),
        inset 1px 2px 2px rgba(255, 80, 80, 0.25),
        /* Dark bottom - shadow and oxidation */
        inset 0 2px 3px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(40, 0, 0, 0.6),
        /* Outer glow - wet appearance */
        0 0 4px rgba(139, 0, 0, 0.7),
        0 3px 5px rgba(0, 0, 0, 0.6),
        /* Surface tension ring */
        0 0 0 0.5px rgba(180, 10, 10, 0.8),
        0 0 1px 0.5px rgba(60, 0, 0, 0.6);
    animation: bloodDropletRealistic 14s cubic-bezier(0.35, 0, 0.15, 1) infinite;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transform-origin: center center;
}

/* Realistic blood drip physics - irregular flow with gravity and viscosity */
@keyframes bloodDripViscousRealistic {
    0% {
        height: 0;
        opacity: 0;
        width: 3px;
        transform: translateX(0) rotate(0deg);
    }
    2% {
        opacity: 0.7;
        width: 3.5px;
    }
    5% {
        height: 12px;
        opacity: 0.8;
        transform: translateX(-0.3px) rotate(-0.5deg);
    }
    8% {
        height: 18px;
        width: 4px;
        transform: translateX(0.2px) rotate(0.3deg);
    }
    12% {
        height: 28px;
        opacity: 0.82;
        width: 3.8px;
        transform: translateX(-0.4px) rotate(-0.6deg);
    }
    16% {
        height: 36px;
        width: 4.2px;
        transform: translateX(0.3px) rotate(0.4deg);
    }
    22% {
        height: 44px;
        opacity: 0.85;
        width: 3.6px;
        transform: translateX(-0.2px) rotate(-0.3deg);
    }
    28% {
        height: 51px;
        width: 4.5px;
        transform: translateX(0.4px) rotate(0.5deg);
    }
    35% {
        height: 57px;
        opacity: 0.87;
        width: 3.9px;
        transform: translateX(-0.3px) rotate(-0.4deg);
    }
    42% {
        height: 62px;
        width: 4.3px;
        transform: translateX(0.2px) rotate(0.3deg);
    }
    50% {
        height: 66px;
        opacity: 0.85;
        width: 3.7px;
        transform: translateX(-0.2px) rotate(-0.2deg);
    }
    58% {
        height: 69px;
        width: 4px;
        transform: translateX(0.3px) rotate(0.4deg);
    }
    66% {
        height: 71px;
        opacity: 0.8;
        width: 3.5px;
        transform: translateX(-0.3px) rotate(-0.3deg);
    }
    74% {
        height: 73px;
        width: 3.8px;
        opacity: 0.72;
        transform: translateX(0.2px) rotate(0.2deg);
    }
    82% {
        height: 74px;
        opacity: 0.6;
        width: 3.3px;
        transform: translateX(-0.2px) rotate(-0.2deg);
    }
    90% {
        height: 75px;
        opacity: 0.4;
        width: 3px;
        transform: translateX(0.1px) rotate(0.1deg);
    }
    96% {
        height: 75px;
        opacity: 0.15;
        width: 2.8px;
        transform: translateX(-0.1px) rotate(-0.1deg);
    }
    100% {
        height: 75px;
        opacity: 0;
        width: 2.5px;
        transform: translateX(0) rotate(0deg);
    }
}

/* Realistic blood droplet - surface tension, gravity, and deformation */
@keyframes bloodDropletRealistic {
    0%, 18% {
        opacity: 0;
        transform: translateY(0) scaleX(1) scaleY(1);
        filter: blur(0.2px);
    }
    20% {
        opacity: 0.75;
        transform: translateY(0) scaleX(0.95) scaleY(1.05);
    }
    23% {
        opacity: 0.85;
        transform: translateY(1px) scaleX(1) scaleY(1);
    }
    26% {
        /* Droplet forming - surface tension building */
        opacity: 0.9;
        transform: translateY(2px) scaleX(1.08) scaleY(1.12);
        filter: blur(0.15px);
    }
    29% {
        /* About to detach - stretched by gravity */
        opacity: 0.92;
        transform: translateY(4px) scaleX(0.92) scaleY(1.18);
    }
    32% {
        /* Detaches and oscillates */
        opacity: 0.9;
        transform: translateY(7px) scaleX(1.1) scaleY(0.9);
        filter: blur(0.2px);
    }
    36% {
        /* Falling - gravity acceleration begins */
        opacity: 0.88;
        transform: translateY(11px) scaleX(0.95) scaleY(1.05);
    }
    40% {
        opacity: 0.85;
        transform: translateY(16px) scaleX(1.02) scaleY(0.98);
    }
    45% {
        /* Mid-fall - faster acceleration */
        opacity: 0.82;
        transform: translateY(22px) scaleX(0.96) scaleY(1.04);
        filter: blur(0.25px);
    }
    50% {
        opacity: 0.78;
        transform: translateY(29px) scaleX(1.03) scaleY(0.97);
    }
    56% {
        /* Air resistance causes slight deformation */
        opacity: 0.72;
        transform: translateY(37px) scaleX(0.94) scaleY(1.06);
        filter: blur(0.3px);
    }
    62% {
        opacity: 0.65;
        transform: translateY(46px) scaleX(1.04) scaleY(0.96);
    }
    68% {
        /* Terminal velocity - elongates slightly */
        opacity: 0.56;
        transform: translateY(55px) scaleX(0.92) scaleY(1.08);
        filter: blur(0.35px);
    }
    75% {
        opacity: 0.45;
        transform: translateY(64px) scaleX(0.98) scaleY(1.02);
    }
    82% {
        /* Beginning to break up */
        opacity: 0.32;
        transform: translateY(73px) scaleX(0.88) scaleY(1.1);
        filter: blur(0.4px);
    }
    88% {
        opacity: 0.18;
        transform: translateY(81px) scaleX(0.8) scaleY(1.15);
        filter: blur(0.5px);
    }
    94% {
        /* Nearly dissipated */
        opacity: 0.08;
        transform: translateY(88px) scaleX(0.7) scaleY(1.2);
        filter: blur(0.6px);
    }
    100% {
        opacity: 0;
        transform: translateY(95px) scaleX(0.5) scaleY(1.3);
        filter: blur(0.8px);
    }
}

.character-card:hover::before {
    opacity: 0.1;
}

.character-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px var(--color-shadow), 0 0 30px var(--color-glow-red);
    border-color: var(--color-blood-red-light);
}

.character-card.reserved {
    border-color: var(--color-reserved);
    opacity: 0.8;
}

.character-card.reserved:hover {
    border-color: var(--color-muted-gray);
}

.character-card.my-reservation {
    border-color: var(--color-success);
    background: linear-gradient(135deg, var(--color-dark-secondary) 0%, #1a2a1a 100%);
}

.character-card.my-reservation:hover {
    border-color: #3d6e2e;
}

/* Character name needs relative positioning for secondary drips */
.character-name {
    position: relative;
    z-index: 2;
}

/* Secondary/tributary blood drips - smaller trails branching from main flow */
.character-name::before {
    content: '';
    position: absolute;
    top: -270px;
    left: -60px;
    width: 1.8px;
    height: 0;
    background: linear-gradient(to bottom, 
        rgba(139, 0, 0, 0.55) 0%,
        rgba(107, 0, 0, 0.48) 15%,
        rgba(92, 0, 0, 0.38) 35%,
        rgba(75, 0, 0, 0.28) 55%,
        rgba(60, 10, 5, 0.22) 75%,
        transparent 100%);
    border-radius: 45% 55% 50% 50% / 55% 60% 40% 45%;
    filter: blur(0.3px);
    box-shadow: 
        /* Small tributary drips at different positions */
        80px 0 0 0.7px rgba(122, 0, 0, 0.48),
        81px 1px 0 0px rgba(107, 0, 0, 0.32),
        160px 0 0 0.6px rgba(139, 0, 0, 0.42),
        161px 1px 0 0px rgba(122, 0, 0, 0.28),
        /* Subtle glow for wetness */
        0 0 2px rgba(139, 0, 0, 0.38),
        80px 0 2px rgba(122, 0, 0, 0.33),
        160px 0 2px rgba(139, 0, 0, 0.35);
    animation: secondaryBloodDrip 16s cubic-bezier(0.38, 0, 0.18, 1) infinite;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transform-origin: top center;
}

.character-card:hover .character-name::before {
    opacity: 0.65;
}

/* Secondary drip animation - slower and shorter than main drip */
@keyframes secondaryBloodDrip {
    0% {
        height: 0;
        opacity: 0;
        width: 2px;
    }
    8% {
        height: 8px;
        opacity: 0.5;
        width: 2.2px;
    }
    18% {
        height: 16px;
        opacity: 0.6;
        width: 2px;
    }
    30% {
        height: 22px;
        opacity: 0.65;
        width: 2.3px;
    }
    45% {
        height: 28px;
        opacity: 0.7;
        width: 1.9px;
    }
    60% {
        height: 32px;
        opacity: 0.65;
        width: 2.1px;
    }
    75% {
        height: 35px;
        opacity: 0.55;
        width: 1.8px;
    }
    88% {
        height: 37px;
        opacity: 0.35;
        width: 1.7px;
    }
    100% {
        height: 38px;
        opacity: 0;
        width: 1.5px;
    }
}

/* Staggered blood drip timing for each character */
.character-card:nth-child(1)::after {
    animation-delay: 0s;
    left: 15%;
}

.character-card:nth-child(1) .character-image-container::before {
    animation-delay: 0s;
    left: 17%;
}

.character-card:nth-child(2)::after {
    animation-delay: 2s;
    left: 25%;
}

.character-card:nth-child(2) .character-image-container::before {
    animation-delay: 2s;
    left: 27%;
}

.character-card:nth-child(3)::after {
    animation-delay: 4s;
    left: 18%;
}

.character-card:nth-child(3) .character-image-container::before {
    animation-delay: 4s;
    left: 20%;
}

.character-card:nth-child(4)::after {
    animation-delay: 6s;
    left: 22%;
}

.character-card:nth-child(4) .character-image-container::before {
    animation-delay: 6s;
    left: 24%;
}

.character-card:nth-child(5)::after {
    animation-delay: 8s;
    left: 20%;
}

.character-card:nth-child(5) .character-image-container::before {
    animation-delay: 8s;
    left: 22%;
}

.character-card:nth-child(6)::after {
    animation-delay: 3s;
    left: 28%;
}

.character-card:nth-child(6) .character-image-container::before {
    animation-delay: 3s;
    left: 30%;
}

.character-card:nth-child(7)::after {
    animation-delay: 7s;
    left: 16%;
}

.character-card:nth-child(7) .character-image-container::before {
    animation-delay: 7s;
    left: 18%;
}

/* Character Image Styles */
.character-image-container {
    position: relative;
    width: 100%;
    height: 250px;
    margin-bottom: 20px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-dark-tertiary);
    border: 2px solid var(--color-blood-red-dark);
}

/* Ultra-realistic blood splatter overlay - arterial spray, impact, and coagulation */
.character-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        /* Main arterial spray patterns - high velocity impact */
        radial-gradient(ellipse 140% 80% at 18% 28%, 
            #A50000 0%, 
            #8B0000 1%, 
            #750000 2.5%, 
            rgba(107, 0, 0, 0.7) 4%, 
            rgba(92, 0, 0, 0.45) 7%, 
            rgba(75, 0, 0, 0.25) 10%,
            transparent 14%),
        radial-gradient(ellipse 120% 90% at 82% 22%, 
            #920000 0%, 
            #7A0000 1.2%, 
            #6B0000 3%, 
            rgba(92, 0, 0, 0.65) 5%, 
            rgba(74, 0, 0, 0.4) 8%,
            transparent 12%),
        
        /* Medium impact splatters with oxidation rings */
        radial-gradient(circle at 62% 12%, 
            #A50000 0%, 
            #8B0000 0.8%, 
            #6B0000 2%, 
            rgba(75, 0, 0, 0.7) 3.5%,
            rgba(60, 10, 5, 0.4) 5%,
            transparent 7%),
        radial-gradient(circle at 14% 78%, 
            #8B0000 0%, 
            #6B0000 1%, 
            #5C0000 2.5%, 
            rgba(60, 0, 0, 0.6) 4%,
            rgba(50, 8, 4, 0.35) 6%,
            transparent 9%),
        radial-gradient(circle at 88% 68%, 
            #920000 0%, 
            #7A0000 1%, 
            rgba(92, 0, 0, 0.65) 2.5%, 
            rgba(70, 10, 5, 0.4) 4.5%,
            transparent 8%),
        
        /* Velocity trail splatters - directional */
        radial-gradient(ellipse 180% 45% at 35% 42%, 
            rgba(139, 0, 0, 0.3) 0%, 
            rgba(107, 0, 0, 0.2) 3%, 
            transparent 8%),
        radial-gradient(ellipse 160% 50% at 72% 58%, 
            rgba(122, 0, 0, 0.28) 0%, 
            rgba(92, 0, 0, 0.18) 2.5%, 
            transparent 7%),
        
        /* Small satellite droplets from impact */
        radial-gradient(circle at 44% 58%, #8B0000 0%, rgba(107, 0, 0, 0.7) 1%, transparent 3.5%),
        radial-gradient(circle at 68% 84%, #7A0000 0%, rgba(92, 0, 0, 0.6) 0.8%, transparent 2.8%),
        radial-gradient(circle at 26% 16%, #8B0000 0%, rgba(107, 0, 0, 0.65) 0.9%, transparent 3%),
        radial-gradient(circle at 52% 38%, #920000 0%, rgba(122, 0, 0, 0.7) 1%, transparent 3.2%),
        radial-gradient(circle at 78% 48%, #7A0000 0%, rgba(92, 0, 0, 0.55) 0.7%, transparent 2.5%),
        radial-gradient(circle at 32% 72%, #8B0000 0%, rgba(107, 0, 0, 0.6) 0.85%, transparent 2.8%),
        
        /* Coagulation patterns - dried blood with darker edges */
        radial-gradient(circle at 38% 26%, 
            rgba(60, 10, 5, 0.35) 0%, 
            rgba(50, 8, 4, 0.25) 2%, 
            rgba(45, 8, 4, 0.15) 3.5%,
            transparent 5%),
        radial-gradient(circle at 72% 52%, 
            rgba(55, 8, 4, 0.4) 0%, 
            rgba(45, 8, 4, 0.28) 2%, 
            rgba(40, 7, 3, 0.18) 3.5%,
            transparent 6%),
        radial-gradient(circle at 16% 64%, 
            rgba(50, 9, 5, 0.38) 0%, 
            rgba(42, 7, 4, 0.26) 2%, 
            transparent 4.5%),
        
        /* Micro-splatter texture for realism */
        radial-gradient(circle at 48% 32%, rgba(107, 0, 0, 0.25) 0%, transparent 1.5%),
        radial-gradient(circle at 64% 68%, rgba(92, 0, 0, 0.22) 0%, transparent 1.3%),
        radial-gradient(circle at 28% 88%, rgba(122, 0, 0, 0.2) 0%, transparent 1.4%),
        radial-gradient(circle at 84% 18%, rgba(107, 0, 0, 0.23) 0%, transparent 1.2%),
        radial-gradient(circle at 42% 92%, rgba(92, 0, 0, 0.18) 0%, transparent 1.1%),
        radial-gradient(circle at 92% 44%, rgba(107, 0, 0, 0.2) 0%, transparent 1.3%);
    pointer-events: none;
    opacity: 0.4;
    mix-blend-mode: multiply;
    filter: blur(0.4px) contrast(1.1);
    animation: bloodPulseRealistic 10s ease-in-out infinite;
}

/* Realistic blood oxidation pulse - simulates drying and wetness variation */
@keyframes bloodPulseRealistic {
    0% {
        opacity: 0.38;
        filter: blur(0.4px) contrast(1.1) brightness(0.98);
    }
    15% {
        opacity: 0.42;
        filter: blur(0.35px) contrast(1.12) brightness(1);
    }
    30% {
        opacity: 0.45;
        filter: blur(0.38px) contrast(1.15) brightness(0.99);
    }
    45% {
        opacity: 0.44;
        filter: blur(0.4px) contrast(1.13) brightness(0.97);
    }
    60% {
        opacity: 0.41;
        filter: blur(0.42px) contrast(1.11) brightness(0.96);
    }
    75% {
        opacity: 0.39;
        filter: blur(0.38px) contrast(1.1) brightness(0.95);
    }
    90% {
        opacity: 0.37;
        filter: blur(0.4px) contrast(1.12) brightness(0.97);
    }
    100% {
        opacity: 0.38;
        filter: blur(0.4px) contrast(1.1) brightness(0.98);
    }
}

.character-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    transition: var(--transition-standard);
    filter: brightness(0.9) contrast(1.1);
    position: relative;
}

/* Microscopic blood texture - fibrin strands and coagulation */
.character-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        /* Fibrin network patterns - the protein strands in blood clots */
        repeating-linear-gradient(
            42deg,
            transparent 0px,
            transparent 2px,
            rgba(139, 0, 0, 0.03) 2px,
            rgba(139, 0, 0, 0.03) 2.3px,
            transparent 2.3px,
            transparent 8px
        ),
        repeating-linear-gradient(
            -38deg,
            transparent 0px,
            transparent 2px,
            rgba(122, 0, 0, 0.025) 2px,
            rgba(122, 0, 0, 0.025) 2.2px,
            transparent 2.2px,
            transparent 9px
        ),
        repeating-linear-gradient(
            78deg,
            transparent 0px,
            transparent 3px,
            rgba(107, 0, 0, 0.02) 3px,
            rgba(107, 0, 0, 0.02) 3.2px,
            transparent 3.2px,
            transparent 11px
        ),
        /* Platelet aggregation clusters - small irregular spots */
        radial-gradient(ellipse 2px 1.5px at 12% 18%, rgba(92, 0, 0, 0.08) 0%, transparent 100%),
        radial-gradient(ellipse 1.5px 2px at 34% 42%, rgba(107, 0, 0, 0.07) 0%, transparent 100%),
        radial-gradient(ellipse 2px 1.8px at 67% 23%, rgba(122, 0, 0, 0.06) 0%, transparent 100%),
        radial-gradient(ellipse 1.8px 2.2px at 89% 58%, rgba(92, 0, 0, 0.075) 0%, transparent 100%),
        radial-gradient(ellipse 2.2px 1.6px at 23% 76%, rgba(107, 0, 0, 0.065) 0%, transparent 100%),
        radial-gradient(ellipse 1.7px 2px at 56% 84%, rgba(122, 0, 0, 0.07) 0%, transparent 100%),
        radial-gradient(ellipse 2px 1.9px at 78% 12%, rgba(92, 0, 0, 0.08) 0%, transparent 100%),
        radial-gradient(ellipse 1.9px 2.1px at 45% 67%, rgba(107, 0, 0, 0.06) 0%, transparent 100%),
        /* Serum separation patterns - lighter areas */
        radial-gradient(ellipse 8px 6px at 28% 34%, rgba(180, 30, 30, 0.04) 0%, transparent 100%),
        radial-gradient(ellipse 7px 5px at 72% 68%, rgba(170, 25, 25, 0.035) 0%, transparent 100%),
        radial-gradient(ellipse 6px 7px at 15% 82%, rgba(160, 20, 20, 0.04) 0%, transparent 100%);
    pointer-events: none;
    opacity: 0.6;
    mix-blend-mode: overlay;
    filter: blur(0.2px);
    animation: coagulationShift 15s ease-in-out infinite alternate;
    z-index: 1;
}

/* Subtle animation simulating ongoing coagulation process */
@keyframes coagulationShift {
    0% {
        opacity: 0.55;
        filter: blur(0.2px) contrast(1);
    }
    50% {
        opacity: 0.65;
        filter: blur(0.15px) contrast(1.05);
    }
    100% {
        opacity: 0.6;
        filter: blur(0.25px) contrast(0.98);
    }
}

/* Specific positioning for better portrait framing */
.character-card[data-character-id="halfling-ranger"] .character-image {
    object-position: center 25%;
}

.character-card[data-character-id="dragonborn-fighter"] .character-image {
    object-position: center 20%;
}

.character-card[data-character-id="dwarf-paladin"] .character-image {
    object-position: center 30%;
}

.character-card[data-character-id="stout-halfling-fighter"] .character-image {
    object-position: center 25%;
}

.character-card[data-character-id="dragonborn-sorcerer"] .character-image {
    object-position: center 20%;
}

.character-card[data-character-id="drow-sorcerer"] .character-image {
    object-position: center 15%;
}

.character-card[data-character-id="moon-elf-bladesinger"] .character-image {
    object-position: center 25%;
}

.character-card:hover .character-image {
    transform: scale(1.05);
    filter: brightness(1) contrast(1.15);
}

.character-image-container.image-failed {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-dark-tertiary) 0%, var(--color-dark-bg) 100%);
}

.character-image-container.image-failed::after {
    content: '🎭';
    font-size: 4rem;
    opacity: 0.3;
}

.image-source {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: var(--color-bone-white);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    text-decoration: none;
    transition: var(--transition-standard);
    backdrop-filter: blur(4px);
    border: 1px solid var(--color-blood-red-dark);
    z-index: 10;
}

.image-source:hover {
    background: rgba(139, 0, 0, 0.9);
    border-color: var(--color-blood-red-light);
    transform: translateY(-2px);
}

.character-name {
    font-family: var(--font-title);
    font-size: 1.5rem;
    color: var(--color-blood-red-light);
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.character-status {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-available {
    background: var(--color-success);
    color: var(--color-bone-white);
}

.status-reserved {
    background: var(--color-reserved);
    color: var(--color-bone-white);
}

.status-yours {
    background: var(--color-blood-red);
    color: var(--color-bone-white);
}

.reserved-by {
    font-size: 0.95rem;
    color: var(--color-muted-gray);
    margin-bottom: 15px;
    font-style: italic;
}

.character-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.btn-reserve {
    background: var(--color-blood-red);
    color: var(--color-bone-white);
    padding: 10px;
    width: 100%;
}

.btn-reserve:hover:not(:disabled) {
    background: var(--color-blood-red-light);
}

.btn-cancel {
    background: var(--color-dark-tertiary);
    color: var(--color-bone-white);
    padding: 8px;
    width: 100%;
    font-size: 0.9rem;
}

.btn-view {
    background: var(--color-dark-tertiary);
    color: var(--color-bone-white);
    padding: 10px;
    width: 100%;
    border: 1px solid var(--color-blood-red-dark);
}

.btn-view:hover {
    background: var(--color-blood-red-dark);
}

/* ==========================================
   MODAL
   ========================================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: var(--color-dark-secondary);
    border: 2px solid var(--color-blood-red);
    border-radius: 8px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 8px 32px var(--color-shadow), 0 0 40px var(--color-glow-red);
}

.modal-content h3 {
    font-family: var(--font-title);
    font-size: 1.8rem;
    color: var(--color-blood-red-light);
    margin-bottom: 15px;
}

.modal-content p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    line-height: 1.6;
}

.modal-actions {
    display: flex;
    gap: 15px;
}

.modal-actions .btn {
    flex: 1;
}

/* Fate Choice Buttons */
.fate-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.btn-fate-accept,
.btn-fate-reroll,
.btn-fate-manual {
    width: 100%;
    padding: 14px 20px;
    font-size: 1.1rem;
    font-family: var(--font-title);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-fate-accept {
    background: linear-gradient(135deg, #2d5016 0%, #1a3009 100%);
    border: 2px solid #3d6e2e;
    color: var(--color-bone-white);
    box-shadow: 0 4px 12px rgba(45, 80, 22, 0.4);
}

.btn-fate-accept:hover {
    background: linear-gradient(135deg, #3d6e2e 0%, #2d5016 100%);
    box-shadow: 0 6px 20px rgba(45, 80, 22, 0.6);
    transform: translateY(-2px);
    border-color: #4d7e3e;
}

.btn-fate-reroll {
    background: linear-gradient(135deg, var(--color-blood-red) 0%, var(--color-blood-red-dark) 100%);
    border: 2px solid var(--color-blood-red-light);
    color: var(--color-bone-white);
    box-shadow: 0 4px 12px var(--color-glow-red);
}

.btn-fate-reroll:hover {
    background: linear-gradient(135deg, var(--color-blood-red-light) 0%, var(--color-blood-red) 100%);
    box-shadow: 0 6px 20px var(--color-glow-red);
    transform: translateY(-2px);
}

.btn-fate-manual {
    background: linear-gradient(135deg, var(--color-dark-tertiary) 0%, var(--color-dark-secondary) 100%);
    border: 2px solid var(--color-muted-gray);
    color: var(--color-bone-white);
    box-shadow: 0 4px 12px rgba(107, 107, 107, 0.3);
}

.btn-fate-manual:hover {
    background: linear-gradient(135deg, var(--color-muted-gray) 0%, var(--color-dark-tertiary) 100%);
    box-shadow: 0 6px 20px rgba(107, 107, 107, 0.5);
    transform: translateY(-2px);
    border-color: #8b8b8b;
}

@media (max-width: 480px) {
    .fate-options {
        gap: 10px;
    }
    
    .btn-fate-accept,
    .btn-fate-reroll,
    .btn-fate-manual {
        padding: 12px 16px;
        font-size: 1rem;
    }
}

/* ==========================================
   LOADING OVERLAY
   ========================================== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--color-dark-tertiary);
    border-top: 4px solid var(--color-blood-red-light);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

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

.loading-overlay p {
    font-size: 1.2rem;
    color: var(--color-bone-white);
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */
@media (max-width: 768px) {
    .main-title {
        font-size: 2rem;
    }
    
    .tagline {
        font-size: 1.1rem;
    }
    
    .user-info {
        flex-direction: column;
        gap: 10px;
    }
    
    .characters-grid {
        grid-template-columns: 1fr;
    }
    
    .events-grid {
        grid-template-columns: 1fr;
    }
    
    .calendar-grid {
        grid-template-columns: 1fr;
    }
    
    .event-card {
        padding: 20px;
    }
    
    .event-registration-card {
        padding: 20px;
    }
    
    .auth-card {
        padding: 25px;
    }
    
    .section-title {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 1.5rem;
    }
    
    .character-name {
        font-size: 1.2rem;
    }
    
    .modal-content {
        padding: 20px;
    }
}