/* Extracted from index.html inline <style> without modification */
/* Metin2 Themed Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #2b1f16; /* Darker brown */
    border-radius: 10px;
    border: 1px solid #4a3328;
}
::-webkit-scrollbar-thumb {
    background: #6a4f3e; /* Lighter brown */
    border-radius: 10px;
    border: 1px solid #8c6a58;
}
::-webkit-scrollbar-thumb:hover {
    background: #8c6a58; /* Even lighter brown */
}

body {
    font-family: 'Lora', serif;
    background-color: #1a150f; 
    color: #e6d8c4; 
    background-size: cover;
    background-attachment: fixed;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    min-width: 1900px; 
    transition: background-color 0.5s ease; /* Smooth transition for theme change */
}

/* Main container will now have a fixed width */
.fixed-width-container {
    min-width: 1800px; 
    max-width: 1800px;
}

.metin2-panel {
    background-color: rgba(30, 22, 16, 0.9); 
    border: 2px solid #5a4b3d; 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
    position: relative;
    padding: 2.5rem;
    transition: all 0.3s ease-out;
}

.metin2-panel::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid #8c6a58;
    pointer-events: none;
    z-index: -1;
    transition: border 0.3s ease-out;
}

.metin2-header-text {
    font-family: 'Cinzel Decorative', serif;
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    letter-spacing: 2px;
    animation: fadeInScale 1s ease-out forwards;
    transition: all 0.3s ease-out;
}

.metin2-button {
    background-color: #5a4b3d;
    color: #e6d8c4;
    font-family: 'Lora', serif;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    border: 2px solid #8c6a58;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    transition: all 0.2s ease-in-out;
}

.metin2-button:hover {
    background-color: #6a4f3e;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.6);
}

.metin2-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.metin2-input {
    background-color: #2b1f16;
    border: 1px solid #4a3328;
    color: #e6d8c4;
    font-family: 'Lora', serif;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}

.metin2-event-card {
    background-color: rgba(43, 31, 22, 0.8);
    border: 1px solid #6a4f3e;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    transition: all 0.15s ease-in-out; /* Keep existing transition */
    cursor: pointer; /* Indicate clickable */
}

.metin2-event-card:hover {
    background-color: rgba(58, 45, 36, 0.9);
    transform: translateY(-1px) scale(1.02);
}

/* Event Highlighting Styles */
.metin2-event-card.highlight-color-1 {
    background-color: rgba(178, 34, 34, 0.85) !important; /* Firebrick */
    border-color: rgba(255, 99, 71, 1) !important; /* Tomato */
    box-shadow: 0 0 10px rgba(255, 99, 71, 0.6), 0 2px 4px rgba(0,0,0,0.4) !important;
}
.metin2-event-card.highlight-color-1:hover {
    background-color: rgba(205, 0, 0, 0.9) !important; /* Brighter red on hover */
    border-color: rgba(255, 69, 0, 1) !important; 
    transform: translateY(-1px) scale(1.02); /* Keep hover transform */
}

.metin2-event-card.highlight-color-2 {
    background-color: rgba(34, 139, 34, 0.85) !important; /* ForestGreen */
    border-color: rgba(60, 179, 113, 1) !important; /* MediumSeaGreen */
    box-shadow: 0 0 10px rgba(60, 179, 113, 0.6), 0 2px 4px rgba(0,0,0,0.4) !important;
}
.metin2-event-card.highlight-color-2:hover {
    background-color: rgba(0, 128, 0, 0.9) !important; /* Green on hover */
    border-color: rgba(46, 139, 87, 1) !important; 
    transform: translateY(-1px) scale(1.02);
}

.metin2-event-card.highlight-color-3 {
    background-color: rgba(70, 130, 180, 0.85) !important; /* SteelBlue */
    border-color: rgba(100, 149, 237, 1) !important; /* CornflowerBlue */
    box-shadow: 0 0 10px rgba(100, 149, 237, 0.6), 0 2px 4px rgba(0,0,0,0.4) !important;
}
.metin2-event-card.highlight-color-3:hover {
    background-color: rgba(70, 130, 180, 0.9) !important; /* Darker SteelBlue on hover */
    border-color: rgba(30, 144, 255, 1) !important;
    transform: translateY(-1px) scale(1.02);
}

