/* styles.css */

body {
  background: linear-gradient(180deg, #071025, #0b1220);
  color: #e6eef8;
  font-family: Inter, system-ui, Arial;
}

.panel {
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: width 0.2s, height 0.2s; /* smooth resizing */
  overflow: hidden; /* prevent content overflow */
}

/* Canvas now grows with the panel */
canvas {
  display: block;
  border-radius: 10px;
  background: #031022;
  width: 100%;
  height: 100%;        /* fill parent section height */
  object-fit: contain;  /* maintain aspect ratio without overflow */
}

/* Buttons styling */
.btn {
  padding: 0.4rem 0.7rem;
  border-radius: 0.4rem;
  font-weight: 600;
}

/* Winner banner */
#winnerBanner.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

#winnerBanner.win-player-1 { background: linear-gradient(90deg, #ff6b6b, #c30000); }
#winnerBanner.win-player-2 { background: linear-gradient(90deg, #ffd86b, #c99e00); }
#winnerBanner.win-player-3 { background: linear-gradient(90deg, #6ea8fe, #2b6fd6); }
#winnerBanner.win-player-4 { background: linear-gradient(90deg, #7cf7c1, #00a65a); }
#winnerBanner.draw { background: #888888; }

/* Optional bounce effect */
@keyframes bounceIn {
  0% { transform: translateX(-50%) scale(0.3); opacity: 0; }
  60% { transform: translateX(-50%) scale(1.1); opacity: 1; }
  80% { transform: translateX(-50%) scale(0.95); }
  100% { transform: translateX(-50%) scale(1); }
}

#winnerBanner.show {
  animation: bounceIn 0.7s forwards;
}