﻿<div class="social-section">
            <div class="social-header">
                <h3>Enjoying the game?</h3>
                <p>Share with your friends!</p>
            </div>
            <div class="social-actions">
                <button class="social-btn like-btn" id="likeBtn">
                    <span class="social-icon">👍</span>
                    <span class="social-text">Like</span>
                    <span class="social-count" id="likeCount">0</span>
                </button>
                <button class="social-btn share-btn" id="shareBtn">
                    <span class="social-icon">📤</span>
                    <span class="social-text">Share</span>
                </button>
                <button class="social-btn comment-btn" id="commentBtn">
                    <span class="social-icon">💬</span>
                    <span class="social-text">Comments</span>
                    <span class="social-count" id="commentCount">0</span>
                </button>
            </div>
        </div>

        <div id="commentSection" class="comment-section hidden">
            <div class="comment-header">
                <h3>Comments</h3>
                <button class="close-comments" id="closeComments">✕</button>
            </div>
            <div class="comment-input-area">
                <input type="text" id="commentInput" placeholder="Write a comment..." maxlength="200">
                <button id="postComment" class="btn">Post</button>
            </div>
            <div class="comments-list" id="commentsList">
                <p class="no-comments">No comments yet. Be the first to comment!</p>
            </div>
        </div>