.metin2-event-card.highlight-color-4 {
    background-color: rgba(147, 112, 219, 0.85) !important; /* MediumPurple */
    border-color: rgba(186, 85, 211, 1) !important; /* MediumOrchid */
    box-shadow: 0 0 10px rgba(186, 85, 211, 0.6), 0 2px 4px rgba(0,0,0,0.4) !important;
}
.metin2-event-card.highlight-color-4:hover {
    background-color: rgba(138, 43, 226, 0.9) !important; /* BlueViolet on hover */
    border-color: rgba(153, 50, 204, 1) !important;
    transform: translateY(-1px) scale(1.02);
}

.metin2-event-card.highlight-color-5 {
    background-color: rgba(218, 165, 32, 0.85) !important; /* Goldenrod */
    border-color: rgba(255, 215, 0, 1) !important; /* Gold */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6), 0 2px 4px rgba(0,0,0,0.4) !important;
}
.metin2-event-card.highlight-color-5:hover {
    background-color: rgba(205, 133, 63, 0.9) !important; /* Peru on hover */
    border-color: rgba(255, 165, 0, 1) !important;
    transform: translateY(-1px) scale(1.02);
}

.metin2-event-card.highlight-color-6 { /* Teal/Aqua */
    background-color: rgba(0, 128, 128, 0.85) !important; /* Teal */
    border-color: rgba(72, 209, 204, 1) !important; /* MediumTurquoise */
    box-shadow: 0 0 10px rgba(72, 209, 204, 0.6), 0 2px 4px rgba(0,0,0,0.4) !important;
}
.metin2-event-card.highlight-color-6:hover {
    background-color: rgba(0, 139, 139, 0.9) !important; /* DarkCyan */
    border-color: rgba(64, 224, 208, 1) !important; /* Turquoise */
    transform: translateY(-1px) scale(1.02);
}

.metin2-event-card.highlight-color-7 { /* Brown/Bronze */
    background-color: rgba(160, 82, 45, 0.85) !important; /* Sienna */
    border-color: rgba(205, 133, 63, 1) !important; /* Peru */
    box-shadow: 0 0 10px rgba(205, 133, 63, 0.6), 0 2px 4px rgba(0,0,0,0.4) !important;
}
.metin2-event-card.highlight-color-7:hover {
    background-color: rgba(139, 69, 19, 0.9) !important; /* SaddleBrown */
    border-color: rgba(210, 105, 30, 1) !important; /* Chocolate */
    transform: translateY(-1px) scale(1.02);
}

.metin2-event-card.highlight-color-8 { /* Pink/Magenta */
    background-color: rgba(199, 21, 133, 0.85) !important; /* MediumVioletRed */
    border-color: rgba(219, 112, 147, 1) !important; /* PaleVioletRed */
    box-shadow: 0 0 10px rgba(219, 112, 147, 0.6), 0 2px 4px rgba(0,0,0,0.4) !important;
}
.metin2-event-card.highlight-color-8:hover {
    background-color: rgba(200, 0, 120, 0.9) !important; /* Darker variant */
    border-color: rgba(255, 20, 147, 1) !important; /* DeepPink */
    transform: translateY(-1px) scale(1.02);
}

.metin2-event-card.highlight-color-9 { /* Bright Lime/Chartreuse */
    background-color: rgba(127, 255, 0, 0.85) !important; /* Chartreuse */
    border-color: rgba(173, 255, 47, 1) !important; /* GreenYellow */
    box-shadow: 0 0 10px rgba(173, 255, 47, 0.6), 0 2px 4px rgba(0,0,0,0.4) !important;
}
.metin2-event-card.highlight-color-9:hover {
    background-color: rgba(107, 220, 0, 0.9) !important; /* Darker Chartreuse variant */
    border-color: rgba(50, 205, 50, 1) !important; /* LimeGreen */
    transform: translateY(-1px) scale(1.02);
}

