body { margin: 0; overflow: hidden; background-color: #111; font-family: sans-serif; }
canvas { display: block; }
#instructions {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: white; text-align: center; background: rgba(0, 0, 0, 0.85);
    padding: 25px 45px; border-radius: 12px; cursor: pointer; border: 2px solid #00ffcc; z-index: 100;
}
		#instructions h1 { margin-bottom: 24px ; font-size: 36px; color: #00ffcc; }
#instructions p { margin: 10px 0; line-height: 1.4; }

#score-board {
    position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    color: #ffffff; background: rgba(0, 0, 0, 0.6); padding: 10px 24px;
    border-radius: 30px; font-size: 22px; font-weight: bold; letter-spacing: 1px;
    border: 1px solid rgba(0, 255, 204, 0.4); z-index: 50; pointer-events: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
#score-board span { color: #00ffcc; }

#poster-notification {
    position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%);
    color: #ffffff; background: rgba(0, 0, 0, 0.6); padding: 10px 24px;
    border-radius: 30px; font-size: 16px; font-weight: bold; letter-spacing: 1px;
    border: 1px solid rgba(0, 255, 204, 0.4); z-index: 50; pointer-events: none;
    opacity: 0; transition: none;
}
#poster-notification span { color: #00ffcc; }

@keyframes posterSlideFade {
    0% { bottom: -60px; opacity: 0; transform: translateX(-50%) scale(0.95); }
    15% { bottom: 25px; opacity: 1; transform: translateX(-50%) scale(1.0); }
    85% { bottom: 25px; opacity: 1; transform: translateX(-50%) scale(1.0); }
    100% { bottom: -60px; opacity: 0; transform: translateX(-50%) scale(0.95); }
}
.poster-slide { animation: posterSlideFade 5.0s ease forwards; }

#win-screen {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: white; text-align: center; background: rgba(0, 0, 0, 0.9);
    padding: 40px 60px; border-radius: 16px; border: 3px solid #00ffcc;
    z-index: 200; opacity: 0; pointer-events: none; transition: opacity 1.0s ease; display: none;
}
#win-screen.show { opacity: 1; pointer-events: auto; }
#win-screen h1 { color: #00ffcc; margin-top: 0; font-size: 36px; }
.btn-group { display: flex; gap: 15px; justify-content: center; margin-top: 20px; }
.game-btn {
    background-color: #00ffcc; color: #111; border: none; padding: 12px 28px;
    font-size: 18px; font-weight: bold; border-radius: 8px; cursor: pointer; transition: background 0.2s;
}
.game-btn:hover { background-color: #00cca3; }
.game-btn.secondary { background-color: #333; color: #fff; border: 1px solid #555; }
.game-btn.secondary:hover { background-color: #444; }

#hint-notification {
    position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%);
    color: #ffffff; background: rgba(0, 0, 0, 0.85); padding: 10px 22px;
    border-radius: 30px; font-size: 16px; font-weight: bold; letter-spacing: 1px;
    border: 1px solid rgba(255, 230, 150, 0.4); z-index: 50; pointer-events: none; opacity: 0;
}
#hint-notification span { color: #ffe696; }

#map-notification {
    position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%);
    color: #ffffff; background: rgba(0, 0, 0, 0.85); padding: 10px 22px;
    border-radius: 30px; font-size: 16px; font-weight: bold; letter-spacing: 1px;
    border: 1px solid rgba(0, 255, 204, 0.4); z-index: 50; pointer-events: none; opacity: 0;
}
#map-notification span { color: #00ffcc; }