/* style.css */
:root {
    --font-pixel: 'Press Start 2P', cursive;
    --color-stone-dark: #343434; /* Dark stone background */
    --color-stone-medium: #5a5a5a; /* Content box background */
    --color-stone-light: #a0a0a0; /* Button background */
    --color-stone-border: #212121; /* Darker border */
    --color-text: #e0e0e0; /* Light grey text */
    --color-torch-handle: #6b4f2d; /* Brown */
    --color-torch-flame1: #ffcc00; /* Yellow */
    --color-torch-flame2: #ff6600; /* Orange */
}

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

html, body {
    height: 100%;
}

body {
    font-family: var(--font-pixel);
    background-color: var(--color-stone-dark);
    /* Subtle repeating stone texture */
    background-image: linear-gradient(45deg, #2a2a2a 25%, transparent 25%),
                      linear-gradient(-45deg, #2a2a2a 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #2a2a2a 75%),
                      linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    color: var(--color-text);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;
    position: relative; /* For positioning torches */
    overflow: hidden; /* Hide parts of torches that might overflow */
}

.container {
    width: 100%;
    max-width: 600px; /* Max width of the content area */
    position: relative; /* To ensure it's above pseudo-elements if needed */
    z-index: 1;
}

.content-box {
    background-color: var(--color-stone-medium);
    padding: 2rem;
    border: 4px solid var(--color-stone-border);
    /* Pixelated border effect using box-shadow */
    box-shadow: inset 0 0 0 4px #787878, /* Inner lighter shade */
                0 0 0 4px var(--color-stone-border); /* Outer border */
    image-rendering: pixelated; /* Helps maintain sharp edges for pixel look */
    width: 90%;
    margin: 0 auto; /* Center within the container */
}

.description {
    font-size: 0.8rem; /* Slightly smaller for pixel font */
    line-height: 1.8;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 0px var(--color-stone-border); /* Pixel shadow */
}

.notify-button {
    font-family: var(--font-pixel);
    font-size: 0.9rem;
    color: var(--color-stone-dark);
    background-color: var(--color-stone-light);
    padding: 1rem 1.5rem;
    border: 4px solid var(--color-stone-border);
    cursor: pointer;
    text-shadow: 1px 1px 0px #c0c0c0; /* Light inner shadow on text */
    /* Pixelated button effect */
    box-shadow: inset -4px -4px 0px 0px #787878, /* Inner shadow bottom-right */
                inset 4px 4px 0px 0px #c0c0c0; /* Inner shadow top-left */

    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    image-rendering: pixelated;
}

.notify-button:hover {
    background-color: #b0b0b0; /* Slightly darker on hover */
}

.notify-button:active {
    background-color: #787878;
    box-shadow: inset 4px 4px 0px 0px #787878, /* Invert shadow on click */
                inset -4px -4px 0px 0px #c0c0c0;
    transform: translate(1px, 1px); /* Slight move on click */
}

/* Simple Torch Elements */
.torch {
    width: 20px; /* Base size */
    height: 100px; /* Total height */
    position: absolute;
    bottom: 10%; /* Position from bottom */
    z-index: 0;
    image-rendering: pixelated;
}

.torch::before { /* Handle */
    content: '';
    display: block;
    width: 100%;
    height: 70%; /* 70px */
    background-color: var(--color-torch-handle);
    border: 2px solid darken(var(--color-torch-handle), 10%);
    box-sizing: border-box;
}

.torch::after { /* Flame */
    content: '';
    display: block;
    width: 120%; /* Wider flame */
    margin-left: -10%; /* Center flame */
    height: 30%; /* 30px */
    background: radial-gradient(circle at center, var(--color-torch-flame1) 30%, var(--color-torch-flame2) 80%);
    border-radius: 40% 40% 20% 20% / 80% 80% 30% 30%; /* Flame shape */
    animation: flicker 0.15s infinite alternate;
    position: relative;
    top: -4px; /* Overlap handle slightly */
}

.torch-left {
    left: 5%;
    transform: rotate(-10deg);
}

.torch-right {
    right: 5%;
    transform: rotate(10deg);
}

@keyframes flicker {
    0% { transform: scale(1, 1) rotate(-1deg); opacity: 1; }
    50% { transform: scale(0.95, 1.05) rotate(1deg); opacity: 0.95; }
    100% { transform: scale(1.02, 0.98) rotate(0deg); opacity: 1; }
}


/* Responsive Adjustments */
@media (max-width: 640px) {
    .description {
        font-size: 0.7rem;
        line-height: 1.7;
    }
    .notify-button {
        font-size: 0.8rem;
        padding: 0.8rem 1.2rem;
    }
    .content-box {
        padding: 1.5rem;
        width: 95%;
    }
    .torch {
        width: 16px;
        height: 80px;
    }
    .torch-left { left: 2%; }
    .torch-right { right: 2%; }
}

@media (max-width: 480px) {
     .description {
        font-size: 0.65rem;
        line-height: 1.6;
     }
     .notify-button {
        font-size: 0.7rem;
        padding: 0.7rem 1rem;
     }
     .torch {
        display: none; /* Hide torches on very small screens */
     }
}