/* A small, natural-proportioned ginger cat sits in the document, never chases the viewport. */
.hyd-cat-slot{display:block;position:relative;flex:none;width:116px;height:108px;isolation:isolate}
.hyd-cat-slot-home{width:122px;height:112px}
#web-desktop>.hyd-cat-slot-home{position:absolute;right:28%;bottom:100px;margin:0;z-index:3}
#web-desktop>.hyd-cat-slot-home:after{content:'';position:absolute;left:35%;right:19%;bottom:10%;height:4px;border-radius:50%;background:#130d1d38;filter:blur(2px);pointer-events:none;z-index:-1}
.hyd-cat-slot-cinema{width:55px;height:43px;margin-left:auto}
.area-directory-head.has-cat-perch,.area-finder.has-cat-perch{gap:12px}.roll-caption.has-cat-perch{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.roll-caption.has-cat-perch>.hyd-cat-slot{margin-left:auto}
.hyd-cat-slot-places,.hyd-cat-slot-roll{width:88px;height:80px}
.hyd-cat{position:relative;width:100%;height:100%;isolation:isolate;z-index:25;pointer-events:none}
.hyd-cat[hidden],.hyd-cat-panel[hidden],.hyd-cat-bubble[hidden]{display:none!important}
.hyd-cat-pet{position:relative;display:block;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:10px;background:transparent;box-shadow:none;pointer-events:auto;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.hyd-cat-name{display:none}
#roll .hyd-cat-pet,#roll .hyd-cat-pet:is(:hover,:focus-visible){padding:0;border:0;background:transparent;box-shadow:none;rotate:none;transform:none}
.hyd-cat-pet:focus-visible{outline:2px dashed #d9b4e9;outline-offset:2px}
.hyd-cat[data-page=home] .hyd-cat-pet{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.hyd-cat[data-page=home].is-dragging .hyd-cat-pet{cursor:grabbing}
.hyd-cat.is-moving .hyd-cat-pet{outline:2px dashed var(--paper-text,#e8caef);outline-offset:3px}
#web-desktop>.hyd-cat-slot-home.is-cat-positioned{position:absolute;margin:0;z-index:90}
#web-desktop>.hyd-cat-slot-home:has(.is-dragging){z-index:95}
/* The desktop companion stays reachable when a window is brought forward. */
#world #web-desktop>.hyd-cat-slot-home{z-index:90}
@media(min-width:1400px){
 #world #web-desktop>.hyd-cat-slot-home:not(.is-cat-positioned){left:auto;right:28%;bottom:100px}
}
.hyd-cat-move-help{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.hyd-cat-panel [data-cat-move][hidden]{display:none}
.hyd-cat-sprite{display:block;position:absolute;inset:auto;left:var(--pose-left,0%);top:var(--pose-top,0%);width:var(--pose-size,100%);height:var(--pose-size,100%);background-image:url('assets/cat/riyal-atlas-v3.webp');background-size:300% 200%;background-repeat:no-repeat;opacity:0;transition:opacity 210ms ease;transform-origin:50% 88%;pointer-events:none;filter:drop-shadow(0 2px 2px #10081936)}
.hyd-cat-sprite.is-current{opacity:1}
.hyd-cat-sprite[data-pose=sit]{background-position:0 0}.hyd-cat-sprite[data-pose=blink]{background-position:50% 0}.hyd-cat-sprite[data-pose=wash]{background-position:100% 0}.hyd-cat-sprite[data-pose=stretch]{background-position:0 100%}.hyd-cat-sprite[data-pose=sleep]{background-position:50% 100%}.hyd-cat-sprite[data-pose=yarn]{background-position:100% 100%}
.hyd-cat-sprite[data-atlas=play]{background-image:url('assets/cat/riyal-play-v1.webp');background-size:200% 200%}
.hyd-cat-sprite[data-pose=treat]{background-position:0 0}.hyd-cat-sprite[data-pose=roll]{background-position:100% 0}.hyd-cat-sprite[data-pose=box]{background-position:0 100%}.hyd-cat-sprite[data-pose=tilt]{background-position:100% 100%}
.hyd-cat-sprite[data-atlas=moments]{background-image:url('assets/cat/riyal-yawn-v2.webp');background-size:300% 200%}
/* Register the larger yawn drawings to the sitting cat's scale and paw line.
   Geometry remains registered when reduced-motion disables transforms. */
.hyd-cat-sprite[data-pose^=yawn]{--pose-size:77.4%;--pose-left:14%;--pose-top:12.85%}
.hyd-cat-sprite[data-pose=yawnMedium]{--pose-top:14.65%}
.hyd-cat-sprite[data-pose=yawnWide],.hyd-cat-sprite[data-pose=yawnFull]{--pose-top:14.8%}
/* Short dissolves soften mouth changes without a long double-face ghost. */
.hyd-cat.is-yawn-transition .hyd-cat-sprite{transition:opacity 90ms linear}
.hyd-cat-sprite[data-pose=yawnReady]{background-position:0 0}.hyd-cat-sprite[data-pose=yawnTiny]{background-position:50% 0}.hyd-cat-sprite[data-pose=yawnSmall]{background-position:100% 0}.hyd-cat-sprite[data-pose=yawnMedium]{background-position:0 100%}.hyd-cat-sprite[data-pose=yawnWide]{background-position:50% 100%}.hyd-cat-sprite[data-pose=yawnFull]{background-position:100% 100%}
/* Head and headphones are one layer, pivoted at the neck over a fixed body. */
.hyd-cat-sprite[data-pose=headphonesCenter]{background-image:none}
.hyd-cat-sprite[data-pose=headphonesCenter]:before,.hyd-cat-sprite[data-pose=headphonesCenter]:after{content:'';position:absolute;inset:0;background-image:url('assets/cat/riyal-headphone-rig.webp');background-size:200% 100%;background-repeat:no-repeat}
.hyd-cat-sprite[data-pose=headphonesCenter]:before{background-position:0 0}
.hyd-cat-sprite[data-pose=headphonesCenter]:after{background-position:100% 0;translate:9.4% 0;transform-origin:48% 61%}
.hyd-cat-sprite[data-pose=headphonesCenter].is-current:after{animation:riyal-listening 4.4s ease-in-out both}
@keyframes riyal-listening{0%,100%{rotate:0deg}24%{rotate:-3deg}52%{rotate:3deg}76%{rotate:-1.5deg}}
.hyd-cat.cat-still .hyd-cat-sprite:after,.motion-off .hyd-cat .hyd-cat-sprite:after{animation:none!important;rotate:0deg!important}
@media(prefers-reduced-motion:reduce){.hyd-cat .hyd-cat-sprite:after{animation:none!important;rotate:0deg!important}}
.hyd-cat.is-purring .hyd-cat-sprite.is-current{animation:cat-natural-purr 620ms ease-in-out 4}
.hyd-cat.is-attentive .hyd-cat-sprite.is-current{animation-iteration-count:1}
.hyd-cat.is-washing .hyd-cat-sprite.is-current{animation:cat-natural-wash 850ms ease-in-out 3}
.hyd-cat.is-stretching .hyd-cat-sprite.is-current{animation:cat-natural-stretch 2.5s ease-in-out both}
.hyd-cat.is-yarning .hyd-cat-sprite.is-current{animation:cat-natural-yarn 760ms ease-in-out 3}
.hyd-cat.is-sleeping .hyd-cat-sprite.is-current{animation:cat-natural-breath 3.7s ease-in-out infinite}
.hyd-cat.is-treating .hyd-cat-sprite.is-current{animation:cat-offer-treat 3.1s ease-in-out both;transform-origin:42% 75%}
.hyd-cat.is-rolling .hyd-cat-sprite.is-current{animation:cat-belly-roll 3.5s ease-in-out both;transform-origin:50% 57%}
.hyd-cat.is-peeking .hyd-cat-sprite.is-current{animation:cat-box-peek 4.4s ease-in-out both;transform-origin:50% 80%}
.hyd-cat.is-listening .hyd-cat-sprite.is-current{animation:cat-curious-tilt 2.8s ease-in-out both;transform-origin:50% 85%}
.hyd-cat-hearts{position:absolute;left:15%;top:8%;color:#e9b6ca;font:23px/1 Georgia,serif;opacity:0;text-shadow:0 1px #fff8;pointer-events:none}.hyd-cat-hearts i{display:inline-block;font-style:normal;font-size:15px;vertical-align:top;margin-left:7px}
.hyd-cat.is-purring.has-message .hyd-cat-hearts{animation:cat-natural-hearts 2.5s ease-out both}
/* Portalled beside the menu so map/window stacking contexts cannot cover speech. */
.hyd-cat-bubble{position:fixed;inset:auto;translate:none;width:max-content;max-width:min(220px,calc(100vw - 16px));box-sizing:border-box;padding:7px 10px;border:1px solid #9d8baf;border-radius:9px 9px 9px 2px;background:#ece3f3;color:#392c45;box-shadow:inset 0 1px #fff8,0 2px 7px #12081d33;font:12px/1.45 Tahoma,Arial,sans-serif;text-align:center;overflow-wrap:anywhere;overflow:auto;pointer-events:none;z-index:1751}
.hyd-cat-panel{position:fixed;z-index:1750;width:250px;max-width:calc(100vw - 16px);overflow:auto;padding:3px;border:1px solid;border-color:#f4edf9 #6c6078 #665774 #e4d6ec;border-radius:7px 7px 5px 5px;background:linear-gradient(145deg,#dedce4,#aaa6b7);box-shadow:0 9px 28px #06030f70,0 1px #fff8 inset;color:#f3e9fa;font:12px/1.3 'Lucida Grande',Tahoma,Arial,sans-serif;text-align:left}
.hyd-cat-titlebar{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:3px 4px 6px 7px;color:#32273c;text-shadow:0 1px #fff9;font:11px/1.3 'Lucida Grande',Tahoma,Arial,sans-serif}
.hyd-cat-titlebar{position:sticky;top:0;z-index:2;background:linear-gradient(var(--metal-top,#dedce4),var(--metal-mid,#aaa6b7))}
.hyd-cat-titlebar>button{display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid #95879e;border-radius:4px;background:linear-gradient(#f6f3fb,#b8adc7);box-shadow:inset 0 1px #fff;color:#35273e;font:17px/1 Tahoma,Arial,sans-serif}
.hyd-cat-actions{display:grid;gap:3px;padding:7px;background:#21172d;border:1px inset #d4c7df;border-radius:3px 3px 0 0}
.hyd-cat-actions button{display:flex;align-items:center;gap:10px;min-height:36px;padding:8px;border:1px solid transparent;border-radius:4px;background:transparent;box-shadow:none;color:#f7edfc;text-shadow:none;font:12px/1.3 'Lucida Grande',Tahoma,Arial,sans-serif;text-align:left;cursor:pointer}
.hyd-cat-actions button>span{flex:0 0 21px;text-align:center;color:#debee9;font:20px/1 Tahoma,sans-serif}
.hyd-cat-actions button:hover,.hyd-cat-actions button:focus-visible{border-color:#a58db7;background:linear-gradient(#574168,#382346)}
.hyd-cat-play-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding-bottom:7px;margin-bottom:2px;border-bottom:1px solid #73617f66}.hyd-cat-play-actions button{font-size:11px;gap:6px;background:#3e2b4d55;border-color:#7e65874d}
.hyd-cat-group-title{margin:1px 4px 5px;color:#d7c6e2;font:10px/1.4 'Lucida Grande',Tahoma,Arial,sans-serif}
.hyd-cat-panel button:focus-visible{outline:2px solid #e8caef;outline-offset:1px}
.hyd-cat-nap{display:block;width:100%;min-height:36px;margin:0;padding:8px 12px;border:0;border-top:1px solid #74627f;border-radius:0 0 3px 3px;background:#30243d;color:#d6c9df;box-shadow:none;font:11px/1.3 'Lucida Grande',Tahoma,Arial,sans-serif;text-align:left}.hyd-cat-nap:hover{background:#483450;color:#fff0ff}.hyd-cat-nap>span{margin-right:8px}
@keyframes cat-natural-breath{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}
@keyframes cat-natural-purr{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-.4px) scale(1.008)}}
@keyframes cat-natural-wash{0%,100%{transform:rotate(0)}50%{transform:rotate(-1deg) translateY(.5px)}}
@keyframes cat-natural-stretch{0%,100%{transform:scale(1)}45%,65%{transform:scale(1.018,.983)}}
@keyframes cat-natural-yarn{0%,100%{transform:translateX(0) rotate(0)}40%{transform:translateX(-1px) rotate(-.7deg)}65%{transform:translateX(.5px)}}
@keyframes cat-natural-hearts{0%{opacity:0;transform:translateY(3px)}20%,68%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
@keyframes cat-offer-treat{0%,100%{transform:translateY(0) rotate(0)}18%{transform:translateY(1px) rotate(-1deg)}30%,50%,70%{transform:translateY(.5px) rotate(.6deg)}40%,60%{transform:translateY(1.2px) rotate(-.6deg)}82%{transform:translateY(-.4px)}}
@keyframes cat-belly-roll{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg) translateX(-1px)}45%{transform:rotate(7deg) translateX(1px)}68%{transform:rotate(-4deg)}86%{transform:rotate(2deg)}}
@keyframes cat-box-peek{0%,100%{transform:translateY(0)}28%,66%{transform:translateY(-1px)}48%{transform:translateY(0)}}
@keyframes cat-curious-tilt{0%,100%{transform:rotate(0)}25%,42%{transform:rotate(-3deg)}60%,78%{transform:rotate(2deg)}}
@media(max-width:620px){.hyd-cat-slot{width:88px;height:84px}#web-desktop>.hyd-cat-slot-home{position:absolute;left:auto;top:auto;right:14px;bottom:96px;width:108px;height:100px;margin:0}.hyd-cat-slot-cinema{width:48px;height:39px}.places-heading.has-cat-perch{flex-wrap:wrap}.places-heading.has-cat-perch .map-invitation{flex:1;min-width:100px}.hyd-cat-actions button{min-height:42px}}
.hyd-cat.cat-still *,.motion-off .hyd-cat *{animation:none!important;transition:none!important;transform:none!important}
.hyd-cat.cat-still.is-purring .hyd-cat-hearts,.motion-off .hyd-cat.is-purring .hyd-cat-hearts{opacity:1}
@media(prefers-reduced-motion:reduce){.hyd-cat *{animation:none!important;transition:none!important;transform:none!important}.hyd-cat.is-purring .hyd-cat-hearts{opacity:1}}

/* Riyal has his own space beneath the map, away from the playback controls. */
#world #cinema .hyd-cat-slot[data-cat-perch=cinema]{display:block;flex:none;order:10;width:110px;height:120px;min-width:110px;margin:12px auto 0;align-self:center;justify-self:center}
#world #cinema #hyd-cat{width:100%;height:100%}
#world #cinema #hyd-cat .hyd-cat-pet,
#world #cinema #hyd-cat .hyd-cat-pet:is(:hover,:focus-visible,:active){display:block;width:100%;height:100%;min-height:0;padding:0;margin:0;border:0;border-radius:8px;background:none;box-shadow:none;transform:none;translate:none;filter:none}
#world #cinema #hyd-cat .hyd-cat-pet:focus-visible{outline:2px dashed #c2d7e8;outline-offset:2px}
#world #cinema #hyd-cat .hyd-cat-name{display:none}
#world #cinema #hyd-cat .hyd-cat-sprite{inset:auto;left:var(--pose-left,0%);top:var(--pose-top,0%);width:var(--pose-size,100%);height:var(--pose-size,100%);filter:drop-shadow(0 2px 2px #0005)}
@media(max-width:820px){
 #world #cinema .hyd-cat-slot[data-cat-perch=cinema]{width:84px;height:90px;min-width:84px}
}

/* A swipe over the companion scrolls; choosing Move arms a touch drag. */
@media(pointer:coarse){
 .hyd-cat[data-page=home] .hyd-cat-pet{touch-action:pan-y}
 .hyd-cat[data-page=home].is-moving .hyd-cat-pet,.hyd-cat[data-page=home].is-dragging .hyd-cat-pet{touch-action:none}
}