* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }
body { background: #000; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* Stage */
#game-stage {
    position: relative; width: 100%; height: 100%; max-width: 1920px; aspect-ratio: 16/9;
    background: #111; overflow: hidden;
}
.stage-background { width: 100%; height: 100%; object-fit: cover; }
#click-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; cursor: crosshair; }

/* Character */
#character {
    position: absolute; height: 14vw; left: 10%; top: 75%; z-index: 5;
    transition: left 2s ease-in-out, top 2s ease-in-out; pointer-events: none;
}
.facing-left { transform: scaleX(1); }
.facing-right { transform: scaleX(-1); }

/* Icons on Map */
.game-item {
    position: absolute; z-index: 10; display: flex; flex-direction: column;
    align-items: center; cursor: pointer; transition: transform 0.2s;
}
.game-item:hover { transform: scale(1.1); }
.item-label {
    color: white; font-weight: bold; font-size: 1.2vw; margin-bottom: 5px;
    text-shadow: 2px 2px 0px #000;
}
.item-icon-container {
    background: rgba(255,255,255,0.1); border-radius: 50%; padding: 10px;
    box-shadow: 0 0 15px rgba(255,255,255,0.3); backdrop-filter: blur(2px);
}
.item-icon-container img { height: 10vw; display: block; }

@media (max-width: 768px) {
    #game-stage { height: 60vh; width: 100%; }
    .item-label { font-size: 3.5vw; }
}

/* ... existing code ... */

/* === SOCIAL HUD (Top Left) === */
#social-hud {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 100; /* Ensure it sits above the click layer */
    display: flex;
    gap: 15px; /* Space between buttons */
}

.hud-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
    border: 2px solid #fff;
    border-radius: 12px; /* Soft square */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Strong shadow for visibility */
    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

/* Hover Effect */
.hud-btn:hover {
    transform: translateY(-3px) scale(1.05);
    background-color: #ffffff; /* Solid white on hover */
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.4); /* Glow effect */
}

.hud-btn img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    #social-hud {
        top: 15px;
        left: 15px;
        gap: 10px;
    }
    .hud-btn {
        width: 45px;
        height: 45px;
    }
    .hud-btn img {
        width: 24px;
        height: 24px;
    }
}