/* Ez's Signature Black-White-Red Theme */

:root {
    --text: #ffffff;
    --red: #ff3b3b;
    --dark-red: #b22222;
    --panel-bg: rgba(15, 15, 15, 0.9);
    --panel-border: rgba(255, 255, 255, 0.1);
    --black: #000000;
    --white: #ffffff;
}

/* Base */
html, body {
    color: var(--text);
    background: var(--black);
}

/* Floating boxes */
.menu-box,
.quiz-box,
.fun-fact-popup {
    background: var(--panel-bg);
    border: 1.5px solid var(--panel-border);
    border-radius: 12px;
}

/* Buttons, links, etc */
.menu-box a,
.menu-box button,
.close-button,
.back-button,
.tab-button,
button,
a.button {
    background: var(--black);
    border: 1.5px solid var(--white);
    color: var(--white);
    border-radius: 10px;
    transition: transform 0.15s ease, box-shadow 0.2s ease,
                background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Hover effects */
.menu-box a:hover,
.menu-box button:hover,
.close-button:hover,
.back-button:hover,
.tab-button:hover {
    background: var(--red);
    color: var(--black);
    border-color: var(--red);
}

/* Active tab */
.tab-button.active {
    background: var(--red);
    border-color: var(--red);
    color: var(--black);
}

/* Cards */
.anime-card,
.anime-card-detail {
    background: var(--panel-bg) !important;
    border: 1.5px solid var(--panel-border) !important;
    border-radius: 14px !important;
}
.anime-card:hover {
    box-shadow: 0 0 16px var(--red);
}
.anime-card.selected {
    box-shadow: 0 0 18px var(--white);
}

/* Inputs */
input, textarea {
    background: var(--black);
    color: var(--white);
    border: 1.5px solid var(--white);
    border-radius: 8px;
}
input:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 10px var(--red);
}

/* Appear animation */
@keyframes ui-appear {
    0% { opacity: 0; transform: translateY(10px) scale(0.98); filter: blur(2px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.menu-box,
.menu-box a,
.menu-box button,
.close-button,
.quiz-box,
.fun-fact-popup,
.back-button,
.tab-button,
.anime-card,
.anime-card-detail {
    animation: ui-appear 0.45s ease both;
}

/* Glow animation */
@keyframes soft-pulse {
    0% { box-shadow: 0 0 0 rgba(255,0,0,0); }
    50% { box-shadow: 0 0 18px rgba(255,0,0,0.3); }
    100% { box-shadow: 0 0 0 rgba(255,0,0,0); }
}
.selected {
    animation: soft-pulse 1.2s ease-in-out infinite;
}

/* Hover lift + glow */
.menu-box a:hover,
.menu-box button:hover,
.tab-button:hover,
.close-button:hover,
.back-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0,0,0,0.35), 0 0 14px var(--red);
}