/* Game styles */
#gameGround {
    position: fixed;
    left: 0;
    right: 0;
    width: 100vw; /* Changed to viewport width to ensure it spans entire page width */
    bottom: 200px; /* Increased distance from bottom to position higher above the nav bar */
    height: 24px;
    background: transparent;
    z-index: 0;
    pointer-events: none;
    image-rendering: pixelated;
    color: #3d3d4f;
    font-family: monospace;
    font-size: 14px;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}

#gameCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    z-index: 1;
    pointer-events: none;
}

.game-start-btn {
    margin-top: 1.5rem;
    padding: 0.7rem;
    background: transparent;
    border: none;
    color: var(--accent-primary, #ff5555);
    cursor: pointer;
    font-weight: 600;
    transition: all var(--transition-speed, 0.3s) ease;
    z-index: 10;
    position: relative;
    font-family: monospace;
    font-size: 3rem; /* Doubled the size from 1.5rem to 3rem */
    min-height: 3.5rem; /* Increased min-height to accommodate larger star */
    box-sizing: border-box;
    opacity: 0.7;
    /* Remove button appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.game-start-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Shake animation for the star button */
@keyframes starShake {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(5deg) scale(1.05);
    }
    50% {
        transform: rotate(0deg) scale(1.1);
    }
    75% {
        transform: rotate(-5deg) scale(1.05);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

.star-shake {
    animation: starShake 0.5s ease;
}

.game-speech-bubble {
    position: absolute; /* Change from relative to absolute positioning */
    background: #fff;
    color: #333;
    padding: 10px 15px;
    border-radius: 10px;
    margin-top: 15px;
    max-width: 250px;
    text-align: center;
    font-size: 0.9rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    z-index: 10001; /* Higher z-index to ensure visibility */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure perfect centering */
    top: 100%; /* Position below the button */
    display: none; /* Initially hidden, will be shown via JavaScript */
    font-family: Arial, sans-serif;
    line-height: 1.4;
}

.game-speech-bubble::after {
    content: '';
    position: absolute;
    top: -10px; /* Position the triangle at the top */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff; /* Triangle pointing up to the button */
}

.dark-mode .game-speech-bubble {
    background: #333;
    color: #fff;
}

.dark-mode .game-speech-bubble::after {
    border-color: transparent transparent #333 transparent;
}

.game-reveal-animation {
    clip-path: circle(0% at var(--reveal-x, 50%) var(--reveal-y, 50%));
    animation: revealCircle 1s ease-out forwards;
    pointer-events: none;
}

/* Reverse animation for closing the game */
.game-close-animation {
    clip-path: circle(150% at var(--reveal-x, 50%) var(--reveal-y, 50%));
    animation: closeCircle 1s ease-in forwards;
    pointer-events: none;
}

/* Separate circle element for better visibility */
.game-reveal-circle {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 50%;
    border: 6px solid #ff5555; /* Bright red border for high visibility */
    box-shadow: 0 0 15px rgba(255, 85, 85, 0.7); /* Glow effect */
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 999; /* Very high z-index to ensure visibility */
    animation: expandVisibleCircle 1s ease-out forwards;
}

/* Circle for closing animation */
.game-close-circle {
    position: fixed;
    top: 0;
    left: 0;
    width: 300vh; /* Start large */
    height: 300vh; /* Start large */
    border-radius: 50%;
    border: 6px solid #ff5555;
    box-shadow: 0 0 15px rgba(255, 85, 85, 0.7);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 999;
    animation: contractVisibleCircle 1s ease-in forwards;
}

@keyframes expandVisibleCircle {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    90% {
        width: 300vh;
        height: 300vh;
        opacity: 0.8;
    }
    100% {
        width: 300vh;
        height: 300vh;
        opacity: 0;
    }
}

@keyframes contractVisibleCircle {
    0% {
        width: 300vh;
        height: 300vh;
        opacity: 0.8;
    }
    90% {
        width: 10px;
        height: 10px;
        opacity: 1;
    }
    100% {
        width: 0;
        height: 0;
        opacity: 0;
    }
}

@keyframes revealCircle {
    0% {
        clip-path: circle(0% at var(--reveal-x, 50%) var(--reveal-y, 50%));
    }
    100% {
        clip-path: circle(150% at var(--reveal-x, 50%) var(--reveal-y, 50%));
    }
}

@keyframes closeCircle {
    0% {
        clip-path: circle(150% at var(--reveal-x, 50%) var(--reveal-y, 50%));
    }
    100% {
        clip-path: circle(0% at var(--reveal-x, 50%) var(--reveal-y, 50%));
    }
}

.game-start-btn.active {
    color: #ffdd00; /* Bright yellow color when game is active */
    text-shadow: 0 0 8px rgba(255, 221, 0, 0.6); /* Yellow glow effect */
}

/* Multiplayer avatar styles */
.avatar {
    position: absolute;
    transform: translate(0, 0);
    transition: transform 0.12s linear;
    pointer-events: none;
    z-index: 10;
}

.avatar .sprite {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #6b7280;
}

.avatar .name {
    position: absolute;
    top: -16px;
    left: -4px;
    font: 12px/1 sans-serif;
    color: #fff;
    text-shadow: 0 1px 2px #000;
}

.avatar .sprite.facing-right {
    background: linear-gradient(90deg, #6b7280 50%, #4b5563 50%);
}

.avatar .sprite.facing-left {
    background: linear-gradient(90deg, #4b5563 50%, #6b7280 50%);
}

/* Chat input styles */
.game-chat-input {
    position: fixed;
    display: none;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(122, 162, 255, 0.7);
    border-radius: 15px;
    color: white;
    font-family: monospace;
    font-size: 14px;
    max-width: 200px;
    z-index: 10000;
    box-shadow: 0 0 10px rgba(122, 162, 255, 0.4);
    outline: none;
    backdrop-filter: blur(3px);
}

.game-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}