/* ABOUTME: Sierra-style dropdown control panel that slides down from top on hover
   ABOUTME: Contains all UI buttons (theme toggle, chaos, achievements, etc.) */

/* ═══════════════════════════════════════════════════════════════════════════
   TRIGGER ZONE - invisible area at top that activates dropdown
   ═══════════════════════════════════════════════════════════════════════════ */

.sierra-trigger {
    position: fixed;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 20px;
    z-index: 9998;
    cursor: pointer;
}

/* Small tab indicator showing panel is available */
.sierra-trigger::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 8px;
    background: linear-gradient(to bottom, #8b6914, #6b4f0f);
    border-radius: 0 0 4px 4px;
    box-shadow:
        inset 0 -2px 0 rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.4);
    transition:
        height 0.2s ease,
        width 0.2s ease;
}

.sierra-trigger:hover::after,
.sierra-panel:hover + .sierra-trigger::after,
.sierra-trigger:has(+ .sierra-panel:hover)::after {
    height: 12px;
    width: 80px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN PANEL - the dropdown container
   ═══════════════════════════════════════════════════════════════════════════ */

.sierra-panel {
    position: fixed;
    top: -100px; /* ADJUST: negative height to hide panel */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    image-rendering: pixelated;
}

/* Show panel on trigger hover or panel hover */
.sierra-trigger:hover + .sierra-panel,
.sierra-panel:hover {
    top: 0;
}

/* Panel background - pixel art menu bar (scaled to match header width) */
.sierra-panel-bg {
    width: 492px; /* 287 x 2 = scaled 2x */
    height: 78px; /* 39 x 2 = scaled 2x */
    background: url("/sprites/drop_down_menu.png");
    background-size: 574px 78px;
    image-rendering: pixelated;
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TITLE BAR - hidden, using image instead
   ═══════════════════════════════════════════════════════════════════════════ */

.sierra-title {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON GRID - positioned over the menu bar image slots
   ═══════════════════════════════════════════════════════════════════════════ */

.sierra-buttons {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INDIVIDUAL BUTTONS - transparent, positioned over image slots
   ═══════════════════════════════════════════════════════════════════════════ */

.sierra-btn {
    position: absolute;
    top: 8px; /* ADJUST: vertical offset from top */
    width: 84px; /* ADJUST: button width */
    height: 62px; /* ADJUST: button height */
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    image-rendering: pixelated;
    padding: 0;
}

/* Individual button positions - ADJUST left values to align with slots */
.sierra-btn:nth-child(1) {
    left: 0px;
} /* Theme toggle */
.sierra-btn:nth-child(2) {
    left: 83px;
} /* Chaos */
.sierra-btn:nth-child(3) {
    left: 166px;
} /* Achievements */
.sierra-btn:nth-child(4) {
    left: 245px;
} /* Rainbow */
.sierra-btn:nth-child(5) {
    left: 326px;
} /* Weather */
.sierra-btn:nth-child(6) {
    left: 406px;
} /* Help */

.sierra-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.sierra-btn:active {
    transform: scale(0.95);
}

/* Button icons */
.sierra-btn img {
    width: 48px; /* ADJUST: icon size */
    height: 48px;
    image-rendering: pixelated;
}

.sierra-btn .btn-icon {
    font-size: 36px;
    line-height: 1;
}

/* Active state for toggleable buttons */
.sierra-btn.active {
    filter: drop-shadow(0 0 4px rgba(255, 200, 50, 0.8));
}

.sierra-btn.active img {
    filter: brightness(1.3);
}

/* Tooltip on hover */
.sierra-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: #2a1a0a;
    color: #c9a227;
    font-family: "MedievalSharp", cursive;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.sierra-btn:hover::after {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPECIFIC BUTTON STATES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Night mode button */
.sierra-btn[data-action="theme"] .btn-icon.sun {
    display: none;
}
.sierra-btn[data-action="theme"] .btn-icon.moon {
    display: block;
}

html.night .sierra-btn[data-action="theme"] .btn-icon.sun {
    display: block;
}
html.night .sierra-btn[data-action="theme"] .btn-icon.moon {
    display: none;
}

/* Chaos mode active */
body.chaos-mode .sierra-btn[data-action="chaos"] {
    animation: chaos-btn-pulse 1s ease-in-out infinite alternate;
}

@keyframes chaos-btn-pulse {
    from {
        box-shadow:
            inset 2px 2px 0 rgba(255, 255, 255, 0.3),
            inset -2px -2px 0 rgba(0, 0, 0, 0.15),
            0 0 8px rgba(201, 162, 39, 0.5);
    }
    to {
        box-shadow:
            inset 2px 2px 0 rgba(255, 255, 255, 0.3),
            inset -2px -2px 0 rgba(0, 0, 0, 0.15),
            0 0 16px rgba(201, 162, 39, 0.8);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NIGHT MODE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Night mode - keep same pixel art menu, just adjust trigger tab */
html.night .sierra-trigger::after {
    background: linear-gradient(to bottom, #5a4a3a, #3d3020);
}

html.night .sierra-btn::after {
    background: #2a1a0a;
    color: #c9a227;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HIDE OLD FLOATING BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide the old mode toggle and chaos toggle - they're now in the panel */
.mode-toggle,
.chaos-toggle,
.achievement-toggle {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet and below - scale down panel */
@media (max-width: 550px) {
    .sierra-panel-bg {
        width: 350px;
        height: 56px;
        background-size: 410px 56px;
    }

    .sierra-btn {
        width: 60px;
        height: 44px;
        top: 6px;
    }

    .sierra-btn:nth-child(1) { left: 0px; }
    .sierra-btn:nth-child(2) { left: 59px; }
    .sierra-btn:nth-child(3) { left: 118px; }
    .sierra-btn:nth-child(4) { left: 174px; }
    .sierra-btn:nth-child(5) { left: 232px; }
    .sierra-btn:nth-child(6) { left: 290px; }

    .sierra-btn img {
        width: 36px;
        height: 36px;
    }

    .sierra-trigger {
        width: 300px;
    }

    .sierra-trigger::after {
        width: 50px;
        height: 6px;
    }
}

/* Small phones */
@media (max-width: 400px) {
    .sierra-panel-bg {
        width: 280px;
        height: 48px;
        background-size: 330px 48px;
    }

    .sierra-btn {
        width: 48px;
        height: 38px;
        top: 5px;
    }

    .sierra-btn:nth-child(1) { left: 0px; }
    .sierra-btn:nth-child(2) { left: 47px; }
    .sierra-btn:nth-child(3) { left: 94px; }
    .sierra-btn:nth-child(4) { left: 140px; }
    .sierra-btn:nth-child(5) { left: 186px; }
    .sierra-btn:nth-child(6) { left: 232px; }

    .sierra-btn img {
        width: 28px;
        height: 28px;
    }

    .sierra-trigger {
        width: 250px;
    }

    .sierra-btn::after {
        display: none; /* Hide tooltips on very small screens */
    }
}