* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #ffe0f0; overflow: hidden; }
.screen { display: none; height: 100vh; }
.screen.active { display: flex; flex-direction: column; }
h1 { text-align: center; padding: 20px; color: #ff69b4; }
.tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.tab { padding: 10px 20px; border: none; background: #fff; border-radius: 20px; cursor: pointer; }
.tab.active { background: #ff69b4; color: white; }
.form { padding: 20px; max-width: 400px; margin: 0 auto; }
.form input { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #ffc0d0; border-radius: 10px; font-size: 16px; }
.form button { width: 100%; padding: 14px; background: #ff69b4; color: white; border: none; border-radius: 10px; font-size: 18px; cursor: pointer; }
.emoji-pad { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin: 10px 0; }
.emoji-btn { font-size: 24px; padding: 8px; border: 2px solid #ffc0d0; border-radius: 8px; background: white; cursor: pointer; }
.emoji-btn:hover { background: #ffe0f0; }
.emoji-btn.selected { background: #ff69b4; }
.emoji-display { font-size: 20px; text-align: center; padding: 10px; }
.emoji-display span { font-size: 28px; }
.hidden { display: none !important; }
#map-container { flex: 1; }
.panel { position: absolute; bottom: 70px; left: 10px; right: 10px; background: white; border-radius: 15px; padding: 15px; max-height: 40vh; overflow-y: auto; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); }
#bottom-nav { position: absolute; bottom: 0; left: 0; right: 0; display: flex; background: white; border-top: 2px solid #ffc0d0; }
#bottom-nav button { flex: 1; padding: 15px; border: none; background: white; font-size: 20px; cursor: pointer; }
#bottom-nav button:active { background: #ffe0f0; }
.pet-card { background: #fff5f8; border-radius: 10px; padding: 10px; margin: 5px 0; display: flex; justify-content: space-between; align-items: center; }
.pet-card .pet-emoji { font-size: 36px; }
.pet-stats { flex: 1; margin-left: 10px; }
.stat-bar { height: 8px; border-radius: 4px; margin: 2px 0; }
.stat-bar.happy { background: #ffd700; }
.stat-bar.hunger { background: #ffa500; }
.stat-bar.thirst { background: #4fc3f7; }
.pet-marker { background: transparent; border: none; }
.pet-actions button:active { transform: scale(1.2); }
.pet-card { gap: 8px; }
.pet-stats small { display: block; font-size: 11px; color: #666; margin: 1px 0; }
.stat-bar { transition: width 0.3s; }

/* Starter Pet Screen */
.starter-form { padding: 15px; max-width: 500px; margin: 0 auto; }
.species-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.species-card { background: white; border: 2px solid #ffc0d0; border-radius: 12px; padding: 12px; text-align: center; cursor: pointer; transition: transform 0.2s; }
.species-card:active { transform: scale(0.95); }
.species-card.selected { border-color: #ff69b4; background: #ffe0f0; }
.species-card .emoji { font-size: 32px; }
.species-card .name { font-size: 12px; color: #666; margin-top: 4px; }
.species-card .rarity-badge { font-size: 10px; padding: 2px 6px; border-radius: 8px; margin-top: 2px; display: inline-block; }
.starter-form input { width: 100%; padding: 12px; border: 2px solid #ffc0d0; border-radius: 10px; font-size: 16px; }
.starter-form button { width: 100%; padding: 14px; background: #ff69b4; color: white; border: none; border-radius: 10px; font-size: 18px; cursor: pointer; }

/* Quiz */
.quiz-q { background: white; border: 2px solid #ffc0d0; border-radius: 12px; padding: 15px; margin: 10px 0; }
.quiz-q h3 { font-size: 15px; color: #333; }
.quiz-option { display: block; padding: 10px; margin: 5px 0; background: #fff5f8; border: 1px solid #ffc0d0; border-radius: 8px; cursor: pointer; font-size: 14px; }
.quiz-option:active { background: #ffe0f0; }
.quiz-option.selected { background: #ff69b4; color: white; }

/* Avatar Customizer */
.avatar-option-group { margin: 10px 0; }
.avatar-option-group h4 { font-size: 13px; color: #666; margin-bottom: 5px; }
.avatar-option-btn { display: inline-block; padding: 8px 12px; margin: 3px; border: 2px solid #ffc0d0; border-radius: 8px; background: white; cursor: pointer; font-size: 20px; }
.avatar-option-btn.selected { border-color: #ff69b4; background: #ffe0f0; }

/* Phase 4 Polish */
@keyframes bounce-mark {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.pet-marker div { animation: bounce-mark 1.5s ease-in-out infinite; }
.pet-marker:hover div { animation: bounce-mark 0.5s ease-in-out infinite; transform: scale(1.2); }

@keyframes pop-in {
  0% { transform: scale(0); opacity: 0; }
  80% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.species-card { animation: pop-in 0.3s ease-out; }

@keyframes happy-bounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.1) rotate(-5deg); }
  75% { transform: scale(1.1) rotate(5deg); }
}
.pet-emoji { animation: happy-bounce 2s ease-in-out infinite; display: inline-block; }

.pet-emoji.sad { animation: none; filter: grayscale(0.5) opacity(0.6); }
.pet-emoji.neutral { animation: none; filter: brightness(0.9); }

@keyframes bar-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.stat-bar { animation: bar-pulse 2s ease-in-out infinite; }

/* Collection stats */
.collection-stats { display: flex; justify-content: space-around; padding: 10px; background: #fff5f8; border-radius: 10px; margin-bottom: 10px; }
.stat-item { text-align: center; }
.stat-item .num { font-size: 24px; font-weight: bold; color: #ff69b4; }
.stat-item .label { font-size: 11px; color: #888; }

/* Friend markers */
.friend-marker div { font-size: 24px; filter: drop-shadow(0 0 4px #4CAF50); }

/* Loading spinner */
.spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid #ffc0d0; border-top-color: #ff69b4; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Better mobile touch targets */
.pet-actions button { padding: 8px; border-radius: 8px; }
.pet-actions button:active { background: #ffe0f0; }

/* Smooth panel transitions */
.panel { transition: transform 0.2s ease-out, opacity 0.2s; transform-origin: bottom; }
.panel.hidden { display: none !important; }

/* Map controls */
.leaflet-control-zoom a { background: #ff69b4 !important; color: white !important; border: none !important; }
.leaflet-popup-content-wrapper { border-radius: 15px; border: 2px solid #ffc0d0; }
.menu-item{display:block;width:200px;padding:14px;margin:5px 0;background:white;border:2px solid #ffc0d0;border-radius:12px;font-size:18px;color:#ff69b4;cursor:pointer;text-align:center;}