:root{--bg:#fff;--ink:#000;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#000;--ink:#fff;}}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Pixelify Sans","Courier New",monospace;
overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
canvas{image-rendering:pixelated}
#room{position:fixed;left:50%;top:50%;width:min(92vw,640px);height:min(58vh,420px);height:min(58dvh,420px);transform:translate(-50%,-50%);
border:2px solid var(--ink);box-sizing:border-box}
p{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 3vh);margin:0;text-align:center;
font-size:14px;opacity:.6;pointer-events:none;padding:0 16px}
#cat{position:fixed;left:0;top:0;width:84px;height:66px;pointer-events:none;will-change:transform}
#cv{width:84px;height:66px;display:block}
#say{position:absolute;top:-16px;font-size:16px;opacity:0;transform:translateX(-50%);transition:opacity .2s,top .8s;white-space:nowrap}
#say.on{opacity:1;top:-28px}
#zzz{position:absolute;top:8px;font-size:16px;white-space:nowrap;opacity:0;transition:opacity .4s}
#zzz.on{opacity:1;animation:float 2.4s steps(4) infinite}
@keyframes float{0%,100%{transform:translate(0,4px)}50%{transform:translate(4px,-8px)}}
#ball{position:fixed;left:0;top:0;width:36px;height:33px;cursor:grab;will-change:transform;touch-action:none;z-index:2}
#ball.drag{cursor:grabbing}
#cat:focus-visible,#ball:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}
#site{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 14px);margin:0;font-weight:400;
text-align:center;font-size:22.2px;line-height:1;pointer-events:none} /* 22.2px = ровно 2px на «пиксель» шрифта; кратно 11.1px: 33.3px = ×3 как у кота */
#cord{position:fixed;top:0;width:2px;background:var(--ink);pointer-events:none}
#bulb{position:fixed;width:27px;height:27px;pointer-events:none}
.heart{position:fixed;width:21px;height:18px;pointer-events:none;z-index:6;animation:rise .9s steps(6) forwards}
@keyframes rise{from{transform:translateY(0);opacity:1}to{transform:translateY(-34px);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .heart{animation:none}
  #zzz.on{animation:none}
  #say{transition:none}
}