*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 2px;  
}

body{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #0d0d0d 0%, #1a1a1a 100%);
}

.wrapper{
    background: rgba(10, 10, 10, 0.9);
    padding: 2rem 2rem 3rem;
    border-radius: 10px;
    box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff inset;
    gap: 2.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}


h1, h2 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 2rem;
    text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff;
    color: #0ff;
}

h2{
    font-size: 1.5rem;
    text-shadow: 0 0 3px #0ff;
}

#result, #player-choice, #computer-choice {
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0 0 3px #0ff;
    color: #0ff;
}

#choices{
    display: flex;
    gap: 0.6rem;
}

#choices button {
    padding: 0.5rem 1.2rem;
    background: #111;
    color: #0ff;
    border: 2px solid #0ff;
    border-radius: 5px;
    font-size: 3rem;
    transition: 0.3s ease-in-out;
    cursor: pointer;
    text-shadow: 0 0 3px #0ff, 0 0 5px #0ff, 0 0 8px #0ff;
}

#choices button:hover {
    background: #0ff;
    opacity: 0.8;
    color: #111;
    text-shadow: 0 0 5px #0ff, 0 0 15px #0ff, 0 0 20px #0ff;
}

#choices button:active {
  transform: scale(0.9);
}

#player-choice, #computer-choice {
    font-size: 1.2rem;
    font-weight: 400;
}

#result {
    font-size: 2rem;
    font-weight: 500;
    border: 3px solid #0ff;
    border-radius: 0.6rem;
    padding: 0.5rem 1rem;
    color: #0ff; 
    text-shadow: 0 0 3px #0ff, 0 0 7px #0ff, 0 0 10px #0ff;
    transition: color 0.2s, border-color 0.2s, text-shadow 0.2s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.shake {
  animation: shake 0.3s;
}

.win {
    color: #0f0 !important;
    border-color: #0f0 !important;
    text-shadow: 0 0 5px #0f0, 0 0 10px #0f0 !important;
}

.lose {
    color: #f00 !important;
    border-color: #f00 !important;
    text-shadow: 0 0 5px #f00, 0 0 10px #f00 !important;
}

.draw {
    color: #ff0 !important;
    border-color: #ff0 !important;
    text-shadow: 0 0 5px #ff0, 0 0 10px #ff0 !important;
}

#loading {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 255, 255, 0.2); /* light cyan border */
    border-top: 5px solid #0ff; /* bright cyan top */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto; /* center in wrapper */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); } 
}
#scoreboard {
  display: flex;
  gap: 2rem;
  margin-top: 0.5rem;
  padding: 0.8rem 1.5rem;
  border: 2px solid #0ff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,255,255,0.4);
}

.score {
  font-size: 1.1rem;
  text-transform: uppercase;
  color: #0ff;
  text-shadow: 0 0 3px #0ff;
}

.score span {
  font-size: 1.5rem;
  font-weight: 700;
  margin-left: 0.5rem;
}
.leader {
  color: #0f0;
  text-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
}

.loser {
  color: #f00;
  text-shadow: 0 0 5px #f00, 0 0 10px #f00;
}
#ssr, #csr {
    padding: 0.5rem 1.2rem;
    background: #111;
    color: #0ff;
    border: 2px solid #0ff;
    border-radius: 5px;
    font-size: 3rem;
    transition: 0.3s ease-in-out;
    cursor: pointer;
    text-shadow: 0 0 3px #0ff, 0 0 5px #0ff, 0 0 8px #0ff;
    font-size: 1.5rem;
}