.zoo-cover-image { display: block; width: 100%; height: auto; }
body.zoo-game { background: #e8f6f8; color: #3e596b; }
body.zoo-game > .site-header, body.zoo-game > footer { display: none; }
body.zoo-game #app { width: calc(100% - 32px); max-width: 1100px; margin-inline: auto; min-height: 100dvh; padding-bottom: 12px; }
.zoo-game h1, .zoo-game h2, .zoo-game h3 { font-family: Library, 'Trebuchet MS', sans-serif; color: #456a7c; }
.zoo-game button, .zoo-game .button { min-height: 48px; min-width: 48px; }
.zoo-game .zoo-primary { color: white; background: #397e92; border: 2px solid #2e6a80; box-shadow: 0 3px 0 #27586e; padding: 9px 17px; }
.zoo-game .zoo-primary:hover { background: #2d6e84; }
.zoo-game .secondary { background: #fffef8; color: #456274; border-color: #b8cfd6; }
.zoo-game :is(button,a,input,summary):focus-visible { outline: 3px solid #c39229; outline-offset: 3px; }
.zoo-game h2[tabindex="-1"]:focus { outline: none; }
.zoo-toolbar { display: grid; grid-template-columns: 135px minmax(0,1fr) auto 48px auto; gap: 8px 10px; align-items: center; padding: 8px 0; }
.zoo-toolbar h1 { font-size: 20px; line-height: 1.2; margin: 0 0 4px; }.zoo-toolbar span,.zoo-toolbar button,.zoo-toolbar a { font-size: 14px; }
.zoo-motion { display: flex; align-items: center; min-height: 48px; gap: 8px; font-size: 14px; cursor: pointer; }.zoo-motion input { width: 22px; height: 22px; accent-color: #5f9aa8; }
.zoo-cover,.zoo-finish { text-align: center; }.zoo-cover h2,.zoo-finish h2 { font-size: 36px; line-height: 1.2; margin: 18px 0 14px; }
.zoo-cover > p,.zoo-finish > p { max-width: 780px; margin: 14px auto; }.zoo-cover > img { max-width: 850px; margin: 20px auto; border-radius: 8px; }
.zoo-learn { max-width: 780px; margin: 18px auto; padding: 20px; border: 2px solid #b9d7dc; border-radius: 8px; text-align: center; background: #fffef9; }
.zoo-learn h2 { font-size: 28px; }.zoo-lesson { min-height: 225px; display: grid; align-content: start; gap: 10px; margin: 18px 0; }
.zoo-lesson > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 8px; min-height: 60px; border: 1px solid #c3d5dc; background: #f1f7f8; border-radius: 5px; }
.zoo-lesson strong { font-size: 28px; }.zoo-lesson span { font-size: 17px; }.zoo-lesson .current { background: #fff1c5; border-color: #d7bf74; }
.zoo-board { padding: 7px; border: 2px solid #b3cfd8; border-top: 5px solid #7eb7c6; border-radius: 8px; background: #fffefa; display: grid; gap: 4px; }
.zoo-task-top { display: grid; grid-template-columns: minmax(260px,420px) minmax(0,1fr); gap: 20px; align-items: center; justify-content: center; min-height: 98px; }
.zoo-shipment { position: relative; width: min(100%,330px); height: 98px; margin: 0 auto; }
.zoo-mail-art { display: block; width: 100%; height: 100%; }
.zoo-equation { position: absolute; display: grid; place-items: center; top: 32%; left: 14%; width: 72%; height: 44%; font-size: 31px; line-height: 1.1; color: #405c71; white-space: nowrap; }
.zoo-task-copy { text-align: left; }.zoo-task-copy h2 { font-size: 22px; line-height: 1.2; margin: 0 0 8px; }.zoo-task-copy p { font-size: 18px; line-height: 1.35; margin: 0; max-width: 450px; }
.zoo-feedback { min-height: 84px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 9px 12px; border: 1px solid #d0dfe6; border-radius: 6px; background: #f0f6fa; font-size: 18px; line-height: 1.35; }
.zoo-feedback p { margin: 0; }.zoo-feedback.error { background: #fff0eb; border-color: #e8c2b8; }.zoo-feedback.success { background: #edf7ed; border-color: #b9d4bf; }.zoo-feedback.hint { background: #fff6dc; border-color: #e0cc8d; }
.zoo-houses { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; align-items: start; }
.zoo-houses .zoo-house { display: flex; flex-direction: column; gap: 0; padding: 2px; border: 2px solid transparent; background: transparent; box-shadow: none; color: #3f6070; border-radius: 6px; min-width: 0; }
.zoo-house-scene { display: block; position: relative; width: min(100%,190px); aspect-ratio: 1; }
.zoo-house-art { display: block; width: 100%; height: 100%; }
.zoo-address { position: absolute; left: 50%; transform: translateX(-50%); top: 26%; width: 78px; height: 42px; display: grid; place-items: center; font-size: 33px; line-height: 1; background: #fffef8; border: 2px solid #b7b398; border-radius: 5px; }
.zoo-house-note { display: block; width: 100%; min-height: 24px; font-size: 15px; line-height: 1.3; padding-top: 2px; }
.zoo-house:hover:not(:disabled), .zoo-house:focus-visible { background: #eaf7f2; border-color: #93c0b5; }
.zoo-house:disabled { opacity: 1; }.zoo-houses .house-chosen { background: #ecf7e6; border-color: #88af82; }.zoo-houses .house-wrong { background: #fff4ee; border-color: #e1b8a5; }
.zoo-houses .assisted-target { background: #fff0ba; border-color: #d6af4d; box-shadow: 0 0 0 2px #eadba4; }
.wrong-note { color: #a46458; animation: zoo-error-note 3s forwards; }
.zoo-street { --rider-width: 140px; position: relative; height: 100px; margin: 0 4px; }
.zoo-street > svg { position: absolute; width: 100%; height: 100%; inset: 0; }
.zoo-rider { position: absolute; bottom: 0; left: 1%; width: var(--rider-width); height: 100px; pointer-events: none; }
.zoo-scooter,.zoo-bunny { display: block; width: 100%; height: 100%; }.rider-success { left: 1%; }
.rider-ride { left: calc(var(--destination) - var(--rider-width)/2); animation: zoo-ride 1s ease-in-out; }
.rider-handoff,.rider-delivered { left: calc(var(--destination) - var(--rider-width)/2); }
.rider-handoff .zoo-bunny,.rider-delivered .zoo-bunny { max-width: 75px; margin-inline: auto; }
.zoo-delivery-item { position: absolute; width: 44px; height: 34px; bottom: 19%; right: 10%; pointer-events: none; z-index: 2; }
.item-letter { animation: zoo-letter-post 1.5s ease-in-out forwards; }.item-parcel { right: 27%; bottom: 13%; animation: zoo-parcel-hand 1.5s ease-in-out forwards; }
.zoo-actions { display: flex; min-height: 50px; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }.zoo-actions button { font-size: 18px; }.zoo-actions > strong { font-size: 18px; color: #557b6a; text-align: center; }
.zoo-stamps { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 5px; width: min(100%,620px); margin: 1px auto; }
.zoo-stamps > span { display: grid; place-items: center; min-height: 28px; border: 1px dashed #c1cbd4; border-radius: 3px; color: #7b8e9b; background: #f5f8fa; font-size: 14px; }
.zoo-stamps > .stamped { background: #ffefb6; border: 2px solid #be9f58; color: #5b785c; }
.zoo-tens-model { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.zoo-tens-model > span { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }.zoo-tens-model i { display: block; width: 12px; height: 34px; border: 1px solid #79a6b1; background: repeating-linear-gradient(to bottom,#b4dce0 0,#b4dce0 2px,#f0fafb 2px,#f0fafb 3px); border-radius: 2px; }.zoo-tens-model small { font-size: 14px; margin-inline: 5px; }
.zoo-final-scene { height: 300px; max-width: 900px; margin: 18px auto; position: relative; background: #dbf4fc; border-radius: 8px; }.zoo-town-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.zoo-final-postman { position: absolute; left: 41%; bottom: 6px; height: 200px; width: 17%; }.zoo-final-neighbors { position: absolute; display: grid; grid-template-columns: repeat(6,1fr); gap: 4px; height: 100px; width: 90%; left: 5%; bottom: 0; pointer-events: none; }
.zoo-final-neighbors .zoo-resident { height: 100%; width: 100%; }.zoo-final-neighbors .zoo-resident:nth-child(3) { transform: translateX(-18px); }.zoo-final-neighbors .zoo-resident:nth-child(4) { transform: translateX(18px); }
.resident-happy .zoo-animal-arm { transform-origin: 72px 83px; animation: zoo-wave 1s ease-in-out 3; }
.zoo-final-postman .bunny-joy { animation: zoo-postman-cheer 1.2s ease-in-out 3; }
.zoo-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 20px 0; }.zoo-stats > div { display: grid; gap: 5px; background: #fffefa; border: 1px solid #b9d0d6; border-radius: 6px; padding: 14px; }.zoo-stats strong { font-size: 32px; color: #3e7c87; }.zoo-stats span { font-size: 16px; }
.zoo-finish-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }.zoo-finish details { max-width: 700px; text-align: left; margin: 20px auto; }.zoo-finish summary { min-height: 48px; cursor: pointer; }
.zoo-dialog { width: min(620px,calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 20px; border: 2px solid #99bdcb; border-radius: 8px; background: #fffefa; color: #3e596b; }.zoo-dialog::backdrop { background: #38576c77; }
.zoo-paused *, .zoo-paused { animation: none !important; transition: none !important; }
@keyframes zoo-ride { from { left: 1%; } to { left: calc(var(--destination) - var(--rider-width)/2); } }
@keyframes zoo-letter-post { 0% { transform: translate(-40px,55px); opacity: 1; } 70% { transform: translate(0,0); opacity: 1; } 100% { transform: translate(0,9px) scale(.25); opacity: 0; } }
@keyframes zoo-parcel-hand { from { transform: translate(-45px,50px); opacity: 1; } 70%,100% { transform: translate(0,0); opacity: 1; } }
@keyframes zoo-wave { 50% { transform: rotate(-15deg); } }
@keyframes zoo-postman-cheer { 50% { transform: translateY(-4px) rotate(3deg); } }
@keyframes zoo-error-note { 0%,75% { opacity: 1; } 100% { opacity: 0; } }
@media (max-height:760px) and (min-width:901px) { .zoo-shipment { height: 90px; }.zoo-task-top { min-height: 90px; }.zoo-house-scene { width: min(100%,150px); }.zoo-feedback { min-height: 80px; }.zoo-street,.zoo-rider { height: 74px; }.zoo-board { gap: 3px; } }
@media (max-width:1000px) { .zoo-toolbar { grid-template-columns: 135px minmax(0,1fr) auto 48px; }.zoo-motion { grid-column: 2 / -1; min-height: 30px; }.zoo-task-top { grid-template-columns: minmax(240px,1fr) minmax(0,1fr); gap: 10px; } }
@media (max-width:760px) { body.zoo-game #app { width: calc(100% - 16px); }.zoo-toolbar { grid-template-columns: 1fr auto 48px; }.zoo-toolbar > div { grid-column: 1 / -1; grid-row: 1; }.zoo-motion { grid-column: 1 / -1; justify-self: start; }.zoo-toolbar h1 { font-size: 19px; }.zoo-task-top { grid-template-columns: 1fr; gap: 4px; }.zoo-task-copy { text-align: center; }.zoo-task-copy h2 { font-size: 20px; margin-bottom: 4px; }.zoo-task-copy p { font-size: 17px; margin: auto; }.zoo-feedback { font-size: 17px; min-height: 112px; }.zoo-houses { gap: 5px; }.zoo-house-scene { width: min(100%,150px); }.zoo-address { font-size: 30px; width: 65px; height: 40px; top: 24%; }.zoo-cover h2,.zoo-finish h2 { font-size: 29px; }.zoo-final-scene { height: 220px; }.zoo-final-postman { height: 155px; }.zoo-final-neighbors { height: 75px; }.zoo-lesson strong { font-size: 25px; } }
@media (max-width:420px) { body.zoo-game #app { width: calc(100% - 12px); }.zoo-board { padding: 5px; }.zoo-toolbar h1 { font-size: 18px; }.zoo-shipment { height: 104px; }.zoo-equation { font-size: 27px; }.zoo-house-note { font-size: 12px; min-height: 32px; }.zoo-address { font-size: 28px; width: 56px; height: 38px; top: 23%; }.zoo-street { --rider-width: 85px; height: 75px; }.zoo-rider { height: 75px; }.zoo-stamps { gap: 3px; }.zoo-stamps > span { font-size: 12px; }.zoo-actions button { font-size: 17px; }.zoo-feedback { font-size: 16px; }.zoo-stats { grid-template-columns: 1fr; }.zoo-stats > div { display: flex; align-items: center; gap: 14px; text-align: left; }.zoo-final-scene { height: 180px; }.zoo-final-postman { height: 130px; }.zoo-final-neighbors { height: 58px; }.zoo-learn { padding: 14px; }.zoo-learn h2 { font-size: 23px; } }
@media (prefers-reduced-motion:reduce) { .zoo-game *, .zoo-game *::before, .zoo-game *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }