/* ---------- Sunny Barn Farm styles ---------- */
/* Fredoka: a rounded display face made for exactly this kind of game.
   SIL Open Font License (fonts/OFL.txt); self-hosted so the game stays offline-capable. */
@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/fredoka.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #1c3a5c;
  overflow: hidden;
  font-family: "Fredoka", "Comic Sans MS", "Chalkboard SE", "Segoe UI Rounded", "Arial Rounded MT Bold", sans-serif;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}

/* The stage is a fixed 1280x800 box scaled with CSS transform to fit the window */
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1280px; height: 800px;
  transform-origin: 0 0;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  background: #6ab04c;
}
#game { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; display: block; }

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud {
  position: absolute; left: 0; right: 0; top: 0; height: 74px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; pointer-events: none;
}
#title-pill {
  pointer-events: none;
  background: rgba(255,255,255,.88);
  border: 4px solid #ff9f43;
  border-radius: 40px;
  padding: 6px 20px;
  font-size: 26px; font-weight: bold; color: #7a3e12;
  box-shadow: 0 6px 0 rgba(0,0,0,.15);
}
#hud-left { display: flex; align-items: center; gap: 10px; pointer-events: none; }
#star-pill {
  background: rgba(255,255,255,.88); border: 4px solid #ffd23f; border-radius: 40px;
  padding: 6px 16px; font-size: 24px; font-weight: bold; color: #b8860b;
  box-shadow: 0 6px 0 rgba(0,0,0,.15); white-space: nowrap;
}
#star-pill.bump { animation: starpop .5s; }
@keyframes starpop { 50% { transform: scale(1.35) rotate(-6deg); } }
#hud-buttons { display: flex; gap: 10px; pointer-events: auto; }
.hud-btn {
  width: 58px; height: 58px; border-radius: 50%;
  border: 4px solid #fff; background: #ffd23f;
  font-size: 28px; cursor: pointer;
  box-shadow: 0 6px 0 #d19a1b, 0 8px 12px rgba(0,0,0,.25);
  transition: transform .08s;
  line-height: 1;
}
.hud-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #d19a1b; }
.hud-btn.off { filter: grayscale(1) brightness(.85); }
.hud-btn.night { background: #6c5ce7; box-shadow: 0 6px 0 #4834d4, 0 8px 12px rgba(0,0,0,.25); }

/* ---------- Big buttons ---------- */
.big-btn {
  border: 4px solid #fff; border-radius: 30px;
  background: #ff6b6b; color: #fff;
  font-family: inherit; font-size: 24px; font-weight: bold;
  padding: 10px 22px; cursor: pointer;
  box-shadow: 0 6px 0 #c0392b, 0 8px 14px rgba(0,0,0,.25);
  transition: transform .08s;
  text-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #c0392b; }
.big-btn.quiz { background: #48c774; box-shadow: 0 6px 0 #2e8b57, 0 8px 14px rgba(0,0,0,.25); }
.big-btn.quiz:active { box-shadow: 0 2px 0 #2e8b57; }
.big-btn.soft { background: #54a0ff; box-shadow: 0 6px 0 #2e6fce, 0 8px 14px rgba(0,0,0,.25); }
.big-btn.soft:active { box-shadow: 0 2px 0 #2e6fce; }

/* ---------- Barn UI ---------- */
#barn-ui { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
#btn-outside { position: absolute; left: 18px; top: 86px; pointer-events: auto; }
#barn-hint {
  position: absolute; left: 50%; top: 152px; transform: translateX(-50%);
  background: rgba(255,255,255,.9); border: 4px solid #ffd23f; border-radius: 30px;
  padding: 6px 22px; font-size: 21px; font-weight: bold; color: #5a3b1a;
  white-space: nowrap;
}
#barn-actions { position: absolute; right: 18px; top: 86px; display: flex; gap: 10px; pointer-events: auto; }

/* ---------- Farm mini-game buttons ---------- */
#farm-ui { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 3; }
#farm-actions { position: absolute; left: 18px; bottom: 18px; display: flex; gap: 10px; pointer-events: auto; }
.big-btn.listen { background: #a29bfe; box-shadow: 0 6px 0 #6c5ce7, 0 8px 14px rgba(0,0,0,.25); }
.big-btn.listen:active { box-shadow: 0 2px 0 #6c5ce7; }
.big-btn.eggs { background: #ff9f43; box-shadow: 0 6px 0 #d97b16, 0 8px 14px rgba(0,0,0,.25); }
.big-btn.eggs:active { box-shadow: 0 2px 0 #d97b16; }
.big-btn.active { background: #e74c3c; box-shadow: 0 6px 0 #a93226, 0 8px 14px rgba(0,0,0,.25); }
.big-btn.active:active { box-shadow: 0 2px 0 #a93226; }

/* ---------- Learning card ---------- */
#card {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 18px;
  background: rgba(255,255,255,.95);
  border: 5px solid #ff9f43; border-radius: 28px;
  padding: 10px 28px 12px 18px;
  box-shadow: 0 10px 0 rgba(0,0,0,.15), 0 14px 30px rgba(0,0,0,.25);
  animation: pop .35s cubic-bezier(.2,1.6,.4,1);
  z-index: 5;
}
#card-emoji { font-size: 64px; line-height: 1; }
#card-name { font-size: 46px; font-weight: 900; color: #e17055; letter-spacing: 3px; line-height: 1; }
#card-sub { font-size: 24px; color: #5a3b1a; margin-top: 4px; }
@keyframes pop { 0% { transform: translateX(-50%) scale(.4); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }

/* ---------- Subtitle ---------- */
#subtitle {
  position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%);
  background: rgba(60,30,10,.8); color: #fff;
  border-radius: 20px; padding: 8px 20px;
  font-size: 22px; max-width: 900px; text-align: center;
  z-index: 4;
}

/* ---------- Quiz ---------- */
#quiz {
  position: absolute; left: 50%; top: 150px; transform: translateX(-50%);
  min-width: 520px; width: max-content; max-width: 900px;
  background: rgba(255,255,255,.96); border: 5px solid #48c774; border-radius: 30px;
  padding: 16px 26px 22px; text-align: center;
  box-shadow: 0 10px 0 rgba(0,0,0,.15), 0 14px 30px rgba(0,0,0,.25);
  z-index: 6; animation: pop .35s cubic-bezier(.2,1.6,.4,1);
}
#quiz-q { font-size: 32px; font-weight: bold; color: #2d3436; margin-bottom: 14px; }
#quiz-choices { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; max-width: 620px; }
.num-btn {
  width: 66px; height: 66px; border-radius: 18px; border: 4px solid #fff;
  font-family: inherit; font-size: 34px; font-weight: 900; color: #fff; cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.25);
  transition: transform .08s;
}
.num-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.num-btn.right { animation: wiggle .5s; }
.num-btn.wrong { opacity: .35; }
@keyframes wiggle { 0%,100% { transform: rotate(0) scale(1);} 25% { transform: rotate(-10deg) scale(1.2);} 75% { transform: rotate(10deg) scale(1.2);} }

/* ---------- Tap hint ---------- */
#tap-hint {
  position: absolute; left: 50%; top: 92px; transform: translateX(-50%);
  background: #fff; border: 4px solid #ff6b6b; border-radius: 30px;
  padding: 6px 20px; font-size: 26px; font-weight: bold; color: #c0392b;
  animation: bounce 1s infinite; pointer-events: none; z-index: 3;
}
@keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0);} 50% { transform: translateX(-50%) translateY(-12px);} }

/* ---------- Fader ---------- */
/* Cartoon iris wipe: a circle closes on the thing you tapped, then opens on the
   new scene. The "hole" is a huge circle whose box-shadow is the curtain. */
#fader { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; --ix: 640px; --iy: 400px; }
#fader::before {
  content: ''; position: absolute; left: var(--ix); top: var(--iy);
  width: 3400px; height: 3400px; border-radius: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3400px #1c3a5c;
  transition: width .42s cubic-bezier(.2,.7,.3,1), height .42s cubic-bezier(.2,.7,.3,1);
}
#fader.on { pointer-events: auto; }
#fader.on::before { width: 0; height: 0; transition: width .36s cubic-bezier(.6,0,.8,.4), height .36s cubic-bezier(.6,0,.8,.4); }

/* ---------- Splash ---------- */
#splash {
  position: absolute; inset: 0; z-index: 30;
  background: radial-gradient(circle at 50% 30%, #ffe28a 0%, #ffb347 40%, #ff7e5f 100%);
  display: flex; align-items: center; justify-content: center;
}
.splash-box {
  background: rgba(255,255,255,.94); border: 6px solid #ff6b6b; border-radius: 36px;
  padding: 26px 44px 22px; text-align: center; max-width: 760px;
  box-shadow: 0 14px 0 rgba(0,0,0,.15), 0 20px 40px rgba(0,0,0,.3);
}
.splash-box h1 { margin: 0; font-size: 52px; color: #e17055; text-shadow: 3px 3px 0 #ffe28a; white-space: nowrap; }
.splash-box .tag { font-size: 24px; color: #6c5ce7; margin: 6px 0 10px; }
.splash-box .ages {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  background: #48c774; color: #fff; font-size: 17px; font-weight: bold;
  border-radius: 999px; padding: 3px 14px; white-space: nowrap;
}
#splash-animals { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto 12px; }
.howto { list-style: none; padding: 0; margin: 0 0 18px; text-align: left; font-size: 22px; color: #3d2b1f; }
.howto li { display: flex; align-items: center; gap: 14px; margin: 8px 0; }
.howto li span { font-size: 30px; width: 70px; flex: 0 0 70px; text-align: center; white-space: nowrap; }
.howto li b { color: #c0392b; }
#btn-start {
  font-family: inherit; font-size: 36px; font-weight: bold; color: #fff;
  background: #48c774; border: 5px solid #fff; border-radius: 40px;
  padding: 12px 46px; cursor: pointer;
  box-shadow: 0 8px 0 #2e8b57, 0 12px 20px rgba(0,0,0,.25);
  animation: pulse 1.4s infinite;
}
#btn-start:active { transform: translateY(6px); box-shadow: 0 2px 0 #2e8b57; animation: none; }
@keyframes pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.06);} }
.tiny { font-size: 18px; color: #7a3e12; margin: 12px 0 0; }

/* ---------- Rotate-your-phone overlay (portrait phones only) ---------- */
#rotate {
  position: fixed; inset: 0; z-index: 100; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: radial-gradient(circle at 50% 35%, #2c5c8f 0%, #1c3a5c 70%);
  color: #fff; text-align: center; font-size: 26px; font-weight: bold; padding: 30px;
}
#rotate .phone { font-size: 84px; display: inline-block; animation: spinphone 2s infinite; }
#rotate p { margin: 0; max-width: 84vw; font-size: clamp(15px, 4.6vw, 24px); overflow-wrap: break-word; }
@keyframes spinphone { 0%, 15% { transform: rotate(0); } 55%, 100% { transform: rotate(90deg); } }
@media (orientation: portrait) and (max-width: 920px) { #rotate { display: flex; } }

/* ---------- Compact mode: phones & small tablets get bigger buttons and text ----------
   (the whole stage is scaled down ~2x on a phone, so these logical sizes end up finger-sized) */
body.compact #hud { height: 100px; }
body.compact #title-pill { font-size: 21px; padding: 5px 14px; }
body.compact #star-pill { font-size: 27px; }
body.compact .hud-btn { width: 86px; height: 86px; font-size: 44px; }
body.compact .big-btn { font-size: 32px; padding: 14px 30px; border-radius: 36px; }
body.compact #btn-outside { top: 112px; }
body.compact #barn-actions { top: 112px; }
body.compact #barn-hint { font-size: 26px; top: 184px; }
body.compact #tap-hint { font-size: 34px; top: 108px; }
body.compact #quiz { top: 130px; }
body.compact #quiz-q { font-size: 40px; }
body.compact .num-btn { width: 100px; height: 100px; font-size: 52px; border-radius: 26px; }
body.compact #quiz-choices { max-width: 720px; gap: 16px; }
body.compact #card-emoji { font-size: 80px; }
body.compact #card-name { font-size: 56px; }
body.compact #card-sub { font-size: 30px; }
body.compact #subtitle { font-size: 29px; bottom: 180px; max-width: 1100px; }
body.compact .splash-box h1 { font-size: 60px; }
body.compact .splash-box .tag { font-size: 28px; }
body.compact .howto { font-size: 27px; }
body.compact .howto li span { font-size: 36px; }
body.compact #btn-start { font-size: 44px; }
body.compact .tiny { font-size: 24px; }

/* ================= polish =================
   The small things that make it feel like a finished game: buttons with a
   glossy top and a springy press, things that pop in rather than appear,
   stars that fly to the counter. */

/* glossy highlight: the top of every button catches the light */
.hud-btn, .big-btn, #btn-start, .num-btn { position: relative; }
.hud-btn::after, .big-btn::after, #btn-start::after, .num-btn::after {
  content: ''; position: absolute; left: 14%; right: 14%; top: 4px; height: 40%;
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0));
}
.hud-btn::after { left: 20%; right: 20%; top: 5px; height: 36%; }

/* springy press; a gentle lift on hover where there is a mouse */
.hud-btn, .big-btn, .num-btn { transition: transform .14s cubic-bezier(.2,1.8,.4,1), filter .14s, box-shadow .14s; }
.hud-btn:active, .big-btn:active, .num-btn:active { transform: translateY(4px) scale(.95); }
@media (hover: hover) {
  .hud-btn:hover, .big-btn:hover, .num-btn:hover { transform: translateY(-3px) scale(1.04); filter: brightness(1.06); }
  .hud-btn:hover:active, .big-btn:hover:active, .num-btn:hover:active { transform: translateY(4px) scale(.95); }
  #btn-start:hover { filter: brightness(1.07); }
}

/* the star that flies to the counter */
.fly-star {
  position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  font-size: 40px; line-height: 48px; text-align: center;
  z-index: 19; pointer-events: none; will-change: transform;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)) drop-shadow(0 0 10px rgba(255,220,90,.8));
}
#star-pill.bump { animation: starpop .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes starpop { 40% { transform: scale(1.35) rotate(-8deg); } }

