/* New Floating Bubble Style */
#npc-bubble {
    position: absolute;
    background: white;
    border: 3px solid #2ecc71;
    border-radius: 12px;
    padding: 10px 15px;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    color: #333;
    pointer-events: none; /* Let clicks pass through to the game */
    display: none;
    max-width: 200px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 2000;
}
.npc-name-tag {
    display: block;
    color: #2ecc71; /* Match your theme green */
    font-size: 0.8em;
    text-transform: uppercase;
    margin-bottom: 4px;
    border-bottom: 1px solid #eee;
    padding-bottom: 2px;
}

        #joystick-zone { position: absolute; bottom: 20px; left: 20px; width: 200px; height: 200px; z-index: 1000; }
/* The little arrow pointing down at the NPC */
#npc-bubble::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 15px 10px 0 10px;
    border-style: solid;
    border-color: #2ecc71 transparent transparent transparent;
}

    body { 
        margin: 0; 
        padding: 0;
        overflow: hidden; /* Prevents accidental scrolling */
        width: 100vw;
        height: 100vh;
        background: #000;
    }
    canvas {
        display: block; /* Removes the tiny 4px gap at the bottom of the page */
    }
    #controls {
        position: absolute;
        bottom: 20px;
        left: 20px;
        display: grid;
        grid-template-columns: repeat(3, 50px);
        grid-gap: 10px;
        user-select: none; /* Prevents highlighting text while tapping */
    }
    .btn {
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.2);
        border: 2px solid white;
        color: white;
        font-weight: bold;
        border-radius: 8px;
        touch-action: manipulation; /* Optimizes for mobile taps */
    }
    .btn:active {
        background: rgba(255, 255, 255, 0.5);
    }
 /* The "Press E" prompt over the NPC's head */
        #interaction-ui {
            position: absolute; 
            top: 40%; left: 50%; 
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.6);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-family: Arial;
            display: none;
            pointer-events: none;
        }