.metin2-event-card.highlight-color-10 { /* Slate Gray/Dark Silver */
    background-color: rgba(100, 110, 120, 0.85) !important; /* Muted Slate */
    border-color: rgba(150, 160, 170, 1) !important; /* Lighter Slate */
    box-shadow: 0 0 10px rgba(150, 160, 170, 0.6), 0 2px 4px rgba(0,0,0,0.4) !important;
}
.metin2-event-card.highlight-color-10:hover {
    background-color: rgba(80, 90, 100, 0.9) !important; /* Darker Slate */
    border-color: rgba(119, 136, 153, 1) !important; /* LightSlateGray */
    transform: translateY(-1px) scale(1.02);
}

.metin2-tooltip {
    background-color: rgba(26, 21, 15, 0.98); 
    border: 2px solid #ffd700; 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
    padding: 1rem;
    animation: tooltipFadeIn 0.2s ease-out forwards;
}

.day-cell {
    background-color: rgba(43, 31, 22, 0.7); 
    border: 1px solid #4a3328;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
    transition: all 0.2s ease-in-out;
}

.day-cell.is-current-month {
    background-color: rgba(58, 45, 36, 0.8);
}

.day-cell.is-today {
    border: 3px solid #ffcc00; 
    box-shadow: 0 0 15px rgba(255,204,0,0.5), inset 0 0 10px rgba(255,204,0,0.3);
    animation: pulseToday 1.3s infinite alternate;
}

.day-cell.is-past {
    background-color: rgba(30, 22, 16, 0.6);
    color: #9a8c7b;
    filter: grayscale(50%); 
}

.day-cell.is-weekend {
    background-color: rgba(50, 36, 25, 0.85);
}

