#what-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;
}

/* 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; }

/* Grid Section */
#grid-section { display: flex; flex-direction: column; align-items: center; margin: 1.5rem 0; gap: 1rem; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 800px;
}
.grid-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;
}
.grid-card:hover { transform: scale(1.08); }
.grid-card.flipped { filter: grayscale(100%) brightness(70%); opacity: 0.45; pointer-events: none; }
.grid-card.selected-to-eliminate { outline: 4px solid rgba(255,0,0,0.9); transform: scale(0.98); box-shadow:0 6px 12px rgba(0,0,0,0.25);}
.grid-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);} }

/* What Section / Buttons */
#what-section { display:flex; justify-content:center; align-items:center; gap:10px; margin:1.2rem 0; flex-wrap:wrap; }
#what-section input {
  padding:10px; 
  border:1px solid #cfd8e4; 
  border-radius:6px; 
  width:230px; 
  font-size:1rem; 
  transition:border-color 0.2s ease;
}
#what-section input:focus { border-color:#1ec8c8; outline:none; }
.btn-action {
  padding: 10px 18px; 
  border:none; 
  border-radius:8px; 
  font-weight:600; 
  cursor:pointer; 
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.btn-action:hover { transform: scale(1.05); 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; }

.btn-action.what { background:#ffb703; color:#fff; }
.btn-action.confirm { background:#1ec8c8; color:#fff; }
.btn-action.yes { background:#1ec8c8; color:#fff; }
.btn-action.no { background:#e63946; color:#fff; }

/* Secret Image at Bottom */
#your-secret { display:flex; flex-direction:column; align-items:center; gap:0.5rem; margin-top:16px;}
#your-secret h4 { margin:0; font-size:1rem; color:#1ec8c8; font-weight:600; }
#your-secret-card img { width:100px; height:100px; border-radius:10px; object-fit:cover; border:4px solid #1ec8c8; box-shadow:0 0 12px rgba(30,200,200,0.7); animation:pulseYourCharacter 2s infinite; }

/* Status & Result Overlay */
#status-bar { text-align:center; margin-top:12px; font-weight:600; font-size:1rem; color:#2e3a45; }
#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; box-shadow:0 6px 20px rgba(0,0,0,0.25); text-align:center;}
.result-box h2 { margin:0; font-size:2rem; color:#1ec8c8; animation:flashText 1.2s ease infinite;}
@keyframes flashText {0%, 100% { color: #1ec8c8; }50% { color: #ffb703; }}

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