.sound-toggle{font:inherit;font-size:12px;font-weight:700;white-space:nowrap;border:1px solid #d8e7d2;border-radius:24px;background:#edf6e7;color:#267146;min-height:40px;padding:8px 13px;cursor:pointer;transition:background .2s,transform .2s}
.sound-toggle[aria-pressed=false]{background:#fffdf6;color:#707970;border-color:#e2e5da}.sound-toggle:active{transform:scale(.96)}
.cat-hero{perspective:900px}.cat-tilt{display:block;width:100%;max-width:525px;margin-inline:auto;border:0;padding:0;background:transparent;border-radius:23px;position:relative;cursor:pointer;line-height:0;transform-origin:50% 65%;transition:transform .4s cubic-bezier(.2,.7,.25,1),box-shadow .4s;box-shadow:0 8px 17px #436b2810;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cat-tilt img{width:100%;height:auto;max-height:none;mix-blend-mode:normal}.cat-hero figcaption{pointer-events:none}
/* The glow shares the image's exact aspect ratio, so it stays on the circled ear. */
.cat-tilt:after{content:'';position:absolute;left:79.4%;top:16%;width:13.5%;height:19%;border-radius:50%;opacity:0;box-shadow:0 0 0 3px #ffb2924d,0 0 23px 8px #ffd98066;transition:opacity .35s;pointer-events:none}
@media(hover:hover) and (pointer:fine){.cat-tilt:hover{transform:translateY(-6px) rotateZ(-.8deg) rotateY(-2deg);box-shadow:0 21px 33px #355a382b}.cat-tilt:hover:after{opacity:1;animation:ear-glow 2.4s ease-in-out infinite}}
.cat-tilt:focus-visible{outline:3px solid #438d58;outline-offset:6px}.cat-tilt:focus-visible:after{opacity:.8}.cat-tilt:active{transform:translateY(1px) scale(.986);box-shadow:0 5px 11px #355a381c}.cat-tilt.is-tapped{animation:cat-tap .52s ease-out}.cat-tilt.is-tapped:after{opacity:1}
@keyframes cat-tap{0%{transform:scale(.986)}50%{transform:translateY(-4px) rotateZ(-.5deg)}100%{transform:none}}
@keyframes ear-glow{0%,100%{opacity:.45}50%{opacity:.9}}
/* Sound remains reachable while the reaction game covers the page. */
body[data-game=reaction]:has(.reaction-screen) header .sound-toggle{position:fixed;left:16px;top:max(16px,env(safe-area-inset-top));z-index:11;background:#fffdf3;color:#356245;box-shadow:0 3px 10px #293c2414}
@media(min-width:701px){header .edition{display:none}}
@media(max-width:700px){header{gap:5px;flex-wrap:wrap}header nav{gap:0}header nav a,.nav-menu{padding-inline:8px}.sound-toggle{font-size:16px;padding:6px;min-height:36px;min-width:36px}.sound-label{display:none}.cat-tilt,.cat-tilt img{border-radius:18px}}
@media(prefers-reduced-motion:reduce){.cat-tilt,.cat-tilt:after,.sound-toggle{transition:none!important;animation:none!important}.cat-tilt:hover,.cat-tilt:active,.cat-tilt.is-tapped{transform:none!important}}

/* Keep compact controls readable and usable on narrow screens. */
header>a,header nav a,.nav-menu,.sound-toggle{min-height:44px;min-width:44px}
header>a{display:inline-flex;align-items:center}
@media(max-width:700px){header{gap:4px;padding-inline:12px}header nav a,.nav-menu{padding-inline:7px}.sound-toggle{min-width:44px;min-height:44px}.service-card p{font-size:13px}.game-badges span{font-size:11px}.recommend-description,.random-start{font-size:13px}.hero-meta,.games-heading>span{font-size:12px}.service-card .card-play{min-height:44px}.text-btn{min-height:44px}.sub{font-size:14px}}
@media(max-width:359px){header>a{font-size:16px}.brand-icon{width:25px;margin-right:2px}header nav a,.nav-menu{min-width:44px;padding-inline:5px}.service-card{grid-template-columns:37% minmax(0,1fr)}.service-card h3{font-size:16px}}
@media(hover:none){.service-card:hover{transform:none;box-shadow:0 5px 12px #a1516410}.service-card:active{transform:scale(.985)}.primary:hover{filter:none}}
.service-card p,.recommend-description{word-break:keep-all;overflow-wrap:break-word}