/* Custom styling to ensure full dark background */
body {
    font-family: 'Inter', sans-serif;
    background-color: #121212; /* Even darker background */
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

/* Neon Green Accent */
.neon-accent { color: #00e676; }
/* Neon Red Lose Color */
.neon-lose { color: #ff1744; }
/* Neon Blue Tie Color */
.neon-tie { color: #2979ff; }

/* Button hover/active state matching the dark theme */
.choice-btn:hover {
    background-color: #616161;
    transform: scale(1.05);
    transition: all 0.1s ease-in-out;
}

/* Result display area styling */
#display-arena {
    background-color: #333333;
    box-shadow: 0 0 15px rgba(0, 230, 118, 0.1); /* Soft, subtle glow */
    transition: box-shadow 0.3s ease-out;
}

/* Input styling */
.player-input {
    background-color: #3a3a3a;
    border: 1px solid #555555;
    color: white;
    padding: 0.5rem;
    border-radius: 0.5rem;
    width: 100%;
    transition: border-color 0.2s;
}
.player-input:focus {
    outline: none;
    border-color: #00e676;
    box-shadow: 0 0 5px rgba(0, 230, 118, 0.5);
}

/* Turn indicator styles */
.turn-p1 { color: #00e676; font-weight: bold; }
.turn-p2 { color: #ff1744; font-weight: bold; }

/* Ensures the whole app container is responsive but contained */
#app-container {
    width: 90%;
    max-width: 960px; /* Max desktop width */
    min-height: 600px;
    height: 80vh; /* Takes 80% of viewport height */
}

/* Sidebar styling */
#sidebar-nav {
    background-color: #1a1a1a;
}

/* Text for key instructions */
.key-instruction {
    font-family: 'Courier New', Courier, monospace;
    background-color: #444444;
    padding: 2px 5px;
    border-radius: 4px;
    margin: 0 2px;
    color: white;
    white-space: nowrap;
}

/* Specific sidebar legend styling */
#keyboard-legend {
    border-top: 1px solid #333333;
    padding-top: 15px;
    margin-top: 15px;
}

/* --- THEMATIC ANIMATION CSS --- */
.move-emoji {
    display: inline-block;
    font-size: 1em;
    transition: transform 0.1s;
}

/* 1. Rock vs Scissors (Crush) */
@keyframes rock-crush-winner {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2) rotate(5deg); }
}
@keyframes rock-crush-loser {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.1) rotate(360deg); } /* Crushed/shattered */
}
.anim-crush-win { animation: rock-crush-winner 0.3s ease-in-out; }
.anim-crush-lose { animation: rock-crush-loser 0.4s ease-out forwards; }


/* 2. Scissors vs Paper (Cut) */
@keyframes scissors-cut-winner {
    0%, 100% { transform: rotate(0); }
    50% { transform: rotate(15deg) scale(1.05) translateX(5px); }
}
@keyframes scissors-cut-loser {
    0% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(-15px) rotate(-5deg); }
    100% { transform: translateX(15px) rotate(5deg); opacity: 0; } /* Split and vanishes */
}
.anim-cut-win { animation: scissors-cut-winner 0.3s ease-in-out; }
.anim-cut-lose { animation: scissors-cut-loser 0.6s cubic-bezier(0.17, 0.67, 0.83, 0.67) forwards; }

/* 3. Paper vs Rock (Cover) */
@keyframes paper-cover-winner {
    0% { transform: translate(0) rotateY(0deg); }
    100% { transform: translate(50px) scale(1.2) rotateY(180deg); } /* Flips and moves over rock */
}
@keyframes paper-cover-loser {
    0% { transform: scale(1); }
    50% { transform: scale(0.9) translate(5px); } /* Recoils and shrinks */
    100% { transform: scale(0.9) translate(5px); opacity: 0.6; } /* Slightly obscured */
}
.anim-cover-win { animation: paper-cover-winner 0.6s ease-in-out forwards; }
.anim-cover-lose { animation: paper-cover-loser 0.6s ease-in-out forwards; }

/* Draw animation (Simple shake for both) */
@keyframes draw-shake {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(-3px); }
    75% { transform: translate(3px); }
}
.anim-draw { animation: draw-shake 0.1s ease-in-out 5; }