body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #050505; /* Very dark night sky */
    font-family: sans-serif;
    touch-action: none; /* Prevent browser zooming/scrolling */
}

#app-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#rod-container {
    position: absolute;
    width: 20px;
    height: 200vh; /* Make it very tall so we have room to scroll */
    top: 50%; /* Start with the "tip" near the center */
    left: 50%;
    transform: translate(-50%, 0); /* Center horizontally, 0 vertically relative to top:50% */
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: transform;
}

/* The wire that has already burnt (above the flame) */
#burnt-wire {
    width: 4px;
    height: 100vh; /* Top half is potential wire */
    background: #1a1a1a;
    box-shadow: inset 1px 0 2px rgba(0,0,0,0.8);
    border-radius: 2px 2px 0 0;
    margin-bottom: -1px; /* Overlap slightly to prevent gaps */
}

/* The coated rod that hasn't burnt yet (below the flame) */
#unburnt-rod {
    width: 16px;
    height: 100vh; /* Bottom half is unburnt rod */
    background: linear-gradient(90deg, #555 0%, #aaa 40%, #ddd 50%, #aaa 60%, #555 100%);
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    position: relative;
}

/* Texture for the unburnt rod to look like compressed powder */
#unburnt-rod::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3h1v1H1V3zm2-2h1v1H3V1z' fill='%23000000' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.3;
}

#spark-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Above rod */
    pointer-events: none; /* Let clicks pass through */
}

#ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    pointer-events: none;
}

#instruction {
    color: white;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    opacity: 0.8;
    transition: opacity 0.5s;
    background: rgba(0,0,0,0.3);
    padding: 1rem 2rem;
    border-radius: 2rem;
}

#instruction.hidden {
    opacity: 0;
}