/* ==========================================================================
   Animal Guessing Game — stylesheet (design system from the approved anchor)
   Self-hosted fonts, no CDN. Warm "fox safari" identity: chunky solid shadows,
   Fredoka display + Nunito body, cream ground with ambient blobs.
   ========================================================================== */

@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/Fredoka-600.woff2) format('woff2');}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/Fredoka-700.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/Nunito-600.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/Nunito-700.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(../assets/fonts/Nunito-800.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url(../assets/fonts/Nunito-900.woff2) format('woff2');}

:root {
  --bg: #FBF2E0;
  --surface: #FFFDF9;
  --surface-2: #FFF7E8;
  --ink: #253026;
  --ink-soft: #63705F;
  --line: #EADFC4;
  --primary: #ED7B3A;         /* fox orange */
  --primary-ink: #C25A1E;
  --primary-shadow: #C25A1E;
  --secondary: #2E7D51;       /* forest green */
  --yellow: #F7C948;          /* sun */
  --correct: #2FA562;
  --correct-bg: #E7F6EC;
  --correct-shadow: #237e49;
  --wrong: #E24A38;
  --wrong-bg: #FCEAE6;
  --wrong-shadow: #b93526;
  --radius: 20px;
  --wrap: 1120px;
  --display: 'Fredoka', 'Segoe UI', sans-serif;
  --body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Sea page — cool ocean tint, same chunky system */
body.theme-sea {
  --bg: #E7F2F4;
  --surface-2: #EAF5F6;
  --line: #CFE4E4;
  --primary: #1F9BB0;
  --primary-ink: #0d6f80;
  --primary-shadow: #0d6f80;
  --secondary: #1f6f6b;
  --yellow: #46c6d6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body);
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(120px 120px at 8% 12%, rgba(247,201,72,.20), transparent 70%),
    radial-gradient(200px 200px at 94% 6%, rgba(237,123,58,.13), transparent 70%),
    radial-gradient(240px 240px at 90% 82%, rgba(46,125,81,.09), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
body.theme-sea {
  background-image:
    radial-gradient(120px 120px at 8% 12%, rgba(70,198,214,.20), transparent 70%),
    radial-gradient(200px 200px at 94% 6%, rgba(31,155,176,.14), transparent 70%),
    radial-gradient(240px 240px at 90% 82%, rgba(31,111,107,.10), transparent 70%);
}

/* Floating ambient shapes (from the design) — fixed at the edges, behind content */
body::before, body::after { content: ''; position: fixed; z-index: 0; pointer-events: none; }
body::before { top: 128px; left: -36px; width: 122px; height: 122px; border-radius: 50% 50% 50% 12px; background: rgba(46,125,81,.09); animation: agg-float 9s ease-in-out infinite; }
body::after { bottom: 108px; right: -30px; width: 98px; height: 98px; border-radius: 50% 50% 12px 50%; background: rgba(237,123,58,.10); animation: agg-float 11s ease-in-out infinite; }
body.theme-sea::before { background: rgba(31,111,107,.10); }
body.theme-sea::after { background: rgba(31,155,176,.12); }
@keyframes agg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

img { max-width: 100%; display: block; }
a { color: var(--secondary); text-decoration: none; }
a:hover { color: var(--primary-ink); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ---------- Navigation ---------- */
.site-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.nav-inner { max-width: var(--wrap); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-logo { width: 50px; height: 50px; border-radius: 15px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-logo svg { width: 38px; height: 38px; }
.brand-name { display: block; font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--ink); line-height: 1; }
.brand-tagline { display: block; font-weight: 800; font-size: .62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--primary-ink); margin-top: 4px; }
.nav-toggle { margin-left: auto; width: 48px; height: 48px; border-radius: 13px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); font-size: 1.15rem; cursor: pointer; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.nav-links { list-style: none; margin: 0; padding: 0; display: none; flex-direction: column; gap: 4px; width: 100%; padding-bottom: 6px; }
.nav-links.open { display: flex; }
.nav-links a { display: block; padding: 12px 13px; text-decoration: none; color: var(--ink-soft); border-radius: 12px; font-weight: 800; font-size: .95rem; }
.nav-links a:hover, .nav-links a[aria-current="page"] { background: var(--surface-2); color: var(--primary-ink); }

/* ---------- Ad placeholders ----------
   Invisible empty shells until AdSense code is pasted in. No text, no box, no gap —
   a slot only takes space once a real ad is inside it. */
.ad-slot { max-width: var(--wrap); margin: 16px auto; display: flex; align-items: center; justify-content: center; }
.ad-slot:empty { display: none; }

/* ---------- Daily Challenge nav badge (orange pill, first nav item) ---------- */
.nav-links .nav-daily a { display: inline-block; text-align: center; line-height: 1.08; padding: 7px 18px; background: linear-gradient(180deg, #FFB648, #F79A2E); color: #3A2508; border: 2px solid #E08A22; border-radius: 18px; box-shadow: 0 3px 0 #D9821B; font-weight: 900; transition: transform .08s ease, box-shadow .08s ease; }
.nav-links .nav-daily a:hover { color: #3A2508; transform: translateY(-1px); box-shadow: 0 5px 0 #D9821B; }
.game-wrap { position: relative; max-width: 660px; margin: 18px auto 0; }
.game-wrap .game { margin-top: 0; }

/* ---------- Game card ---------- */
main { position: relative; z-index: 1; }
.game { max-width: 660px; margin: 22px auto 0; background: var(--surface); border: 2px solid var(--line); border-radius: 28px; box-shadow: 0 14px 0 -4px color-mix(in srgb, var(--line) 70%, transparent), 0 24px 46px -18px rgba(60,45,20,.3); padding: 20px; text-align: center; }
.game h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); margin: 2px 0 2px; }
.game .tagline { margin: 0 0 10px; color: var(--ink-soft); font-weight: 700; font-size: .92rem; }
#play { min-height: 200px; }   /* reserve space so JS-injected game content doesn't shift the page (CLS) */

.scorebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.score-chips { display: flex; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 2px solid var(--line); border-radius: 12px; padding: 7px 12px; font-weight: 900; font-size: .9rem; }
.chip .chip-label { color: var(--ink-soft); font-weight: 800; }
.chip .star { color: var(--yellow); }
.scorebar .lives { display: flex; align-items: center; gap: 5px; letter-spacing: 2px; font-size: 1.2rem; }
.prompt { text-align: center; font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 2px 0 14px; color: var(--ink); }
.round-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(37,48,38,.82); color: #fff; font-weight: 800; font-size: .72rem; padding: 5px 11px; border-radius: 999px; }

/* Countdown timer */
.timer-row { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.timer-clock { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-soft); }
.timer-track { flex: 1; height: 14px; background: var(--surface-2); border: 2px solid var(--line); border-radius: 999px; overflow: hidden; }
.timer-bar { height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #F79A2E, var(--primary)); transition: width .1s linear; }
.timer-bar.low { background: linear-gradient(90deg, #EF6A4F, var(--wrong)); }

/* Stimulus (photo / eyes / sound) */
.stimulus { width: 100%; aspect-ratio: 16 / 10; max-height: clamp(170px, 30vh, 300px); background: var(--surface-2); border: 2px solid var(--line); border-radius: 18px; overflow: hidden; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; position: relative; }
.stimulus img { width: 100%; height: 100%; object-fit: contain; }
.stimulus .emoji-fallback { font-size: clamp(4rem, 26vw, 8rem); line-height: 1; }

/* Options */
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.option { padding: 16px 12px; font-family: var(--body); font-size: 1.02rem; font-weight: 900; background: #fff; color: var(--ink); border: 2px solid var(--line); border-radius: 16px; cursor: pointer; box-shadow: 0 4px 0 var(--line); transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease; min-height: 56px; }
.option:hover:not(:disabled) { transform: translateY(-2px); border-color: #F0B15C; box-shadow: 0 6px 0 #E9C88A; }
.option:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 2px 0 var(--line); }
.option:disabled { cursor: default; }
.option.correct { background: var(--correct); border-color: var(--correct); color: #fff; box-shadow: 0 4px 0 var(--correct-shadow); }
.option.wrong { background: var(--wrong); border-color: var(--wrong); color: #fff; box-shadow: 0 4px 0 var(--wrong-shadow); }

/* Buttons */
.btn { display: inline-block; font-family: var(--body); border: none; border-radius: 16px; cursor: pointer; font-weight: 900; font-size: 1.05rem; padding: 15px 24px; background: var(--primary); color: #3A2508; box-shadow: 0 5px 0 var(--primary-shadow); transition: transform .08s ease, box-shadow .08s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--primary-shadow); }
.btn:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--primary-shadow); }
.btn.secondary { background: var(--surface); color: var(--ink); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.btn-play-sound { font-size: 1.15rem; padding: 20px 28px; }

/* Feedback + end panel */
.feedback { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; margin: 14px 0 0; }
.feedback.show { animation: fb-pop .22s ease; border-radius: 16px; padding: 8px 14px; }
.feedback.good.show { background: color-mix(in srgb, var(--correct) 14%, transparent); }
.feedback.bad.show { background: color-mix(in srgb, var(--wrong) 12%, transparent); }
.feedback .fb-fox { flex: none; }
.feedback .fb-fox svg { display: block; width: 46px; height: 46px; }
.feedback .fb-text { text-align: left; line-height: 1.2; }
.feedback .fb-title { display: block; font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.feedback.good .fb-title { color: var(--correct); }
.feedback.bad .fb-title { color: var(--wrong); }
.feedback .fb-sub { display: block; font-size: .9rem; font-weight: 700; color: var(--ink-soft); }
@keyframes fb-pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.result { padding: 10px 4px 6px; }
.result h2 { font-size: 1.6rem; margin: 4px 0; }
.result .score-big { font-family: var(--display); font-weight: 700; font-size: 3rem; color: var(--primary-ink); margin: 6px 0; line-height: 1; }
.result .fox-cheer { display: block; width: 92px; height: 92px; margin: 0 auto 4px; }
.share-score { display: block; margin: 12px auto 0; background: none; border: none; color: var(--ink-soft); font-family: var(--body); font-weight: 800; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.share-score:hover { color: var(--primary-ink); }
.share-score.copied { color: var(--correct); }

/* Name game input */
.answer-form { display: flex; gap: 10px; margin-bottom: 12px; }
.answer-form input { flex: 1; font-family: var(--body); padding: 15px 14px; font-size: 1.1rem; font-weight: 800; border: 2px solid var(--line); border-radius: 14px; background: var(--surface-2); text-align: center; text-transform: lowercase; box-shadow: inset 0 2px 0 rgba(60,45,20,.05); }
.answer-form input:focus { outline: none; border-color: var(--primary); }

/* ---------- Content / prose ---------- */
.content { max-width: 820px; margin: 30px auto; padding: 0 20px; }
.content h2 { font-size: 1.5rem; margin: 30px 0 8px; }
.content h3 { font-size: 1.15rem; margin: 20px 0 6px; }
.content p, .content li { color: #3a352e; font-weight: 600; }
.content ul { padding-left: 20px; }
.faq dt { font-family: var(--display); font-weight: 600; font-size: 1.08rem; margin-top: 16px; }
.faq dd { margin: 4px 0 0; color: #3a352e; font-weight: 600; }

/* ---------- Related games ---------- */
.related { max-width: var(--wrap); margin: 34px auto; padding: 0 20px; }
.related h2, .related h3 { font-size: 1.4rem; margin-bottom: 12px; }
.related-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.related-grid a { display: flex; align-items: center; gap: 14px; text-decoration: none; background: var(--surface); border: 2px solid var(--line); border-radius: 18px; padding: 16px 18px; color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 1.05rem; box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--line) 70%, transparent); transition: transform .08s ease; }
.related-grid a:hover { transform: translateY(-2px); }
.related-grid .r-emoji { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--surface-2); font-size: 1.6rem; }

/* ---------- Footer (zigzag + green) ---------- */
.site-footer { position: relative; margin-top: 44px; }
.footer-wave { display: block; width: 100%; height: 44px; }
.footer-wave path { fill: var(--secondary); }
.footer-body { background: var(--secondary); color: #fff; padding: 6px 20px 34px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.footer-brand svg { width: 38px; height: 38px; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: #EAF6EF; font-weight: 800; font-size: .92rem; }
.footer-links a:hover { color: #fff; }
.footer-copy { max-width: var(--wrap); margin: 16px auto 0; font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.95); }

/* ---------- Article / policy pages ---------- */
.page-head { max-width: 820px; margin: 30px auto 0; padding: 0 20px; }
.page-head h1 { font-size: 2rem; margin-bottom: 4px; }
.page-head p { color: var(--ink-soft); font-weight: 700; }

/* ---------- Responsive ---------- */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav-links { display: flex; flex-direction: row; width: auto; margin-left: auto; align-items: center; gap: 14px; padding-bottom: 0; }
  .nav-links a { padding: 8px 4px; white-space: nowrap; }
  .related-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }