/* Hoppitree: Animal Valley game styles. Prefix every class with the game id. */

/* ---------- Animal Babies ---------- */
.babies-stage { background: linear-gradient(180deg, rgba(255, 246, 214, .7), rgba(255, 226, 190, .55)); }
.babies-q { max-width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2.4vw, 26px); min-height: clamp(96px, 20vh, 170px); padding: 10px clamp(16px, 3vw, 34px); border-radius: 30px; background: rgba(255, 255, 255, .7); box-shadow: 0 10px 22px rgba(29, 43, 83, .1); }
.babies-big { font-size: clamp(72px, 15vh, 130px); line-height: 1.05; }
.babies-baby { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; min-width: clamp(56px, 8vw, 84px); }
.babies-small { position: relative; z-index: 1; font-size: clamp(38px, 6.5vh, 58px); line-height: 1.1; }
.babies-tad { position: relative; z-index: 1; width: clamp(70px, 10vw, 104px); height: auto; margin-bottom: 6px; }
.babies-q > .babies-tad { width: clamp(110px, 22vh, 190px); align-self: center; }
/* nest cue under baby birds that stay in the nest */
.babies-nest { padding-bottom: 14px; }
.babies-nest::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 86%; height: 26px; transform: translateX(-50%); border-radius: 6px 6px 40px 40px; background: repeating-linear-gradient(100deg, #A8743A 0 6px, #8A5A2B 6px 9px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25); z-index: 2; }
.babies-mystery { align-items: center; align-self: center; width: clamp(64px, 9vw, 92px); height: clamp(64px, 9vw, 92px); border-radius: 50%; border: 4px dashed #FFB703; background: #FFF8E1; color: #FB8500; font-size: clamp(34px, 5vw, 50px); font-weight: 700; animation: babies-pulse 1.6s ease-in-out infinite; }
.babies-ear { font-size: clamp(50px, 10vh, 84px); line-height: 1.1; align-self: center; }
.babies-sign { align-self: center; padding: 4px 22px 8px; border-radius: 22px; background: linear-gradient(160deg, #FFB703, #FB8500); color: #fff; font-size: clamp(30px, 5.4vw, 54px); font-weight: 700; line-height: 1.2; text-shadow: 0 3px 0 rgba(0, 0, 0, .18); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .14), 0 10px 20px rgba(251, 133, 0, .28); white-space: nowrap; }
.babies-arrow { align-self: center; font-size: clamp(34px, 5vw, 54px); color: #FB8500; }
.babies-done { animation: babies-cheer .6s cubic-bezier(.2, 1.6, .4, 1); }
.babies-done .babies-baby, .babies-done .babies-sign { animation: popIn .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.babies-choices .babies-baby { align-items: center; min-height: clamp(84px, 11vw, 120px); }
.babies-choices .babies-small { font-size: clamp(50px, 6.6vw, 72px); }
.babies-choices .babies-nest { align-items: flex-end; padding-bottom: 18px; }
.babies-word { font-size: clamp(32px, 4.6vw, 50px); font-weight: 700; color: var(--purple); line-height: 1.1; }
.babies-words .choice:nth-child(2) .babies-word { color: var(--pink); }
.babies-words .choice:nth-child(3) .babies-word { color: #1F9D8F; }
.babies-words .choice:nth-child(4) .babies-word { color: #E8590C; }
.babies-words .choice { min-height: clamp(110px, 14vw, 160px); padding: 14px 22px; }
.babies-words .mini-speak { font-size: 24px; opacity: .8; padding: 6px; }
@keyframes babies-pulse { 50% { transform: scale(1.1); } }
@keyframes babies-cheer { 0% { transform: scale(.92); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* ---------- Animal Homes ---------- */
.homes-stage { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.4vh, 14px); padding: clamp(8px, 1.6vh, 16px) clamp(8px, 1.6vw, 18px); background: linear-gradient(180deg, rgba(225, 245, 255, .7), rgba(214, 245, 205, .6)); }
.homes-fact { display: flex; align-items: center; gap: 8px; min-height: 54px; max-width: 100%; visibility: hidden; }
.homes-fact-on { visibility: visible; animation: popIn .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.homes-hop { flex-shrink: 0; line-height: 0; }
.homes-hop .clu { width: 42px; height: 49px; }
.homes-fact-text { background: #fff; border-radius: 18px; padding: 8px 16px; font-size: clamp(16px, 2.1vw, 23px); font-weight: 600; color: var(--ink); box-shadow: 0 6px 14px rgba(29, 43, 83, .14); }
.homes-tray { flex: 1; min-height: 0; width: 100%; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: clamp(8px, 2vw, 26px); }
.homes-slot { width: clamp(68px, 9.5vw, 100px); height: clamp(68px, 9.5vw, 100px); }
.homes-item { position: relative; width: 100%; height: 100%; display: grid; place-items: center; font-size: clamp(44px, 6.4vw, 68px); line-height: 1; background: #fff; border-radius: 26px; box-shadow: 0 10px 18px rgba(29, 43, 83, .16); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; z-index: 3; transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), box-shadow .2s, opacity .3s; }
.homes-drag { cursor: grabbing; z-index: 10; transition: box-shadow .2s; box-shadow: 0 22px 34px rgba(29, 43, 83, .28); }
.homes-sel { box-shadow: 0 0 0 6px var(--yellow), 0 12px 22px rgba(29, 43, 83, .22); animation: homes-bob .9s ease-in-out infinite; }
.homes-in { transition: transform .32s ease-in, opacity .32s ease-in; opacity: .2; pointer-events: none; z-index: 10; }
.homes-gone { visibility: hidden; }
.homes-bins { width: 100%; display: grid; justify-content: center; align-items: end; gap: clamp(8px, 2vw, 26px); grid-template-columns: repeat(var(--homes-n, 3), minmax(0, min(250px, 34vh))); }
.homes-bins-2 { --homes-n: 2; }
.homes-bins-3 { --homes-n: 3; }
.homes-bins-4 { --homes-n: 4; }
.homes-bin { position: relative; display: block; padding: 0; border: 5px solid #fff; border-radius: 26px; background: #fff; overflow: hidden; box-shadow: 0 12px 22px rgba(29, 43, 83, .18); font: inherit; color: inherit; cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; }
.homes-art { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; }
.homes-label { display: block; padding: 2px 4px 5px; font-size: clamp(15px, 2vw, 22px); font-weight: 700; color: var(--ink); white-space: nowrap; }
.homes-pic { position: relative; display: block; }
.homes-res { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-end; justify-content: center; gap: 2px; padding-bottom: 5%; font-size: clamp(26px, 4vw, 46px); line-height: 1.05; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.homes-hover { transform: scale(1.07) translateY(-4px); border-color: var(--green); box-shadow: 0 0 0 6px rgba(59, 193, 74, .45), 0 16px 26px rgba(29, 43, 83, .2); }
.homes-gulp { animation: homes-gulp .45s; }
.homes-nudge { animation: homes-nudge .9s ease-in-out 2; border-color: var(--yellow); }
@keyframes homes-gulp { 40% { transform: scale(1.1, .92); } 70% { transform: scale(.97, 1.05); } }
@keyframes homes-nudge { 25% { transform: rotate(-4deg) scale(1.05); } 75% { transform: rotate(4deg) scale(1.05); } }
@keyframes homes-bob { 50% { transform: translateY(-6px); } }

@media (max-width: 600px) {
  .homes-bins-4 { --homes-n: 2; grid-template-columns: repeat(2, minmax(0, min(170px, 19vh))); }
  .homes-fact { min-height: 48px; }
  .babies-choices .choice { min-width: 118px; min-height: 118px; }
  .babies-q { gap: 8px; padding: 8px 12px; }
  .babies-big { font-size: clamp(64px, 11vh, 96px); }
  .babies-q > .babies-tad { width: 104px; }
  .babies-sign { font-size: 28px; padding: 4px 14px 7px; }
}
@media (max-height: 720px) {
  .homes-fact { min-height: 46px; }
  .homes-hop .clu { width: 36px; height: 42px; }
}