body { font-family: 'Fredoka One', cursive; overflow: hidden; }
        .quote-font { font-family: 'Balsamiq Sans', cursive; }
        .modal { display: none; }
        .modal.active { display: flex; }

        .game-container { background: linear-gradient(to bottom, #a7e0f8, #c1f0c1); }
        .chat-bubble {
            max-width: 75%;
            padding: 10px 15px;
            border-radius: 20px;
            position: relative;
            word-wrap: break-word;
        }

        .chat-bubble.player {
            background-color: #DCF8C6;
            align-self: flex-end;
            border-bottom-right-radius: 5px;
        }

        .chat-bubble.lasse {
            background-color: #FFFFFF;
            align-self: flex-start;
            border-bottom-left-radius: 5px;
        }

        .chat-bubble::after {
            content: '';
            position: absolute;
            bottom: 0;
            width: 0;
            height: 0;
            border: 10px solid transparent;
        }

        .chat-bubble.player::after {
            right: -10px;
            border-left-color: #DCF8C6;
            border-right: 0;
            border-bottom: 0;
        }

        .chat-bubble.lasse::after {
            left: -10px;
            border-right-color: #FFFFFF;
            border-left: 0;
            border-bottom: 0;
        }
        
        #in-game-conversation-container.active { display: flex; }
        .in-game-chat-option {
            width: 100%; background-color: #e0e0e0; hover:bg-gray-300; color: black; font-family: 'Balsamiq Sans', cursive; padding: 0.75rem; border-radius: 0.5rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); text-align: left; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; transform: scale(1); 
        }
        .in-game-chat-option:hover { transform: scale(1.02); }

        .avatar-container {
            position: absolute; width: 90px; height: auto;
            transition: all 0.9s cubic-bezier(0.42, 0, 0.58, 1);
            z-index: 10; pointer-events: none; transform-origin: bottom center;
            filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.4));
        }
        
        #lasse-human { 
            width: 75px; /* Adjust size for human figure */
        }

        #town-map .location-btn {
            position: absolute; background-color: rgba(255, 255, 255, 0.2);
            border-radius: 20px; border: 3px dashed rgba(0, 0, 0, 0.2);
            transition: all 0.2s ease-in-out; color: #333; text-shadow: 1px 1px 1px white;
            font-size: 1.2rem; display: flex; flex-direction: column; align-items: center;
            justify-content: center; padding: 5px; text-align: center; backdrop-filter: blur(2px);
        }
        #town-map .location-btn:hover { background-color: rgba(255, 255, 255, 0.5); border-style: solid; transform: scale(1.05); }
        .location-icon { font-size: 2.5rem; line-height: 1; }

        [data-location="lade"] { top: 50%; left: 3%; width: 20%; height: 38%; }
        [data-location="torv"] { top: 40%; left: 38%; width: 22%; height: 25%; border-radius: 50%; }
        [data-location="butik"] { top: 12%; left: 28%; width: 17%; height: 28%; }
        [data-location="bager"] { top: 15%; left: 51%; width: 17%; height: 28%; }
        [data-location="park"] { top: 22%; left: 75%; width: 22%; height: 35%; }
        [data-location="mark"] { top: 70%; left: 30%; width: 68%; height: 28%; }

                @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }

        .pulse-effect {
            display: inline-block;
            animation: pulse 1.5s infinite;
        }

        #bakery-modal-content {
    background-color: #f5e1cb; /* A warm, bakery-like color */
}

        /* Smartphone design */
        #phone-frame {
            background-color: #1a1a1a;
            border-radius: 40px;
            padding: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            border: 2px solid #444;
            height: 95vh;
            max-height: 720px;
            width: 100%;
            max-width: 380px;
        }
        #phone-screen {
            background: linear-gradient(to bottom, #f0f2f5, #e6e9ed);
            border-radius: 30px;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
        }

        #home-bar {
            width: 130px;
            height: 5px;
            background-color: #a0aec0;
            border-radius: 10px;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
        #phone-notch {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 25px;
            background-color: #1a1a1a;
            border-radius: 15px;
            z-index: 10;
        }
        
        /* Social Feed Reactions */
        .social-post {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 1rem;
        }
        .post-header {
            display: flex;
            align-items: center;
            padding: 12px 16px;
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 12px;
        }
        .post-body {
            padding: 12px 16px;
        }
        .post-footer {
            display: flex;
            justify-content: space-around;
            padding: 8px;
            border-top: 1px solid #e5e7eb;
        }
        .reactions-container { position: relative; }
        .reactions-popup {
            position: absolute;
            bottom: 100%;
            left: 0;
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            display: flex;
            gap: 8px;
            padding: 8px;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.2s ease;
            pointer-events: none;
        }
        .reactions-container:hover .reactions-popup {
            opacity: 1;
            transform: translateY(0);
            pointer-events: all;
        }
        .reaction-btn {
            font-size: 1.5rem;
            transition: transform 0.1s ease;
        }
        .reaction-btn:hover {
            transform: scale(1.3);
        }
        .reaction-btn.selected {
            filter: saturate(2);
        }

        .heart {
            position: absolute;
            top: 100%;
            font-size: 24px;
            color: #ff4d4d;
            animation: floatUp 4s ease-in-out infinite;
            opacity: 0;
            text-shadow: 0 0 10px white, 0 0 5px hotpink;
            pointer-events: none;
            z-index: 9999;
        }

        @keyframes floatUp {
            0% { transform: translateY(0) scale(0.5); opacity: 1; }
            99% { transform: translateY(-110vh) scale(1.5) rotate(360deg); opacity: 0; }
            100% { transform: translateY(0); opacity: 0; } /* Reset for infinite loop */
        }

        @keyframes ping-once {
            0% { transform: scale(0.2); opacity: 0; }
            50% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }

        #kiss-emoji-overlay span {
            font-size: 10rem; /* Ensure the emoji is large */
        }