* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #1a2a1a;
  color: #f0f0e8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  width: 100%;
  text-align: center;
  padding: 20px 16px 8px;
  background: #1a2a1a;
}

h1 {
  font-size: 2rem;
  color: #7ec87e;
  letter-spacing: -0.5px;
}

.subtitle {
  font-size: 0.85rem;
  color: #e8e8e8;
  margin-top: 2px;
}

.score-bar {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding: 10px;
  font-size: 0.9rem;
  color: #e8e8e8;
}

.score-bar span { font-weight: bold; color: #7ec87e; }

#game-screen {
  width: 100%;
  max-width: 480px;
  padding: 8px 16px 24px;
  flex: 1;
}

.question {
  text-align: center;
  font-size: 1rem;
  color: #e8e8e8;
  margin: 8px 0 18px;
}

.bird-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bird-btn {
  background: #2a3d2a;
  border: 2px solid #3d5a3d;
  border-radius: 16px;
  padding: 18px 20px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.bird-btn:active { transform: scale(0.97); }

.bird-btn .bird-name {
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
}

.bird-btn.pending {
  border-color: #c8a030;
  box-shadow: 0 0 0 3px rgba(200,160,48,0.35);
}
.bird-btn.correct {
  background: #1a2a4a;
  border-color: #4a90d9;
  animation: pulse-blue 0.4s ease;
}

.bird-btn.wrong       { background: #2a2a2a; border-color: #666; }
.bird-btn.reveal-fake { background: #2a2a2a; border-color: #666; }
.bird-btn.reveal-real { background: #1a2a4a; border-color: #4a90d9; }
.bird-btn:disabled { cursor: default; }

@keyframes pulse-blue {
  0%   { box-shadow: 0 0 0 0 rgba(74,144,217,0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(74,144,217,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,144,217,0); }
}

.result-label {
  font-size: 1.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 6px;
}

.label-fake { color: #999; }
.label-real { color: #4a90d9; }

.card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}


.result-icon {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}
.correct-icon { color: #4caf50; }
.wrong-icon   { color: #e05050; }

.you-picked-label {
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 4px;
}
.you-picked-label.correct { color: #4caf50; }
.you-picked-label.wrong   { color: #e05050; }

.bird-expand {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.question.correct { color: #4caf50; font-weight: 700; font-size: 1.3rem; }
.question.wrong   { color: #e05050; font-weight: 700; font-size: 1.3rem; }

@keyframes suspense-pop {
  0%   { transform: scale(1);    opacity: 0.6; letter-spacing: 0.02em; }
  20%  { transform: scale(1.18); opacity: 1;   letter-spacing: 0.08em; }
  50%  { transform: scale(1.12); opacity: 1;   letter-spacing: 0.06em; }
  70%  { transform: scale(1.18); opacity: 1;   letter-spacing: 0.08em; }
  100% { transform: scale(1.12); opacity: 1;   letter-spacing: 0.06em; }
}
.question.suspense {
  color: #f0c060;
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  display: block;
  animation: suspense-pop 1s ease-in-out forwards;
}

/* RESULT PANEL */
#result-panel {
  display: none;
  margin-top: 20px;
  background: #2a3d2a;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #3d5a3d;
}

.result-header {
  text-align: center;
  padding: 14px;
  font-size: 1.1rem;
  font-weight: 700;
}

.result-header.win  { background: #1a4a2a; color: #7ec87e; }
.result-header.lose { background: #3a1a1a; color: #e07070; }

.real-birds { display: flex; flex-direction: column; }

.real-bird {
  padding: 14px 16px;
  border-top: 1px solid #3d5a3d;
}

.real-bird h3 {
  font-size: 1rem;
  color: #ffffff;
  margin-bottom: 10px;
}

.photo-wrap {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #1a2a1a;
  min-height: 160px;
  position: relative;
  overflow: hidden;
}

.photo-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbbbbb;
  font-size: 0.8rem;
}

.bird-photo {
  width: 100%;
  display: block;
  border-radius: 10px;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.bird-photo.loaded { opacity: 1; }

.fun-fact {
  font-size: 0.85rem;
  color: #e8e8e8;
  line-height: 1.5;
}

.next-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 16px auto;
  background: #4caf50;
  color: #0a1a0a;
  border: none;
  border-radius: 12px;
  padding: 16px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.next-btn:active { background: #3d9140; }

.streak {
  text-align: center;
  font-size: 0.82rem;
  color: #e8e8e8;
  padding-top: 4px;
}

.streak:not(:empty) {
  padding-bottom: 16px;
}

.streak span { color: #f0c060; font-weight: bold; }

/* ── Welcome screen ────────────────────────────────────────────────────────── */
#welcome-screen {
  width: 100%;
  max-width: 480px;
  padding: 8px 16px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.welcome-content {
  text-align: center;
}

.welcome-prompt {
  font-size: 0.95rem;
  color: #cccccc;
  margin-bottom: 14px;
  font-weight: 500;
}

.welcome-diff-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.welcome-diff-btn {
  background: #2a3d2a;
  border: 2px solid #3d5a3d;
  border-radius: 14px;
  padding: 16px 20px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
}

.welcome-diff-btn:active {
  transform: scale(0.98);
  background: #3d5a3d;
}

.wdb-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: #7ec87e;
}

.wdb-desc {
  font-size: 0.82rem;
  color: #aaaaaa;
}

.welcome-auto .wdb-label { color: #f0c060; }
.wdb-auto-note { font-size: 0.78rem; font-weight: 400; color: #aaaaaa; }

/* ── Question meta (progress + adaptive label) ─────────────────────────────── */
.question-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}

.question-progress {
  text-align: center;
  font-size: 0.85rem;
  color: #cccccc;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.adaptive-label {
  font-size: 0.78rem;
  color: #f0c060;
  font-weight: 600;
}

/* ── Mid-game difficulty adjust buttons ────────────────────────────────────── */
.adjust-difficulty {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 14px 0 4px;
}

.adjust-btn {
  background: transparent;
  border: 1px solid #3d5a3d;
  border-radius: 8px;
  color: #999;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 14px;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
}

.adjust-btn:hover, .adjust-btn:active { color: #ccc; border-color: #5a7a5a; }

/* ── End screen auto-ready message ─────────────────────────────────────────── */
.auto-ready-msg {
  font-size: 0.9rem;
  font-weight: 700;
  color: #f0c060;
  margin: 0 0 16px;
  padding: 8px 12px;
  background: rgba(240,192,96,0.1);
  border-radius: 10px;
  border: 1px solid rgba(240,192,96,0.3);
}

/* ── Difficulty pills (end screen play-again) ──────────────────────────────── */
.diff-pills {
  display: flex;
  gap: 2px;
}

.diff-btn {
  background: transparent;
  border: 1px solid #3d5a3d;
  border-radius: 10px;
  padding: 3px 9px;
  font-size: 0.80rem;
  font-weight: 600;
  color: #cccccc;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s ease;
}

.diff-btn.active {
  background: #3d5a3d;
  border-color: #4d6a4d;
  color: #ffffff;
}

.diff-btn:active { opacity: 0.7; }

/* ── Toast notification ─────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(30, 60, 30, 0.97);
  border: 1px solid #4d7a4d;
  color: #7ec87e;
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  text-align: center;
}

.toast.show { opacity: 1; }

#end-screen {
  width: 100%;
  max-width: 480px;
  padding: 24px 16px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.end-content {
  text-align: center;
  background: #2a3d2a;
  border-radius: 20px;
  border: 1px solid #3d5a3d;
  padding: 32px 24px;
  width: 100%;
}

.end-content h2 {
  font-size: 1.3rem;
  color: #e8e8e8;
  margin-bottom: 16px;
}

.end-score-display {
  font-size: 4rem;
  font-weight: 800;
  color: #7ec87e;
  line-height: 1;
  margin-bottom: 8px;
}

@keyframes score-glow {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 24px rgba(126,200,126,0.9), 0 0 48px rgba(126,200,126,0.4); }
}

.end-score-display.perfect {
  animation: score-glow 0.8s ease-in-out 4;
}

.out-of {
  font-size: 2rem;
  color: #bbbbbb;
}

.end-difficulty-label {
  font-size: 0.82rem;
  color: #cccccc;
  margin-bottom: 24px;
}

.end-difficulty-label span {
  color: #e8e8e8;
}

.end-next-section {
  border-top: 1px solid #3d5a3d;
  padding-top: 20px;
}

.end-next-label {
  font-size: 0.85rem;
  color: #e8e8e8;
  margin-bottom: 10px;
}

.end-next-section .diff-pills {
  justify-content: center;
  margin-bottom: 16px;
}

/* Fake bird AI image */
.fake-imagine {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.imagine-btn {
  display: block;
  width: 100%;
  background: rgba(240,192,96,0.08);
  border: 1px solid rgba(240,192,96,0.4);
  border-radius: 10px;
  padding: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #f0c060;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}

.imagine-btn:active { background: rgba(240,192,96,0.16); }

@keyframes egg-wobble {
  0%   { transform: rotate(0deg) scale(1); }
  15%  { transform: rotate(-7deg) scale(1.05); }
  30%  { transform: rotate(7deg) scale(1.05); }
  45%  { transform: rotate(-10deg) scale(1.08); }
  60%  { transform: rotate(10deg) scale(1.08); }
  75%  { transform: rotate(-7deg) scale(1.05); }
  90%  { transform: rotate(7deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes draw-crack {
  to { stroke-dashoffset: 0; }
}

.egg-anim-wrap {
  position: relative;
  display: block;
  text-align: center;
  margin-bottom: 2px;
  animation: egg-wobble 0.55s ease-in-out infinite;
}

.egg-char {
  font-size: 2.8rem;
  display: block;
  filter: drop-shadow(0 0 6px rgba(255, 200, 50, 0.7)) saturate(1.6) brightness(1.15);
}

.egg-cracks {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 2.8rem;
  height: 3.4rem;
  pointer-events: none;
}

.crack {
  fill: none;
  stroke: rgba(30, 15, 5, 0.8);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}

.crack-a {
  animation: draw-crack 0.35s ease-out forwards;
  animation-delay: 0.3s;
}

.crack-b {
  animation: draw-crack 0.22s ease-out forwards;
  animation-delay: 0.55s;
}

.crack-c {
  animation: draw-crack 0.22s ease-out forwards;
  animation-delay: 0.72s;
}

@keyframes hatch-bounce {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-7px); }
}

.hatching-text {
  text-align: center;
  font-size: 1.3rem;
  font-style: italic;
  padding: 10px 0;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.hl {
  display: inline-block;
  animation: hatch-bounce 0.7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.09s);
}

.hl:nth-child(1) { color: #ff6b6b; }
.hl:nth-child(2) { color: #ffd93d; }
.hl:nth-child(3) { color: #6bcb77; }
.hl:nth-child(4) { color: #4d96ff; }
.hl:nth-child(5) { color: #ff6b6b; }
.hl:nth-child(6) { color: #f7b731; }
.hl:nth-child(7) { color: #c77dff; }
.hl:nth-child(8) { color: #ff9ff3; }

.hatching-dots {
  display: inline-block;
  width: 1.5em;
  text-align: left;
  color: #aaaaaa;
}

.imagine-caption {
  font-size: 0.85rem;
  color: #cccccc;
  text-align: center;
  margin-bottom: 10px;
}

.fake-bird-reveal .photo-wrap {
  min-height: 200px;
}

.fake-bird-reveal .bird-photo {
  opacity: 1;
}