/* --- Base and Font Styles --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #1a1a2e; /* Dark purple background */
    background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 74%);
    position: relative;
    overflow-x: hidden;
}

.logo-font {
    font-family: 'Permanent Marker', cursive;
}

/* --- Navigation Styles --- */
.nav-link {
    @apply px-4 py-2 text-gray-300 rounded-md hover:bg-pink-500/20 hover:text-pink-300 transition-colors;
}
.nav-link.active {
    @apply bg-pink-500 text-white;
}

/* --- Page Content Visibility --- */
.page-content { display: none; }
.page-content.active { display: block; }

/* --- Animations --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.5s ease-out forwards; }

/* --- Buttons --- */
.btn-primary {
     @apply bg-pink-500 text-white font-bold py-3 px-8 rounded-lg hover:bg-pink-400 transition-all duration-300;
     text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.btn-secondary {
     @apply bg-yellow-400 text-gray-900 font-bold py-2 px-6 rounded-lg hover:bg-yellow-300 transition-all duration-300;
     text-shadow: 0 0 5px rgba(0,0,0,0.3);
}

/* --- Background Crown Animations --- */
@keyframes rotateAndPulseLive {
    0% { transform: rotate(-5deg) scale(1); opacity: 0.1; filter: drop-shadow(0 0 15px #fde047); }
    50% { transform: rotate(5deg) scale(1.05); opacity: 0.15; filter: drop-shadow(0 0 25px #fde047); }
    100% { transform: rotate(-5deg) scale(1); opacity: 0.1; filter: drop-shadow(0 0 15px #fde047); }
}
@keyframes rotateAndPulseOffline {
    0% { transform: rotate(0deg) scale(1); opacity: 0.05; filter: drop-shadow(0 0 5px #a855f7); }
    50% { transform: rotate(2deg) scale(1.02); opacity: 0.08; filter: drop-shadow(0 0 10px #a855f7); }
    100% { transform: rotate(0deg) scale(1); opacity: 0.05; filter: drop-shadow(0 0 5px #a855f7); }
}
.background-crown {
    position: fixed; z-index: -1; width: 70vw; height: 70vh;
    max-width: 700px; max-height: 700px;
}
#crown1 { top: 55%; left: 55%; transform: translate(-50%, -50%); }
#crown2 { top: -5%; left: -5%; transform: translate(-50%, -50%) rotate(180deg); }
.glow-live { animation: rotateAndPulseLive 10s ease-in-out infinite; }
.glow-offline { animation: rotateAndPulseOffline 20s ease-in-out infinite; }

/* --- Glassmorphism Card Styles --- */
.card, .schedule-item, .giveaway-card, .uptime-container, #stream-content > div {
    background-color: rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* --- Admin Tab Styles --- */
.admin-tab { @apply px-4 py-2 text-gray-400 font-semibold border-b-2 border-transparent hover:text-pink-400 transition-colors; }
.admin-tab.active { @apply text-pink-400 border-pink-400; }
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn 0.3s ease-out forwards; }

/* --- Draggable Player Styles --- */
#player-popout {
    position: fixed; z-index: 1000; bottom: 20px; right: 20px;
    width: 480px; max-width: 90vw; aspect-ratio: 16 / 9;
    background-color: #18181b; border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    border: 1px solid rgb(236 72 153 / 0.3);
    display: flex; flex-direction: column; overflow: hidden; resize: both;
}
#player-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0.75rem; background-color: #1f2937; color: white;
    cursor: move; user-select: none;
}
#close-player-btn {
    background: none; border: none; color: #9ca3af;
    font-size: 1.5rem; line-height: 1; cursor: pointer; transition: color 0.2s;
}
#close-player-btn:hover { color: white; }

/* --- Uptime Counter Styles --- */
.uptime-container { padding: 1.5rem; text-align: center; }
.uptime-label { @apply text-lg text-gray-300 mb-2 tracking-widest uppercase; }
.uptime-timer { @apply flex items-center justify-center space-x-2; }
.uptime-crown {
    @apply text-yellow-300 text-5xl md:text-6xl;
    filter: drop-shadow(0 0 10px #fde047);
}
.uptime-digits {
    font-family: 'Orbitron', sans-serif;
    @apply text-6xl md:text-7xl tracking-widest text-white;
    text-shadow: 0 0 10px rgb(236 72 153 / 0.8), 0 0 20px rgb(236 72 153 / 0.5);
}

/* --- Giveaway Card Styles --- */
.giveaway-card { transition: all 0.3s; }
.giveaway-card:hover { transform: translateY(-0.5rem); box-shadow: 0 0 25px rgb(236 72 153 / 0.3); }
.prize-image-container { @apply bg-gray-900; }
.prize-image { @apply w-full h-48 object-cover transition-transform duration-300; }
.giveaway-card:hover .prize-image { @apply scale-105; }
.prize-title { @apply text-2xl font-bold logo-font text-pink-400; }

.hidden { display: none !important; }