.df-stats { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; font-weight: 800; }
.df-step.is-done { background: #f3fbef; }
.df-step__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; }
.df-step__status { font-size: 15px; font-weight: 800; color: var(--ink-2); }
.df-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.df-area { min-height: 110px; border-radius: 18px; border: 3px solid #d8cfbd; background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px; box-shadow: 0 4px 0 rgba(29,39,51,.12); }
@media (hover: hover) { .df-area:hover { border-color: var(--barn); } }
.df-area.is-done { border-color: var(--green); background: #eaf7e6; }
.df-area__icon { font-size: 40px; line-height: 1; }
.df-area__name { font-weight: 900; font-size: 19px; }
.df-area__count { font-size: 14px; font-weight: 800; color: var(--ink-2); }

.df-scene { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 22px; overflow: hidden; border: 4px solid #fff; box-shadow: var(--shadow); }
@media (min-width: 600px) { .df-scene { aspect-ratio: 16 / 10; } }
.df-scene--paddock { background: radial-gradient(ellipse at 80% 8%, #ffe27a 0 6%, transparent 7%), linear-gradient(180deg, #9fdcff 0 24%, #8cd06f 24% 100%); }
.df-scene--barn { background: repeating-linear-gradient(90deg, #b8412f 0 38px, #a8321f 38px 42px), #b8412f; }
.df-scene--barn::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: repeating-linear-gradient(0deg, #d9b56a 0 10px, #caa257 10px 12px); }
.df-scene--chooks { background: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 2px, transparent 2px 22px), repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0 2px, transparent 2px 22px), linear-gradient(180deg, #9fdcff 0 18%, #c9a26a 18% 100%); }
.df-scene--dam { background: radial-gradient(ellipse at 50% 58%, #5fb3e6 0 34%, #7fc4ea 35% 40%, transparent 41%), linear-gradient(180deg, #9fdcff 0 20%, #8cc86a 20% 100%); }
.df-scene--orchard { background: radial-gradient(circle at 15% 40%, #4f9f45 0 9%, transparent 10%), radial-gradient(circle at 85% 38%, #4f9f45 0 9%, transparent 10%), radial-gradient(circle at 50% 70%, #4f9f45 0 8%, transparent 9%), linear-gradient(180deg, #9fdcff 0 20%, #9fd67f 20% 100%); }
.df-scene--bush { background: radial-gradient(circle at 10% 20%, #6f8f5a 0 14%, transparent 15%), radial-gradient(circle at 92% 30%, #6f8f5a 0 16%, transparent 17%), linear-gradient(180deg, #b9e4f7 0 22%, #b8b27a 22% 100%); }
.df-scene--creek { background: linear-gradient(160deg, transparent 0 40%, #5fb3e6 40% 58%, transparent 58%), linear-gradient(180deg, #9fdcff 0 18%, #86c56a 18% 100%); }
.df-spot {
  position: absolute; transform: translate(-50%, -50%); width: 66px; height: 66px; min-width: 48px; min-height: 48px; border-radius: 50%; z-index: 1;
  border: 3px dashed rgba(255,255,255,.9); background: rgba(255,255,255,.35); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
}
.df-scene.is-easy .df-spot[data-state="hidden"] { animation: ssg-wiggle 2.4s ease-in-out infinite; }
.df-spot__hider { font-size: 40px; line-height: 1; }
.df-spot.is-found { border: 3px solid #fff; background: rgba(255,255,255,.85); box-shadow: 0 0 0 3px var(--green); }
.df-spot.is-empty { background: rgba(255,255,255,.18); border-style: dotted; opacity: .6; cursor: default; }
.df-spot.is-pop { animation: ssg-pop .45s ease-out; }
.df-spot.is-hint { animation: ssg-wiggle .8s ease-in-out infinite; }
.df-spot__art { font-size: 42px; line-height: 1; display: flex; }
.df-spot__art.is-svg svg { width: 50px; height: 50px; }

.df-panel:empty { display: none; }
.df-fact__top { display: flex; align-items: center; gap: 12px; }
.df-fact__art { flex: none; width: 84px; height: 84px; border-radius: 20px; background: linear-gradient(180deg, #fff3c7, #eaf7e6); display: flex; align-items: center; justify-content: center; font-size: 56px; border: 3px solid #fff; box-shadow: var(--shadow); }
.df-fact__art.is-svg svg { width: 68px; height: 68px; }
.df-fact__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.df-fact__name { font-weight: 900; color: var(--green); font-size: 18px; }
.df-fact__pts { font-weight: 900; color: #7a4a12; font-size: 16px; }
.df-fact__head { font-weight: 900; font-size: 16px; color: #7a4a12; }
.df-fact__row { display: flex; align-items: flex-start; gap: 10px; }
.df-fact__body { flex: 1; font-size: 19px; font-weight: 700; }
.ssg-fact { background: #fff8dc; border: 3px solid var(--straw); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.df-name { display: flex; flex-direction: column; gap: 8px; background: #f1f8ff; border: 3px solid #b9dcf5; border-radius: 18px; padding: 12px; }
.df-name__q { font-weight: 900; font-size: 18px; }
.df-name__row { display: flex; gap: 8px; flex-wrap: wrap; }
.df-name__input { flex: 1 1 160px; min-width: 0; min-height: 52px; border-radius: 14px; border: 3px solid #d8cfbd; font: inherit; font-size: 22px; font-weight: 800; padding: 6px 12px; background: #fff; }
.df-name__input:focus { outline: none; border-color: var(--barn); box-shadow: 0 0 0 4px rgba(196,61,44,.2); }
.df-name__msg { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.df-name__msg.is-try { color: #8a4b0f; }
.df-name__ideas-label { font-weight: 800; font-size: 15px; }
.df-name__ideas { display: flex; flex-wrap: wrap; gap: 8px; }
.df-idea { min-height: 48px; padding: 6px 16px; border-radius: 999px; border: 3px solid #e0a800; background: #fff6cf; font-weight: 900; font-size: 18px; cursor: pointer; }
.df-done { text-align: center; align-items: center; background: #f3fbef; }
.df-guide { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.df-card { background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.df-card.is-unknown { background: rgba(255,255,255,.6); box-shadow: none; border: 3px dashed #cfc6b8; }
.df-card__art { width: 70px; height: 70px; font-size: 48px; display: flex; align-items: center; justify-content: center; line-height: 1; }
.df-card__art.is-svg svg { width: 64px; height: 64px; }
.df-card__art--q { opacity: .5; }
.df-card__name { font-weight: 900; font-size: 17px; line-height: 1.2; }
.df-card__pet { font-weight: 900; color: var(--green); font-size: 17px; }
.df-card__where { font-size: 14px; color: var(--ink-2); font-weight: 700; }
.df-card__btn { width: 100%; padding: 6px 10px; font-size: 15px; }