/* EduFunKid – Animal Quiz | quiz.css */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

.efaq-root {
  --efaq-primary:#43a047; --efaq-dark:#2e7d32; --efaq-accent:#ff7043;
  --efaq-yellow:#ffd600;  --efaq-blue:#42a5f5;  --efaq-bg:#e8f5e9; --efaq-text:#333;
  --efaq-radius:22px; --efaq-shadow:0 6px 0 rgba(0,0,0,.18);
  font-family:'Nunito',sans-serif;
  background:var(--efaq-bg);
  background-image:radial-gradient(circle at 20% 20%,rgba(67,160,71,.1) 0%,transparent 50%),
                   radial-gradient(circle at 80% 80%,rgba(66,165,245,.1) 0%,transparent 50%);
  border-radius:24px; overflow:hidden; position:relative;
  min-height:560px; display:flex; align-items:center; justify-content:center;
  padding:16px; box-sizing:border-box;
}
.efaq-root *,.efaq-root *::before,.efaq-root *::after {
  box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;
}

/* Screens */
.efaq-screen { display:none; width:100%; max-width:460px; flex-direction:column; align-items:center; }
.efaq-screen.efaq-active { display:flex; }

/* Home */
.efaq-home-logo { font-size:clamp(56px,15vw,80px); margin-bottom:10px; animation:efaq-bounce 1.5s infinite; }
@keyframes efaq-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.efaq-home-title { font-size:clamp(22px,6vw,34px); font-weight:900; color:var(--efaq-dark); text-align:center; margin-bottom:6px; }
.efaq-home-sub   { font-size:clamp(13px,3.5vw,15px); color:#666; text-align:center; margin-bottom:28px; }

/* Buttons */
.efaq-btn { display:inline-block; padding:14px 24px; border:none; border-radius:var(--efaq-radius);
  font-family:'Nunito',sans-serif; font-size:clamp(16px,4.5vw,20px); font-weight:800; cursor:pointer;
  transition:transform .1s,box-shadow .1s; box-shadow:var(--efaq-shadow); text-align:center; line-height:1; }
.efaq-btn:active { transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.18); }
.efaq-btn-full   { display:block; width:100%; }
.efaq-btn-green  { background:var(--efaq-primary); color:white; }
.efaq-btn-gray   { background:#bdbdbd; color:white; }
.efaq-btn-orange { background:var(--efaq-accent);  color:white; }
.efaq-btn-wrap   { width:100%; max-width:300px; }

/* Game header */
.efaq-game-header { display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:10px; }
.efaq-score-badge  { background:var(--efaq-primary); color:white; border-radius:50px; padding:6px 18px; font-size:15px; font-weight:800; }
.efaq-streak-badge { background:var(--efaq-yellow);  color:#333;  border-radius:50px; padding:6px 14px; font-size:15px; font-weight:800; }
.efaq-btn-stop { background:#ef5350; color:white; border:none; border-radius:50px; padding:7px 16px;
  font-size:13px; font-weight:800; cursor:pointer; font-family:'Nunito',sans-serif; transition:transform .1s; }
.efaq-btn-stop:active { transform:scale(.95); }

/* Progress */
.efaq-progress-wrap { width:100%; height:8px; background:#e0e0e0; border-radius:4px; margin-bottom:10px; overflow:hidden; }
.efaq-progress-bar  { height:100%; background:linear-gradient(90deg,var(--efaq-primary),var(--efaq-blue)); border-radius:4px; transition:width .5s; }

/* Animal card */
.efaq-animal-card { background:white; border-radius:28px; padding:14px; width:100%;
  display:flex; flex-direction:column; align-items:center;
  box-shadow:0 8px 32px rgba(0,0,0,.12); margin-bottom:14px; position:relative; overflow:hidden; }
.efaq-animal-card::before { content:''; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,#43a047,#42a5f5,#ffd600,#f06292); }

.efaq-img-wrap { width:min(240px,55vw); height:min(240px,55vw); border-radius:18px;
  overflow:hidden; position:relative; background:#dcedc8; flex-shrink:0; }
.efaq-img-wrap.efaq-shake { animation:efaq-shake .4s; }
.efaq-img-wrap.efaq-pop   { animation:efaq-pop .4s; }
@keyframes efaq-shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-10px)}
  40%{transform:translateX(10px)}  60%{transform:translateX(-8px)} 80%{transform:translateX(8px)} }
@keyframes efaq-pop { 0%{transform:scale(1)} 50%{transform:scale(1.12)} 100%{transform:scale(1)} }
.efaq-animal-img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:opacity .35s; }
.efaq-question-txt { font-size:clamp(13px,3.5vw,16px); color:#444; font-weight:800; margin-top:10px; text-align:center; }

/* Answer buttons */
.efaq-answers-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
.efaq-ans-btn { background:white; border:3px solid #e0e0e0; border-radius:18px; padding:13px 8px;
  font-family:'Nunito',sans-serif; font-size:clamp(14px,3.8vw,18px); font-weight:800; color:var(--efaq-text);
  cursor:pointer; transition:all .15s; box-shadow:0 4px 0 #e0e0e0; }
.efaq-ans-btn:active:not(:disabled) { transform:translateY(3px); box-shadow:0 1px 0 #e0e0e0; }
.efaq-ans-btn.efaq-correct { background:#c8e6c9; border-color:#43a047; color:var(--efaq-dark); box-shadow:0 4px 0 #81c784; }
.efaq-ans-btn.efaq-wrong   { background:#ffcdd2; border-color:#e53935; color:#b71c1c;           box-shadow:0 4px 0 #ef9a9a; }
.efaq-ans-btn:disabled { cursor:default; }

/* Result */
.efaq-result-emoji { font-size:80px; margin-bottom:10px; }
.efaq-result-title { font-size:clamp(20px,6vw,28px); font-weight:900; color:var(--efaq-dark); text-align:center; margin-bottom:6px; }
.efaq-result-score { font-size:clamp(48px,12vw,70px); font-weight:900; color:var(--efaq-primary); margin:8px 0; }
.efaq-result-label { font-size:15px; color:#777; margin-bottom:14px; }
.efaq-result-msg   { font-size:15px; color:#555; text-align:center; margin-bottom:22px; max-width:280px; }

/* Feedback overlay */
.efaq-feedback-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:50; }
.efaq-fb-icon { font-size:100px; animation:efaq-fbPop .55s forwards; opacity:0; }
@keyframes efaq-fbPop { 0%{opacity:0;transform:scale(.3)} 50%{opacity:1;transform:scale(1.2)} 100%{opacity:0;transform:scale(1.5)} }

/* Confetti */
.efaq-confetti-layer { position:absolute; inset:0; pointer-events:none; z-index:49; overflow:hidden; border-radius:24px; }
.efaq-cp { position:absolute; animation:efaq-fall linear forwards; }
@keyframes efaq-fall { 0%{transform:translateY(-20px) rotate(0);opacity:1} 100%{transform:translateY(105%) rotate(720deg);opacity:0} }

/* Milestone */
.efaq-milestone-overlay { position:absolute; inset:0; background:rgba(0,0,0,.6); display:none;
  align-items:center; justify-content:center; z-index:100; padding:20px; border-radius:24px; }
.efaq-milestone-overlay.efaq-show { display:flex; }
.efaq-milestone-card { background:white; border-radius:28px; padding:32px 24px; text-align:center; max-width:280px; width:100%; animation:efaq-mPop .4s; }
@keyframes efaq-mPop { 0%{transform:scale(.6);opacity:0} 100%{transform:scale(1);opacity:1} }
.efaq-ms-emoji { font-size:64px; margin-bottom:8px; }
.efaq-ms-title { font-size:22px; font-weight:900; color:var(--efaq-dark); margin-bottom:6px; }
.efaq-ms-sub   { font-size:14px; color:#666; margin-bottom:20px; }
.efaq-ms-btns  { display:flex; flex-direction:column; gap:10px; }

@media (max-width:400px) { .efaq-root{padding:10px;} .efaq-answers-grid{gap:8px;} }

/* ── Facebook share buttons ── */
.efaq-btn-fb {
  background: #1877f2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.efaq-btn-fb:hover  { background: #166fe5; }
.efaq-btn-fb:active { background: #1464d2; }

/* Compact share button inside play header */
.efaq-btn-share-play {
  background: #1877f2;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background .15s, transform .1s;
}
.efaq-btn-share-play:hover  { background: #166fe5; }
.efaq-btn-share-play:active { transform: scale(.95); }

/* Facebook "f" logo pill */
.efaq-fb-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: white;
  color: #1877f2;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}