.game-container { max-width: 960px; margin: 24px auto; padding: 0 20px; }

body { text-transform: uppercase; }

.figure-display { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  min-height: 200px; 
  margin: 20px 0;
}

.card-stack { 
  position: relative; 
  display: flex; 
  gap: 20px; 
  align-items: center;
}

.pile { 
  position: relative; 
  width: 240px; 
  height: 160px;
}

.pile-card {
  position: absolute;
  width: 240px;
  height: 160px;
  background: linear-gradient(135deg, #475569 0%, #334155 100%);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  border: 2px solid #1e293b;
}
.pile-card:nth-child(1) { top: 0; left: 0; transform: rotate(-3deg); opacity: 0.6; }
.pile-card:nth-child(2) { top: 3px; left: 3px; transform: rotate(-1deg); opacity: 0.7; }
.pile-card:nth-child(3) { top: 6px; left: 6px; transform: rotate(1deg); opacity: 0.8; }
.pile-card:nth-child(4) { top: 9px; left: 9px; transform: rotate(-0.5deg); opacity: 0.9; }
.pile-card:nth-child(5) { top: 12px; left: 12px; }

.description-card { 
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
  color: white; 
  padding: 24px; 
  border-radius: 16px; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
  min-width: 320px;
  text-align: center;
}
.description-card h3 { margin: 0 0 12px; font-size: 22px; }
.description-card p { margin: 0; font-size: 18px; line-height: 1.5; }

.options-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
  gap: 12px; 
  margin: 16px 0;
}

.option-btn { 
  padding: 16px; 
  border-radius: 12px; 
  border: 2px solid #d1d5db; 
  background: #fff; 
  cursor: pointer; 
  font-size: 18px; 
  font-weight: 700; 
  transition: all 120ms ease;
  text-transform: uppercase;
}

.option-btn:hover { background: #f3f4f6; transform: translateY(-2px); }
.option-btn.correct { background: #dcfce7; border-color: #22c55e; }
.option-btn.wrong { background: #fee2e2; border-color: #ef4444; animation: shake 180ms linear; }

.feedback { margin-top: 10px; font-weight: 700; text-align: center; min-height: 24px; }
.ok { color: #16a34a; }
.bad { color: #dc2626; }

.row-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.btn-next { 
  padding: 12px 16px; 
  border-radius: 999px; 
  background: linear-gradient(180deg, #22c55e, #16a34a); 
  color: #052e16; 
  font-weight: 800; 
  border: none; 
  box-shadow: 0 10px 20px rgba(34,197,94,0.35); 
  cursor: pointer;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(34,197,94,0.15);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.overlay.show { display: flex; animation: pop 300ms ease-out; }
.overlay .burst { font-size: 72px; background: #22c55e; color: white; padding: 20px 28px; border-radius: 16px; box-shadow: 0 20px 60px rgba(34,197,94,0.4); }

.rotate-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; padding: 24px; background: #0f172a; color: #fff; z-index: 60; }
.rotate-overlay .card { background: #111827; border: 1px solid rgba(255,255,255,0.12); padding: 16px 20px; border-radius: 14px; }
@media (orientation: portrait) and (max-width: 900px) {
  .rotate-overlay { display: flex; }
}

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

@keyframes pop {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}