body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background-color: #31353b;
    font-family: sans-serif;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 200px;
    transform-style: preserve-3d;
}

body::before, body::after {
    content: ''; position: absolute; width: 100%; height: 50%;
    background: #2a2e34;
    z-index: -1;
}
body::before { bottom: 0; transform-origin: bottom; transform: rotateX(90deg); }
body::after { top: 0; transform-origin: top; transform: rotateX(-90deg); }

/* REWRITTEN: Foolproof vignette using four border elements */
#vignette-container {
    position: absolute;
    inset: 0; /* Cover the entire screen */
    pointer-events: none;
    z-index: 10;
}
.vignette-border {
    position: absolute;
    transition: all 2s ease-in-out;
}
.vignette-border.top { top: 0; left: 0; width: 100%; height: 0; background: linear-gradient(to bottom, black 50%, transparent); }
.vignette-border.bottom { bottom: 0; left: 0; width: 100%; height: 0; background: linear-gradient(to top, black 50%, transparent); }
.vignette-border.left { top: 0; left: 0; height: 100%; width: 0; background: linear-gradient(to right, black 50%, transparent); }
.vignette-border.right { top: 0; right: 0; height: 100%; width: 0; background: linear-gradient(to left, black 50%, transparent); }

/* The stage classes now animate the width/height of the borders */
.vignette-stage-1 .vignette-border.top,
.vignette-stage-1 .vignette-border.bottom { height: 15%; }
.vignette-stage-1 .vignette-border.left,
.vignette-stage-1 .vignette-border.right { width: 15%; }

.vignette-stage-2 .vignette-border.top,
.vignette-stage-2 .vignette-border.bottom { height: 25%; }
.vignette-stage-2 .vignette-border.left,
.vignette-stage-2 .vignette-border.right { width: 25%; }

.vignette-stage-3 .vignette-border.top,
.vignette-stage-3 .vignette-border.bottom { height: 35%; }
.vignette-stage-3 .vignette-border.left,
.vignette-stage-3 .vignette-border.right { width: 35%; }


#content-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; transform: translateZ(-50px); }
#prompt-container { height: 15vh; transition: opacity 0.4s ease-in-out; }
#prompt-text { font-size: 3vmin; font-weight: 400; max-font-size: 40px; margin: 0; transition: color 0.4s ease-in-out, font-size 0.4s ease-in-out, font-weight 0.4s ease-in-out; }
.green { color: #8fbc8f; }
.yellow { color: #f0e68c; }
.red { color: #cd5c5c; }

#door-container { position: relative; display: flex; justify-content: center; align-items: center; perspective: 500px; }
#door { width: 25vmin; max-width: 200px; height: auto; max-height: 70vh; cursor: pointer; -webkit-user-drag: none; }

.rumbling { animation: rumble 0.8s linear; }
.door-open { animation: pulse-glow 1.5s infinite ease-in-out; }
@keyframes pulse-glow { 0% { filter: drop-shadow(0 0 5px #fff); } 50% { filter: drop-shadow(0 0 20px #fff); } 100% { filter: drop-shadow(0 0 5px #fff); } }
@keyframes rumble {
    0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-2px, 1px); } 20% { transform: translate(2px, -2px); }
    30% { transform: translate(1px, 2px); } 40% { transform: translate(-1px, -1px); } 50% { transform: translate(2px, 1px); }
    60% { transform: translate(-2px, 2px); } 70% { transform: translate(1px, -2px); } 80% { transform: translate(-1px, 1px); }
    90% { transform: translate(2px, -1px); }
}

.knock-hand { position: absolute; width: 12vmin; max-width: 100px; height: auto; pointer-events: none; transform: translate(-50%, -30%); animation: knock-anim 0.25s ease-in-out forwards; }
@keyframes knock-anim {
    0% { opacity: 0; transform: translate(-50%, -30%) rotateX(0deg) translateZ(0px); }
    30% { opacity: 1; transform: translate(-50%, -30%) rotateX(-40deg) translateZ(50px); }
    60% { transform: translate(-50%, -30%) rotateX(10deg) translateZ(-10px); }
    100% { opacity: 0; transform: translate(-50%, -30%) rotateX(10deg) translateZ(-10px); }
}