/* Animations */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulseToday {
    from {
        box-shadow: 0 0 15px rgba(255,204,0,0.5), inset 0 0 10px rgba(255,204,0,0.3);
    }
    to {
        box-shadow: 0 0 25px rgba(255,204,0,0.8), inset 0 0 15px rgba(255,204,0,0.5);
    }
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading animation */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.loading-shimmer {
    background: linear-gradient(to right, #2b1f16 8%, #4a3328 18%, #2b1f16 33%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    /* Default border-radius, can be overridden by Tailwind utilities */
    border-radius: 8px; 
    /* Height, width, margin will be controlled by Tailwind utilities on specific skeleton elements */
}

/* Error shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.error-shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

.vertical-text {
    font-family: 'MedievalSharp', cursive;
    color: #d4af37; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    letter-spacing: 2px;
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    font-weight: 800;
}

.vertical-text a {
    color: #d4af37;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.vertical-text a:hover {
    color: #ffd700;
    text-decoration: underline;
}

/* Animation for the sapphire glow */
@keyframes pulseSapphire {
    from {
        box-shadow: 0 0 8px rgba(72, 209, 204, 0.6), 0 0 12px rgba(100, 149, 237, 0.5), 0 4px 8px rgba(0,0,0,0.4);
    }
    to {
        box-shadow: 0 0 16px rgba(72, 209, 204, 0.9), 0 0 24px rgba(100, 149, 237, 0.7), 0 4px 8px rgba(0,0,0,0.4);
    }
}

/* Class to apply the sapphire theme */
.shiny-sapphire {
    background-color: #0F52BA; /* Sapphire Blue */
    border-color: #4682B4; /* Lighter SteelBlue for accent */
    animation: pulseSapphire 1.5s infinite alternate ease-in-out;
}
.shiny-sapphire:hover {
    background-color: #1E90FF; /* Brighter DodgerBlue on hover */
}

/* Keyframe animation for the shiny/shimmer effect */
@keyframes shine {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Class for the shiny Tigerghost text effect */
.shiny-tigerghost-text {
    /* Fiery gradient from orange to yellow and back */
    background-image: linear-gradient(to right, #f97316, #facc15, #f97316, #fde047, #f97316);
    background-size: 200% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text; /* For browser compatibility */
    animation: shine 4s linear infinite;
    text-shadow: 0 0 8px rgba(253, 224, 71, 0.5); /* Optional yellow glow */
}

/* Class for the shiny Sapphire text effect */
.shiny-sapphire-text {
    background-image: linear-gradient(to right, #2563eb, #06b6d4, #2563eb, #67e8f9, #2563eb);
    background-size: 200% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text; /* For browser compatibility */
    animation: shine 4s linear infinite;
    text-shadow: 0 0 8px rgba(103, 232, 249, 0.5); /* Optional cyan glow */
}

/* 🎃 START: HALLOWEEN THEME STYLES 🎃 */

.halloween-theme {
    background-color: #0d0c11;
    background-image: url('https://www.transparenttextures.com/patterns/crissxcross.png');
    color: #f5e5c5;
}

.halloween-theme ::-webkit-scrollbar-track {
    background: #2a1d32;
    border-color: #4a3350;
}

.halloween-theme ::-webkit-scrollbar-thumb {
    background: #e67e22; /* Carrot Orange */
    border-color: #d35400; /* Pumpkin Orange */
}

.halloween-theme ::-webkit-scrollbar-thumb:hover {
    background: #f39c12; /* Lighter Orange */
}

.halloween-theme .metin2-panel {
    background-color: rgba(26, 22, 30, 0.95);
    border: 2px solid #5a3d6a;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7), 0 0 15px rgba(230, 126, 34, 0.4);
}

.halloween-theme .metin2-panel::before {
    border: 2px solid #d35400;
}

.halloween-theme .metin2-header-text {
    font-family: 'Creepster', cursive;
    color: #e67e22;
    text-shadow: 3px 3px 5px rgba(0,0,0,0.9);
    letter-spacing: 4px;
}

.halloween-theme .metin2-button {
    background-color: #4a2c49;
    color: #f5e5c5;
    border: 2px solid #d35400;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5), inset 0 0 5px rgba(0,0,0,0.3);
}

.halloween-theme .metin2-button:hover {
    background-color: #6a4c69;
    border-color: #f39c12;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.7), 0 0 8px rgba(243, 156, 18, 0.5);
}

.halloween-theme .metin2-event-card {
    background-color: rgba(50, 40, 60, 0.9);
    border: 1px solid #7a5d8a;
}

.halloween-theme .metin2-event-card:hover {
    background-color: rgba(65, 50, 75, 0.95);
    border-color: #e67e22;
    transform: translateY(-2px) scale(1.03);
}

.halloween-theme .metin2-event-card img {
    border-color: #e67e22;
}

.halloween-theme .text-yellow-100 {
    color: #ffdead; /* Navajo White */
}

.halloween-theme .metin2-tooltip {
    background-color: rgba(20, 15, 25, 0.98);
    border: 2px solid #e67e22;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.8);
}

.halloween-theme .day-cell {
    background-color: rgba(30, 25, 40, 0.8);
    border: 1px solid #4a3350;
}

.halloween-theme .day-cell.is-current-month {
    background-color: rgba(45, 35, 55, 0.85);
}

.halloween-theme .day-cell.is-today {
    border: 3px solid #f39c12;
    box-shadow: 0 0 20px rgba(243, 156, 18, 0.6), inset 0 0 12px rgba(243, 156, 18, 0.4);
    animation: pulseHalloween 1.3s infinite alternate;
}

@keyframes pulseHalloween {
    from {
        box-shadow: 0 0 20px rgba(243,156,18,0.6), inset 0 0 12px rgba(243,156,18,0.4);
    }
    to {
        box-shadow: 0 0 30px rgba(243,156,18,0.9), inset 0 0 18px rgba(243,156,18,0.6);
    }
}

.halloween-theme .day-cell.is-past {
    background-color: rgba(20, 15, 25, 0.7);
    filter: grayscale(60%) brightness(0.8);
}

.halloween-theme .day-cell.is-weekend {
    background-color: rgba(50, 40, 60, 0.85);
}

.halloween-theme .text-yellow-300 {
    color: #f39c12;
}

.halloween-theme .text-yellow-200 {
    color: #e67e22;
}

/* 🎃 END: HALLOWEEN THEME STYLES 🎃 */

/* 🎄 START: CHRISTMAS THEME STYLES 🎄 */

.christmas-theme {
    background-color: #0c1b1b;
    color: #f2f2f2;
}

.christmas-theme ::-webkit-scrollbar-track { background: #123; border-color: #255; }
.christmas-theme ::-webkit-scrollbar-thumb { background: #c0392b; border-color: #e74c3c; }
.christmas-theme ::-webkit-scrollbar-thumb:hover { background: #ff5c4d; }

.christmas-theme .metin2-panel {
    background-color: rgba(16, 30, 30, 0.92);
    border: 2px solid #2ecc71; /* festive green */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.7), 0 0 18px rgba(192, 57, 43, 0.45);
}

.christmas-theme .metin2-panel::before { border: 2px solid #c0392b; }

.christmas-theme .metin2-header-text {
    font-family: 'Mountains of Christmas', cursive;
    color: #ffdf6b; /* warm gold */
    text-shadow: 0 0 10px rgba(255, 223, 107, 0.5), 2px 2px 4px rgba(0,0,0,0.9);
    letter-spacing: 2px;
}

.christmas-theme .metin2-button {
    background-color: #1f3d1f; /* deep green */
    color: #ffffff;
    border: 2px solid #c0392b; /* red */
    box-shadow: 0 4px 8px rgba(0,0,0,0.6), inset 0 0 6px rgba(255,255,255,0.08);
    font-family: 'Mountains of Christmas', cursive;
}
.christmas-theme .metin2-button:hover {
    background-color: #275127;
    border-color: #ff5c4d;
}

.christmas-theme .metin2-event-card {
    background-color: rgba(25, 45, 25, 0.9);
    border: 1px solid #2ecc71;
}
.christmas-theme .metin2-event-card:hover {
    background-color: rgba(32, 58, 32, 0.95);
    border-color: #c0392b;
}

.christmas-theme .metin2-tooltip { background-color: rgba(16, 24, 24, 0.98); border: 2px solid #ffdf6b; }

.christmas-theme .day-cell { background-color: rgba(18, 36, 36, 0.8); border: 1px solid #2a4; }
.christmas-theme .day-cell.is-current-month { background-color: rgba(22, 44, 44, 0.85); }
.christmas-theme .day-cell.is-weekend { background-color: rgba(26, 50, 50, 0.85); }
.christmas-theme .day-cell.is-past { filter: grayscale(50%) brightness(0.85); }
.christmas-theme .day-cell.is-today {
    border: 3px solid #ffdf6b;
    box-shadow: 0 0 20px rgba(255, 223, 107, 0.6), inset 0 0 12px rgba(255, 223, 107, 0.4);
}

.christmas-theme .text-yellow-300 { color: #ffdf6b; }
.christmas-theme .text-yellow-200 { color: #c8facc; }

/* Snow overlay */
.snow-overlay {
    pointer-events: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000;
    overflow: hidden;
}

.snowflake {
    position: absolute;
    top: -2rem;
    width: var(--size, 6px);
    height: var(--size, 6px);
    background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 60%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    opacity: var(--opacity, 0.9);
    transform: translate3d(0, 0, 0);
    animation: snowfall var(--duration, 10s) linear infinite;
    animation-delay: var(--delay, 0s);
    left: var(--x, 50%);
}

@keyframes snowfall {
    0% { transform: translate3d(0, -10px, 0); }
    100% { transform: translate3d(var(--drift, 40px), 110vh, 0); }
}

/* 🎄 END: CHRISTMAS THEME STYLES 🎄 */