@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    overflow: hidden;
    cursor: pointer;
    font-family: 'EB Garamond', serif; /* Updated font */
    -webkit-tap-highlight-color: transparent;
}

canvas {
    display: block;
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: crisp-edges;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Behind text */
}

/* tsparticles container */
#tsparticles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2; /* Above trees but behind text if any remains, though it's snow, so maybe overlay? */
    pointer-events: none; /* Allow clicks to pass through to document/body */
}

/* Narrative Text Container */
.narrative-text {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #333; /* Darker for readability */
    font-weight: 400;
    font-size: 24px; /* Larger for poetry */
    pointer-events: none;
    transition: opacity 1.5s ease;
    z-index: 10;
    opacity: 0; /* Start hidden */
    padding: 0 20px;
    box-sizing: border-box;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Halo for readability over tree */
}

.narrative-text.visible {
    opacity: 1;
}

/* Positioning classes */
.pos-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.pos-top {
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.pos-above-circle {
    /* Position exactly above the circle boundary using the JS variable */
    top: calc(var(--circle-top) + 40px); /* Lowered: Pushes text down into the upper empty space of the circle */
    left: 50%;
    transform: translate(-50%, -50%); /* Centered vertically around that point */
    text-align: center;
}

/* New: Top Left Corner */
.pos-top-left {
    top: 10%;
    left: 10%;
    transform: none;
    text-align: left;
    width: auto; /* Allow auto width */
}

/* New: Bottom Right Corner */
.pos-bottom-right {
    top: auto;
    bottom: 10%;
    left: auto;
    right: 10%;
    transform: none;
    text-align: right;
    width: auto; /* Allow auto width */
}

.pos-final {
    /* Slightly higher than pos-above-circle */
    top: calc(var(--circle-top) + 10px); 
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.pos-bottom {
    top: auto;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

/* Base instruction style (if needed) */
#instruction {
    display: none;
}