/* CAT.CSS: styles for the snoring-cat window + reward windows on about.html. Loads after about.css. */

.cat-stage{position:relative;touch-action:none;user-select:none;-webkit-user-select:none}

/* .cat-wrap holds the picture and the invisible rub zone. It trembles while purring. */
.cat-wrap{position:relative}
.cat-img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.cat-wrap.purr{animation:purr .1s linear infinite alternate}
@keyframes purr{from{transform:translate(0,-1px)}to{transform:translate(0,1px)}}

/* THE RUB ZONE. An invisible oval sitting on the belly.
   Percentages are of the picture: left, top, width, height.
   Move/resize these until the dashed outline (DEBUG = true in cat.js) covers the belly.
   rotate() tilts the oval to match the cat's belly; try -10deg to 15deg. */
.cat-belly{position:absolute;left:14%;top:38%;width:56%;height:46%;border-radius:50%;transform:rotate(0deg);cursor:grab}
.cat-belly:active{cursor:grabbing}
.cat-stage.debug .cat-belly{outline:2px dashed var(--coral);background:rgba(188,60,74,.12)}

/* THE ORDERS: bossy all-caps. Bigger and shakier while you're petting. */
.cat-status{min-height:1.5em;margin-top:.7rem;text-align:center;font:700 1.25rem/1.2 var(--sans);letter-spacing:.06em;color:var(--coral-d)}
.cat-stage.loud .cat-status{animation:stomp .35s ease-in-out infinite alternate}
@keyframes stomp{from{transform:scale(1)}to{transform:scale(1.08)}}
.cat-stage.furious .cat-status{color:var(--ink);animation:rage .1s steps(2) infinite}
@keyframes rage{0%{transform:translateX(-2px)}100%{transform:translateX(2px)}}

.cat-count{margin-top:.3rem;text-align:center;font:500 .85rem/1.4 var(--sans);letter-spacing:.08em;color:var(--grey)}

/* hearts that float up while you rub */
.cat-heart{position:absolute;color:var(--coral);font-size:1.2rem;line-height:1;pointer-events:none;animation:catheart 1.2s ease-out forwards}
@keyframes catheart{to{transform:translateY(-3rem) scale(1.3);opacity:0}}

/* REWARD WINDOWS. They use the normal .win look from about.css; this adds the text styling.
   The fall is done in cat.js, so no pop-in delay here. */
.toast{animation-delay:0s}
.toast-body{display:grid;gap:.45rem;text-align:center}
.toast .toast-body p+p,.cat-pop p+p{margin-top:0}
.toast-kicker{font:600 .68rem/1.2 var(--sans);letter-spacing:.14em;color:var(--coral-d)}
.toast-big{font:700 1.35rem/1.15 var(--sans);letter-spacing:.04em}
.toast-sub{font:italic 400 1rem/1.3 var(--serif);color:var(--grey)}

/* Phones: no desktop, so rewards are a small pop-up in the top right that fades itself */
.cat-pop{position:fixed;top:6rem;right:1rem;z-index:300;display:grid;gap:.4rem;max-width:min(16rem,calc(100% - 2rem));padding:.9rem 1.1rem;text-align:center;background:var(--paper);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);animation:pop .5s cubic-bezier(.3,1.5,.5,1) backwards,catpopfade .5s 4s forwards;pointer-events:none}
@keyframes catpopfade{to{opacity:0}}

/* PONG */
.pong-stage{touch-action:none;user-select:none;-webkit-user-select:none}
.pong-cv{display:block;width:100%;height:auto;border:2px solid var(--ink);background:var(--paper);cursor:ns-resize;touch-action:none}
.pong-status{min-height:1.5em;margin-top:.7rem;text-align:center;font:700 1.25rem/1.2 var(--sans);letter-spacing:.06em;color:var(--coral-d)}
.pong-score{margin-top:.3rem;text-align:center;font:500 .85rem/1.4 var(--sans);letter-spacing:.08em;color:var(--ink)}
.pong-count{margin-top:.1rem;text-align:center;font:500 .85rem/1.4 var(--sans);letter-spacing:.08em;color:var(--grey)}

/* windows glide aside when a reward drops (cat.js adds .shove for a moment) */
.win.shove{transition:left .6s cubic-bezier(.3,1.3,.5,1)}