* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
  font-family: Arial, sans-serif; 
  background: #f0f8ff; 
  height: 100vh; 
  position: relative; 
  overflow: hidden; 
  user-select: none; 
}
#settingsBtn { 
  position: absolute; top: 1rem; right: 1rem; 
  font-size: 2rem; cursor: pointer; z-index: 10; 
}
#avatarBox { 
  position: absolute; top: 1rem; left: 1rem; 
  width: 30vw; height: 25vh; 
  background: lightblue; border: 3px solid blue; border-radius: 1rem; 
  display: flex; align-items: center; justify-content: center; 
}
#gpcPile { 
  position: absolute; top: 1rem; left: 30rem; 
  width: 20vw; height: 20vh; 
  background: lightgray; border: 3px solid gray; border-radius: 1rem; 
}
#redPile { 
  position: absolute; top: 1rem; right: 4rem; 
  width: 20vw; height: 20vh; 
  background: lightgray; border: 3px solid gray; border-radius: 1rem; 
}

#climberBox { 
  position: absolute; bottom: 1rem; left: 1rem; 
  width: 25vw; height: 20vh; 
  background: lightgreen; border: 3px solid green; border-radius: 1rem; 
}
#centerArea { 
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
  width: 80vw; text-align: center; 
}
#instruction { font-size: 1.5rem; margin-bottom: 1rem; }
#activeContent { 
  min-height: 40vh; font-size: 3rem; 
  background: white; border-radius: 1rem; padding: 2rem; margin: 1rem 0; 
  border: 2px dashed #ccc; 
}
#controls { display: flex; gap: 1rem; justify-content: center; }
button { padding: 1rem 2rem; font-size: 1.2rem; border-radius: 1rem; cursor: pointer; }
.glow-green { box-shadow: 0 0 20px #4caf50; background: #e8f5e8 !important; }
.card { 
  display: inline-block; margin: 1rem; padding: 2rem; 
  background: white; border: 3px solid #333; border-radius: 1rem; font-size: 4rem; 
  cursor: pointer; transition: all 0.3s; 
}
.card:hover { transform: scale(1.1); }
#settingsOverlay { 
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
  background: rgba(0,0,0,0.8); display: flex; flex-direction: column; 
  align-items: center; justify-content: center; color: white; 
}
.hidden { display: none !important; }
@media (max-width: 480px) { 
  #avatarBox, #gpcPile, #climberBox { width: 25vw; height: 18vh; } 
  #activeContent { font-size: 2.5rem; } 
}

#starterScreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
}

.icon-btn {
  font-size: 4rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  margin: 1rem;
}

.icon-btn:hover, .icon-btn:focus {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.icon-btn:active {
  transform: scale(1.05);
}

/* Avatar "talk" animation */
#avatarBox.talking {
  background: #e0f7ff;
  animation: pulse-talk 1.5s ease-in-out;
  font-weight: bold;
  font-size: 1.2em;
}

@keyframes pulse-talk {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(0,150,255,0.5); }
}

/* Hide starter during learning */
#starterScreen.hidden {
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.5s ease-out;
  pointer-events: none;
}

/* Center area visible after start */
#centerArea {
  opacity: 0.3;
  transition: opacity 0.5s;
}

#starterScreen.hidden ~ #centerArea {
  opacity: 1;
}

/* Responsive fixes for piles on mobile */
@media (max-width: 768px) {
  #gpcPile { left: 35vw !important; }
  #redPile { right: 5vw !important; }
  .icon-btn { font-size: 3.5rem; margin: 0.5rem; }
}

#centerArea {
  opacity: 0.3;
  transition: all 0.5s ease-out;
}

#centerArea.visible {
  opacity: 1;
}

/* Ensure hidden on load */
body:not(.learning) #centerArea {
  display: none !important;
}

/* GPC Cards - FIXED */
.gpc-card {
  position: relative;
  width: 22vw; height: 22vh; max-width: 140px; max-height: 140px;
  background: white; 
  border: 4px solid #333; border-radius: 1.5rem;
  font-family: var(--selection-font, 'Arial Black', Arial);
  font-weight: 900; font-size: 4rem; color: #333;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  padding: 1rem; /* Space for icons */
  box-sizing: border-box;
}

.gpc-card:hover {
  transform: scale(1.05); box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

/* ICONS - Discrete top corners */
.gpc-card .icon {
  position: absolute; 
  top: 0.5rem; 
  font-size: 1.4rem; 
  width: 2.8rem; height: 2.8rem;
  background: rgba(255,255,255,0.95); 
  border: 2px solid #ddd;
  border-radius: 50%; 
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; 
  transition: all 0.2s ease;
  z-index: 2;
}

.gpc-card .icon:hover { 
  transform: scale(1.25); 
  background: white; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.gpc-card .ear { right: 0.5rem; }
.gpc-card .tip { left: 0.5rem; }

/* Shuffle animation */
@keyframes shuffleIn {
  0% { 
    transform: translateX(15vw) translateY(-10vh) scale(0.3) rotate(-15deg); 
    opacity: 0; 
  }
  50% { opacity: 0.7; transform: scale(0.8) rotate(5deg); }
  100% { 
    transform: translateX(0) translateY(0) scale(1) rotate(0deg); 
    opacity: 1; 
  }
}

.gpc-card.shuffle-in {
  animation: shuffleIn 0.8s ease-out forwards;
}

.large-gpc { font-size: 8rem !important; padding: 2rem !important; }
#drawCanvas { touch-action: none; }

#infoBtn {
  position: fixed;
  top: 1rem;
  right: 3rem;  /* Next to settings */
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 100;
  padding: 0.5rem;
  background: rgba(52, 152, 219, 0.1);
  border-radius: 50%;
  border: 2px solid #3498db;
  transition: all 0.2s;
}

#infoBtn:hover {
  background: #3498db;
  color: white;
  transform: scale(1.1);
}

#infoOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);  /* Darker backdrop */
  display: none;  /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 2000;  /* HIGHER than everything */
}

#infoOverlay.active {
  display: flex;  /* Show with .active class */
}

#infoContent {
  background: #f8f9fa;
  max-width: 90vw;
  max-height: 90vh;
  padding: 2rem;
  border-radius: 1rem;
  overflow-y: auto;
  font-family: sans-serif;
  line-height: 1.6;
  max-width: 800px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  position: relative;
}

#infoClose {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 2rem;
  cursor: pointer;
  color: #666;
  background: none;
  border: none;
  font-weight: bold;
}

#infoClose:hover {
  color: #dc3545;
}