/* start screen: the box springs up, the title drops in, the tips slide in one by one */
.splash-box { animation: boxIn .55s cubic-bezier(.2,1.5,.4,1) backwards; }
@keyframes boxIn { from { transform: scale(.72) translateY(40px); opacity: 0; } }
.splash-box h1 { animation: titleDrop .75s cubic-bezier(.2,1.7,.4,1) .12s backwards; }
@keyframes titleDrop { from { transform: translateY(-46px) scale(.8); opacity: 0; } }
#splash-animals { animation: fadeUp .5s ease-out .25s backwards; }
.howto li { animation: liIn .42s cubic-bezier(.2,1.4,.4,1) backwards; }
.howto li:nth-child(1) { animation-delay: .34s; } .howto li:nth-child(2) { animation-delay: .40s; }
.howto li:nth-child(3) { animation-delay: .46s; } .howto li:nth-child(4) { animation-delay: .52s; }
.howto li:nth-child(5) { animation-delay: .58s; }
@keyframes liIn { from { transform: translateX(-28px); opacity: 0; } }
@keyframes fadeUp { from { transform: translateY(14px); opacity: 0; } }

/* quiz numbers pop in in turn (delay set per button in JS); backwards fill so presses still work after */
.num-btn { animation: numIn .4s cubic-bezier(.2,1.7,.4,1) backwards; }
@keyframes numIn { from { transform: scale(0) rotate(-20deg); } }

/* the learning card's emoji bounces in; the narrator's subtitle rises */
#card-emoji { display: inline-block; animation: emojiIn .6s cubic-bezier(.2,1.8,.4,1) .08s backwards; }
@keyframes emojiIn { from { transform: scale(.2) rotate(-30deg); } }
#subtitle { animation: subIn .24s ease-out; }
@keyframes subIn { from { transform: translateX(-50%) translateY(12px); opacity: 0; } }

/* barn and mini-game controls arrive with a little spring */
#barn-ui:not(.hidden) .big-btn, #mini-ui:not(.hidden) .big-btn, #farm-ui:not(.hidden) .big-btn { animation: btnIn .4s cubic-bezier(.2,1.6,.4,1) .1s backwards; }
@keyframes btnIn { from { transform: scale(.4); opacity: 0; } }