/* Container */
#snap-game {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(160deg, #e9f3ff 0%, #fdfcff 100%);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Header / Player Info */
#game-header {
  text-align: center;
  margin-bottom: 1rem;
}
#player-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.player-card {
  background: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: center;
  width: 150px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.player-card h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #2e3a45;
}
.deck-count {
  margin-top: 4px;
  color: #4a5766;
  font-weight: bold;
}
.vs {
  font-size: 1.5rem;
  color: #0056d1;
  font-weight: bold;
}
#round-info {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1rem;
}
#turn-indicator {
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 0.9rem;
}
#turn-indicator.your-turn { color: #1ec8c8; }
#turn-indicator.opponent-turn { color: #ff6b6b; }

/* Deck / Grid */
#deck-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1.5rem 0;
  gap: 1rem;
}
.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 800px;
}
.deck-card {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  cursor: pointer;
  transition: all 0.2s ease;
  object-fit: cover;
  border: 2px solid transparent;
}
.deck-card:hover { transform: scale(1.08); }
.deck-card.revealed { border: 2px solid #1ec8c8; }
.deck-card.flipped { filter: grayscale(100%) brightness(70%); opacity: 0.45; pointer-events: none; }
.deck-card.selected { outline: 4px solid rgba(255,0,0,0.9); transform: scale(0.98); box-shadow:0 6px 12px rgba(0,0,0,0.25);}
.deck-card.your-character { border:4px solid #1ec8c8; box-shadow:0 0 12px rgba(30,200,200,0.7); animation: pulseYourCharacter 2s infinite; }
@keyframes pulseYourCharacter { 0%,100%{box-shadow:0 0 12px rgba(30,200,200,0.7);} 50%{box-shadow:0 0 20px rgba(30,200,200,0.9);} }

/* Pile Feed */
#pile-feed {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 98%;
  margin: 24px 0;
  gap: 16px;
}
.pile-container {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: -40px;
  perspective: 1000px;
}
.pile-container img.card {
  width: calc((100vw / 2) - 32px);
  max-width: 220px;
  height: auto;
  border-radius: 12px;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  object-fit: cover;
  background-color: #dfe9f3;
  transform-style: preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.pile-container img.card.zoomable:hover,
.pile-container img.card.zoomable:active {
  transform: scale(1.4);
  z-index: 100;
  box-shadow: 0 12px 28px rgba(0,0,0,0.3);
}
.pile-container.flip img.card { transform: rotateY(180deg); }

/* Snap / Play Section */
#snap-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
}
#snap-section input {
  padding: 10px 12px;
  width: 200px;
  font-size: 0.95rem;
  border-radius: 6px;
  border: 1px solid #cfd8e4;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#snap-section input:focus { box-shadow: 0 0 0 2px #1ec8c8; border-color: #1ec8c8; }
.btn-action {
  padding: 10px 16px;
  font-size: 0.95rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.btn-action.snap {
  background-color: #ffb703;
  color: #fff;
}
.btn-action.snap:hover { background-color: #ff9800; transform: translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.18);}
.btn-action.play {
  background-color: #1ec8c8;
  color: #fff;
}
.btn-action.play:hover { background-color: #17b4b4; transform: translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.18);}
.btn-action:disabled { opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* Status Bar */
#status-bar { width: 100%; text-align: center; margin-top: 12px; font-weight: 600; color: #2e3a45; font-size: 1rem; }

/* Result Overlay */
#result-overlay {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  backdrop-filter: blur(6px);
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
#result-overlay.hidden { display: none; }
.result-box {
  background:white;
  padding:32px 48px;
  border-radius:14px;
  text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
  animation: popIn 0.5s ease;
}
.result-box h2 {
  margin:0;
  font-size:2rem;
  color:#1ec8c8;
  animation: flashText 1.2s ease infinite;
}

@keyframes popIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes flashText { 0%, 100% { color: #1ec8c8; } 50% { color: #ffb703; } }

/* Responsive */
@media(max-width:768px){
  .deck-grid { grid-template-columns: repeat(auto-fit,minmax(60px,1fr)); gap:6px;}
  .deck-card, .pile-container img.card{ width: 90px; height: auto;}
  #snap-section input{width:180px;} 
  .btn-action{width:100%; padding:10px 0;}
}
@media(max-width:480px){
  .deck-grid { grid-template-columns: repeat(auto-fit,minmax(50px,1fr)); gap:5px;}
  .deck-card, .pile-container img.card{ width: 80px; height: auto;}
  #snap-section input{width:100%;}
  .btn-action{width:100%; padding:10px 0;}
}