/* filepath: d:\\Code\\ankesite\\css\\base.css */
:root {
    --dark-bg: #1a1f2c;
    --bordeaux: #790d1d; /* Darker bordeaux red */
    --white: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.3);
    --glass-border: rgba(255, 255, 255, 0.08);
    --section-bg: #1a1f2c;
}

html {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16'><text x='0' y='14' font-size='14px'>🍒</text></svg>") 16 16, auto;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    background-color: var(--dark-bg);
    color: var(--white);
    overflow-x: hidden;
    /* cursor property moved to html element */
}

/* Modal Styles - these will be moved to index.html for simplicity in this case, or a new css file */
/*
.modal {
    display: none; /* Hidden by default, shown by JS */
/*    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #B07A7A; /* Dark pastel red */
/*    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.modal-content {
    padding: 20px;
}

.modal h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.modal p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.modal input[type="password"] {
    padding: 10px;
    font-size: 1em;
    border: none;
    background-color: #D3A0A0; /* Lighter pastel red */
/*    border-radius: 5px;
    margin-bottom: 20px;
    width: 250px;
    text-align: center;
}

.modal button {
    padding: 10px 20px;
    font-size: 1em;
    border: none;
    border-radius: 20px;
    background-color: #904D4D; /* Red button */
/*    color: black;
    cursor: pointer;
}

.modal button:hover {
    background-color: #7A3C3C; /* Darker red on hover */
/*}
*/

/* Cherry animation styles */
.cherry-emoji {
    position: absolute;
    font-size: 24px; /* Adjust size as needed */
    user-select: none; /* Prevent text selection */
    pointer-events: none; /* Prevent interaction with emojis */
    animation: pop-and-fade 1s forwards;
    z-index: 9999; /* Ensure they are on top */
}

@keyframes pop-and-fade {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    100% {
        /* Ensure centering and then apply dynamic translation */
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1.5);
        opacity: 0;
    }
}