:root {
    --font-body: 'Inter', sans-serif;
    --font-display: 'Bebas Neue', cursive;
    --bg-image-selection: url('https://images.unsplash.com/photo-1596496181848-30919422b4a3?q=80&w=2070&auto=format&fit=crop'); /* Grand Theater Stage */
    --bg-image-challenge: url('https://images.unsplash.com/photo-1562071729-6232b5f14445?q=80&w=1974&auto=format&fit=crop'); /* Backstage Mirrors */
    --bg-image-runway: url('https://images.unsplash.com/photo-1608223689218-c073a693246a?q=80&w=1962&auto=format&fit=crop'); /* Glowing Runway */
    --bg-image-lipsync: url('https://images.unsplash.com/photo-1524368535928-5b5e00ddc76b?q=80&w=2070&auto=format&fit=crop'); /* Spotlight on Stage */
    --bg-image-finale: url('https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=1974&auto=format&fit=crop'); /* Gold Confetti */
}

body {
    font-family: var(--font-body);
    color: #F3F4F6;
    transition: background-image 0.8s ease-in-out;
    position: relative;
}

/* Confetti Layer */
body::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: 
        radial-gradient(white 1px, transparent 1px),
        radial-gradient(yellow 1px, transparent 1px);
    background-size: 40px 40px, 60px 60px;
    background-position: 0 0, 30px 30px;
    animation: confetti-fall 20s linear infinite;
    opacity: 0.3;
    z-index: -1;
}

/* Vignette Layer */
body::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 50%, black 120%);
    pointer-events: none;
    z-index: 0;
}

@keyframes confetti-fall {
    100% { background-position: 0px 600px, 30px 630px; }
}

.bg-dynamic {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: hard-light;
    animation: shimmer 20s infinite alternate;
    transition: background-image 0.8s ease-in-out;
}

@keyframes shimmer {
    0% { background-color: #4a044e; }
    100% { background-color: #9d174d; }
}

.stage-frame { position: relative; padding-left: 25px; padding-right: 25px; }
.stage-frame::before, .stage-frame::after {
    content: '';
    position: absolute;
    top: -5%; bottom: -5%;
    width: 20px;
    background: linear-gradient(to bottom, #fde047, #fbbf24, #f59e0b, #fbbf24, #fde047);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
}
.stage-frame::before { left: 0; }
.stage-frame::after { right: 0; }

.menu-card { animation: fadeInUp 0.8s ease-out forwards; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

.menu-card svg { 
    margin: 0 auto -1.5rem; 
    animation: crown-glow 3s infinite alternate;
}
@keyframes crown-glow {
    from { filter: drop-shadow(0 0 5px #fde047); }
    to { filter: drop-shadow(0 0 15px #f59e0b); }
}

.main-title { text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); }

.all-stars-title {
    background: linear-gradient(to right, #fde047, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    margin-top: -0.5rem;
    text-shadow: none;
}

.backdrop-blur-lg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.font-display { font-family: var(--font-display); }

.main-button, .secondary-button {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid transparent;
}
.main-button { background: linear-gradient(to right, #D946EF, #EC4899); }
.secondary-button { background-color: rgba(31, 41, 55, 0.7); border: 2px solid #4B5563; }

.main-button::before, .secondary-button::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
}
.main-button:hover, .secondary-button:hover { transform: scale(1.05); box-shadow: 0 0 25px rgba(236, 72, 153, 0.8); }
.main-button:hover::before, .secondary-button:hover::before { left: 100%; }
.secondary-button:hover, .secondary-button.selected { background-color: rgba(217, 70, 239, 0.6); border-color: #d946ef; }

.queen-card { transition: all 0.3s ease-in-out; }
.queen-card:hover { transform: scale(1.08); box-shadow: 0 0 20px rgba(236, 72, 153, 0.6); }
.queen-card.selected { transform: scale(1.08); box-shadow: 0 0 25px rgba(251, 191, 36, 1); border-color: #fbbf24; }

.btn-primary { background: linear-gradient(to right, #D946EF, #EC4899); transition: transform 0.2s, box-shadow 0.2s, background 0.2s; }
.btn-primary:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 0 15px rgba(236, 72, 153, 0.7); }
.btn-primary:disabled { background: #4B5563; cursor: not-allowed; transform: scale(1); box-shadow: none; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.placement-WIN-img { animation: pulse-gold-img 2s infinite; }
@keyframes pulse-gold-img { 0%, 100% { box-shadow: 0 0 20px #fbbf24; } 50% { box-shadow: 0 0 40px #fde047; } }
.placement-WIN-card { border: 2px solid #fbbf24; }
.placement-ELIM-img { filter: grayscale(1); opacity: 0.6; }

.critique-card { border-left-width: 4px; }
.critique-good { border-left-color: #3b82f6; }
.critique-safe { border-left-color: #6b7280; }
.critique-bad { border-left-color: #d97706; }

.view { transition: opacity 0.5s ease-in-out, visibility 0.5s; }
.view.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.track-record-table th, .track-record-table td { padding: 0.5rem; text-align: center; vertical-align: middle; border: 1px solid #374151; }
.track-record-table tbody td:first-child {
    min-width: 140px;
}
.track-record-table .queen-name {
    white-space: normal;
    word-break: break-word;
    text-align: left;
}
.placement-WIN { background-color: #a942a9; color: white; font-weight: bold; }
.placement-HIGH { background-color: #3b82f6; }
.placement-SAFE { background-color: #4b5563; }
.placement-LOW { background-color: #ca8a04; }
.placement-BTM2 { background-color: #d97706; }
.placement-BTM { background-color: #d97706; }
.placement-ELIM { background-color: #be123c; color: white; font-weight: bold; }
.placement-WINNER { background: linear-gradient(45deg, #fde047, #fbbf24); color: black; font-weight: bold; }
.placement-RUNNER-UP { background: linear-gradient(45deg, #e5e7eb, #9ca3af); color: black; font-weight: bold; }
.track-record-pill { display: inline-block; padding: 0.1rem 0.5rem; font-size: 0.7rem; font-weight: bold; border-radius: 9999px; color: white; }

/* FIX: Styles for Mama Pao custom placement feedback */
.custom-placement-card.selected-top {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 15px #3b82f6;
}
.custom-placement-card.selected-bottom {
    border-color: #d97706 !important;
    box-shadow: 0 0 15px #d97706;
}
.custom-placement-card.dimmed {
    opacity: 0.4;
    cursor: not-allowed;
}
.custom-placement-card:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: scale(1);
    box-shadow: none;
}
.custom-placement-card:disabled:hover {
     background-color: rgba(31, 41, 55, 0.7); 
     border-color: #4B5563;
}

.queen-bubble {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.queen-safe {
    opacity: 0;
    transform: scale(0.8);
}