/* Custom styles for the Snake vs Frogs game */

/* Custom mud color for TailwindCSS */
.bg-mud-600 {
    background-color: #8B4513;
}

/* Fullscreen layout */
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Z-index helpers to ensure HUD is above backgrounds */
.z-1000 { z-index: 1000; }
.z-1001 { z-index: 1001; }

/* Play/Pause HUD tweaks for mobile hit area */
#playPauseBtn { min-width: 40px; min-height: 40px; }

#startScreen {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
}

/* Wooden CTA Button Styles */
.wooden-cta-button {
    cursor: pointer;
    transition: transform 0.15s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.wooden-cta-button:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

.wooden-cta-button:active {
    transform: scale(0.95);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Forest Background Overlay */
#startScreen {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
}

/* Character Positioning */
#startScreen .character-frogs {
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}



/* Game canvas background - simple mud color with 2-3 random green spots */
#gameCanvas {
    background-color: #8B4513; 
    background-image: 
        /* Only 2-3 random green spots - comment */
        radial-gradient(circle at 25% 30%, rgba(34, 139, 34, 0.7) 0%, transparent 20%),
        radial-gradient(circle at 75% 70%, rgba(50, 205, 50, 0.6) 0%, transparent 18%),
        radial-gradient(circle at 50% 15%, rgba(34, 139, 34, 0.5) 0%, transparent 15%);
    background-size: 80px 80px, 70px 70px, 60px 60px;
    background-position: 0 0, 40px 40px, 20px 20px;
}

/* Ensure canvas container centers dynamically sized canvas */
.game-stage { display: flex; align-items: center; justify-content: center; height: 100%; }

/* Pause overlay ensures content readable on board */
#pauseOverlay .end-scoreboard-text { text-align: center; }

/* Stone border effect - multi-layered stone wall */
#gameCanvas {
    border: 8px solid;
    border-image: linear-gradient(45deg, #8B7355, #A0522D, #8B7355, #CD853F) 1;
    box-shadow: 
        /* Inner stone layers */
        inset 0 0 0 2px #8B7355,
        inset 0 0 0 4px #A0522D,
        inset 0 0 0 6px #8B7355,
        inset 0 0 0 8px #CD853F,
        /* Outer shadow */
        0 0 25px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* Stone texture overlay */
#gameCanvas::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: 
        linear-gradient(90deg, transparent 0%, rgba(139, 115, 85, 0.3) 50%, transparent 100%),
        linear-gradient(0deg, transparent 0%, rgba(160, 82, 45, 0.2) 50%, transparent 100%);
    border-radius: 4px;
    pointer-events: none;
}

/* Snake styling */
.snake-segment {
    background: linear-gradient(45deg, #32CD32, #228B22);
    border: 2px solid #006400;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 100, 0, 0.5);
}

/* Frog styling */
.frog-small {
    background: linear-gradient(45deg, #90EE90, #32CD32);
    border: 2px solid #228B22;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(34, 139, 34, 0.6);
}

.frog-big {
    background: linear-gradient(45deg, #00FF00, #32CD32);
    border: 3px solid #228B22;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(34, 139, 34, 0.8);
}

/* Commentary animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.compliment-bounce {
    animation: bounce 0.6s ease-in-out;
}

/* Scoreboard glow effect */
#score, #frog-count, #time {
    text-shadow: 0 0 10px currentColor;
}

/* Minimalist silver animated border for HUD card */
.hud-card {
    position: relative;
}
.hud-card::before {
    content: '';
    position: absolute; inset: -2px; border-radius: 14px;
    padding: 2px; background: linear-gradient(90deg, #c0c0c0, #f5f5f5, #c0c0c0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: none; /* default off */
}

.hud-card.animate-border::before {
    animation: hudBorder 2.2s linear infinite;
}

@keyframes hudBorder {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Button hover effects */
#restartBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Game over overlay fade in */
.end-scoreboard { position: relative; width: min(640px, 80vw); }
.end-scoreboard-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4)); }
.end-scoreboard-text {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.6);
    padding: 1.5rem;
}

/* Make end screen container use flex when visible */
#endScreen { display: none; }
#endScreen.flex { display: flex; }

/* Responsive design */
@media (max-width: 768px) {
    #gameCanvas {
        width: 90vw;
        height: 60vw;
        max-width: 600px;
        max-height: 400px;
    }
    
    .fixed.top-4 {
        position: relative;
        top: 0;
        margin-bottom: 1rem;
    }
}