@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Nunito:wght@500;600;700;800;900&display=swap');
:root{--ink:#25232a;--cream:#fff3cf;--purple:#8a67d9;--mint:#baf3d4;--yellow:#ffe07b;--shadow:5px 6px 0 var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff7e6;background-image:radial-gradient(#e6d9bf 1.2px,transparent 1.2px);background-size:20px 20px;color:var(--ink);font-family:Nunito,system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #256bc9;outline-offset:3px}.skip{position:absolute;top:-100px;left:10px;background:white;padding:10px;z-index:20}.skip:focus{top:10px}
.site-header{background:var(--cream);border-bottom:3px solid var(--ink)}.header-inner{max-width:1460px;margin:auto;padding:11px 24px;display:flex;gap:18px;align-items:center;justify-content:space-between}.brand{display:inline-flex;font:22px/1 'Archivo Black',sans-serif;color:white;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}.brand span{background:#e6463c;padding:9px}.brand b{background:#ffd046;color:var(--ink);padding:9px;border-left:3px solid var(--ink)}.header-tag{font-weight:900;font-size:12px;letter-spacing:1.5px}.back,#fullscreen-btn{font-size:12px;font-weight:900;border:2px solid var(--ink);background:white;padding:9px 12px;box-shadow:3px 3px 0 var(--ink)}.back:hover,#fullscreen-btn:hover{background:var(--yellow)}
.page-grid{max-width:1460px;margin:auto;padding:17px 24px 42px;display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:20px;align-items:start}.main-column{min-width:0}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;font-size:11px;font-weight:900;letter-spacing:1px}.toy{background:var(--purple);border:4px solid var(--ink);border-radius:19px;box-shadow:7px 8px 0 var(--ink);padding:10px}.toy-top,.toy-bottom{display:flex;justify-content:space-between;gap:10px;align-items:center;color:white;font-size:10px;font-weight:900;letter-spacing:1.2px;padding:3px 8px 10px}.toy-bottom{padding:10px 8px 2px}.toy-inner{background:#fff1d1;border:3px solid var(--ink);border-radius:10px;padding:12px}.title-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 4px 11px}.eyebrow{font-size:10px;font-weight:900;letter-spacing:1.4px;color:#7750a9}.title-row h1{font:clamp(24px,3vw,39px)/1.05 'Archivo Black',sans-serif;letter-spacing:-1.5px;margin:3px 0}.title-row h1 span{color:#ed4e79;text-shadow:2px 2px 0 var(--ink)}.title-row p{margin:0;font-size:12px;font-weight:900}.title-art{font-size:clamp(24px,3.2vw,43px);white-space:nowrap}.play-panel{background:#fffdf5;border:3px solid var(--ink);border-radius:11px;padding:12px;min-width:0}.play-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}.play-head h2{font:clamp(16px,2vw,23px)/1.2 'Archivo Black',sans-serif;margin:3px 0 0}.head-actions{display:flex;gap:7px;align-items:center}.counter{font-size:11px;font-weight:900;background:var(--mint);border:2px solid var(--ink);padding:6px 8px;white-space:nowrap}.round-btn{width:36px;height:36px;border:2px solid var(--ink);border-radius:8px;background:var(--yellow);box-shadow:2px 2px 0 var(--ink);font-size:17px}.round-btn[aria-pressed=false]{background:#e3d5f9}.categories{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 9px;scrollbar-width:thin}.category{flex:0 0 auto;min-height:34px;border:2px solid var(--ink);border-radius:7px;background:#f2ebff;padding:5px 10px;font-size:11px;font-weight:900;box-shadow:2px 2px 0 var(--ink)}.category[aria-pressed=true]{background:var(--yellow);transform:translateY(1px);box-shadow:1px 1px 0 var(--ink)}
.animal-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;height:clamp(280px,45vh,450px);overflow-y:auto;overscroll-behavior:contain;padding:3px 5px 6px 2px;align-content:start;scrollbar-color:#9e82d9 #f4ecdf;scrollbar-width:thin}.animal-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:112px;padding:7px 4px;border:2px solid var(--ink);border-radius:11px;background:var(--tile,#fff0ca);box-shadow:2px 3px 0 var(--ink);overflow:hidden;touch-action:manipulation;transition:transform .15s}.animal-card:before{content:'';position:absolute;width:75px;height:75px;background:rgba(255,255,255,.4);border-radius:50%;top:8px;left:50%;transform:translateX(-50%)}.animal-card:hover{transform:translateY(-2px)}.animal-card img{position:relative;display:block;width:min(100%,75px);height:75px;object-fit:contain;pointer-events:none}.animal-card .animal-emoji{position:relative;font-size:48px;line-height:75px}.animal-card .animal-name{position:relative;margin-top:4px;font-size:12px;font-weight:900;text-align:center;overflow-wrap:anywhere}.animal-card .sound-mark{position:absolute;top:4px;right:6px;font-size:13px}.animal-card.pop img,.animal-card.pop .animal-emoji{animation:happy .62s ease}.animal-card.pop:after{content:'✨';position:absolute;top:5px;left:7px;font-size:18px;animation:spark .7s ease both}@keyframes happy{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.18) rotate(-9deg)}55%{transform:scale(1.1) rotate(9deg)}75%{transform:scale(.95) rotate(-3deg)}}@keyframes spark{0%{opacity:0;transform:translateY(12px) scale(.5)}40%{opacity:1}100%{opacity:0;transform:translateY(-20px) scale(1.2)}}.celebration{display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap;min-height:43px;background:#e8f9ed;border:2px dashed #7ca78d;border-radius:8px;margin-top:10px;padding:5px 10px;text-align:center}.celebration #celebration-icon{font-size:22px}.celebration strong{font-size:15px}.celebration #celebration-caption{font-size:11px;font-weight:900;color:#56645b}.celebration.cheer{animation:cheer .3s ease}@keyframes cheer{50%{transform:scale(1.015)}}
.sidebar{padding-top:40px;min-width:0}.sidebar-stamp{display:inline-block;background:var(--ink);color:#fff;padding:9px 12px;font:13px 'Archivo Black',sans-serif;transform:rotate(-2deg);margin-bottom:16px}.side-card{border:3px solid var(--ink);background:#fff9e9;box-shadow:4px 5px 0 var(--ink);padding:13px}.side-title{display:flex;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:10px;font-size:11px;font-weight:900}.game-link{display:flex;gap:9px;align-items:center;padding:12px 0;border-bottom:1px solid #c9bfae}.game-link:last-child{border-bottom:0}.game-link>span:nth-child(2){flex:1;min-width:0}.game-link b{display:block;font-size:12px}.game-link small{display:block;font-size:10px;color:#696057}.thumb{display:grid;place-items:center;width:40px;height:40px;flex:none;border:2px solid var(--ink);font:15px 'Archivo Black',sans-serif;background:var(--yellow)}.iron{background:#ec6956}.snake{background:#78d69b}.drift{background:#a9d5f8}.puzzle{background:#e3c2fd;font-size:10px}.manual{margin-top:20px;border:3px solid var(--ink);background:#fffdf5;box-shadow:4px 5px 0 var(--ink);padding:20px}.manual h2{font:19px 'Archivo Black',sans-serif;margin:8px 0}.manual p{font-size:13px;line-height:1.6;margin:0}footer{max-width:1460px;margin:auto;padding:15px 24px 35px;display:flex;justify-content:space-between;gap:10px;font-size:11px;font-weight:900}
.toy:fullscreen{width:100vw;height:100dvh;border-radius:0;box-shadow:none;display:flex;flex-direction:column;overflow:hidden}.toy:fullscreen .toy-inner{flex:1;min-height:0;display:flex;flex-direction:column}.toy:fullscreen .play-panel{flex:1;min-height:0;display:flex;flex-direction:column}.toy:fullscreen .animal-grid{flex:1;height:auto;min-height:0;grid-template-columns:repeat(7,minmax(0,1fr))}.toy:fullscreen .animal-card{min-height:100px}.toy:fullscreen .toy-bottom{flex:none}
@media(max-width:1150px){.page-grid{grid-template-columns:minmax(0,1fr) 210px}.animal-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(max-width:850px){.page-grid{grid-template-columns:minmax(0,1fr)}.sidebar{padding-top:0}.side-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.side-title{grid-column:1/-1}.animal-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(max-width:600px){.header-inner{padding:10px}.header-tag{display:none}.brand{font-size:16px}.brand span,.brand b{padding:8px}.page-grid{padding:13px 10px 30px}.toolbar{font-size:9px}.toy{padding:6px;border-width:3px}.toy-inner{padding:7px}.toy-top,.toy-bottom{font-size:8px}.title-row h1{font-size:clamp(21px,6vw,30px)}.title-row p{font-size:10px}.title-art{font-size:25px}.play-panel{padding:8px}.animal-grid{grid-template-columns:repeat(3,minmax(0,1fr));height:clamp(280px,49vh,470px);gap:7px}.animal-card{min-height:110px}.counter{display:none}.toy:fullscreen .animal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.side-card{grid-template-columns:1fr}.title-row{gap:5px}.eyebrow{font-size:8px}}@media(max-width:360px){.title-art{display:none}.animal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.toy:fullscreen .animal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}