/* ---------- SuperKitties Rescue ---------- */
/* Kittydale at golden hour: a warm sky, a glowing sun, skyline silhouettes
   and a candy-coloured apartment tower full of kittens waving for help. */
.sk-area { display: flex; flex-direction: column; background: linear-gradient(180deg, #6f5bd6 0%, #c868c8 26%, #ff8fa6 50%, #ffc07a 74%, #ffe0a0 100%); box-shadow: inset 0 0 0 4px #ffffff33; }
.sk-sun { position: absolute; left: 50%; top: 52%; width: clamp(160px, 30vw, 300px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff6c8 0 30%, #ffd86a 55%, #ffb34a 75%, transparent 76%); box-shadow: 0 0 120px 40px #ffd86a88; animation: sk-sun 5s ease-in-out infinite; }
.sk-glow { position: absolute; inset: 0; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 52%, #fff2 0 6deg, transparent 6deg 18deg); animation: lazyspin 60s linear infinite; mix-blend-mode: soft-light; }
.sk-city { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none; background: #7a3f8a;
  clip-path: polygon(0 100%, 0 40%, 7% 40%, 7% 22%, 14% 22%, 14% 50%, 20% 50%, 20% 30%, 23% 18%, 26% 30%, 26% 46%, 33% 46%, 33% 28%, 41% 28%, 41% 56%, 59% 56%, 59% 26%, 66% 26%, 66% 44%, 73% 44%, 73% 16%, 76% 8%, 79% 16%, 79% 40%, 86% 40%, 86% 24%, 93% 24%, 93% 46%, 100% 46%, 100% 100%); }
.sk-city.back { height: 46%; background: #b2569c; opacity: .55;
  clip-path: polygon(0 100%, 0 30%, 5% 30%, 5% 12%, 11% 12%, 11% 36%, 18% 36%, 18% 20%, 27% 20%, 27% 40%, 37% 40%, 37% 10%, 44% 10%, 44% 44%, 56% 44%, 56% 18%, 63% 18%, 63% 34%, 70% 34%, 70% 6%, 77% 6%, 77% 30%, 84% 30%, 84% 14%, 91% 14%, 91% 38%, 100% 38%, 100% 100%); }
.sk-cloud { position: absolute; top: 8%; left: 0; width: 110px; height: 30px; border-radius: 30px; background: #ffe6f0; opacity: .85; pointer-events: none; animation: pz-cloud 44s linear infinite; }
.sk-cloud::before { content: ''; position: absolute; width: 46px; height: 46px; left: 20px; top: -22px; border-radius: 50%; background: inherit; }
.sk-cloud.two { top: 22%; scale: .7; animation-duration: 60s; animation-delay: -30s; }
.sk-bird { position: absolute; top: 16%; left: 0; width: 26px; height: 10px; pointer-events: none; border: 3px solid #5a2a6a; border-color: #5a2a6a transparent transparent; border-radius: 50% 50% 0 0; animation: sk-bird 18s linear infinite, sk-flap .3s ease-in-out infinite alternate; }

.sk-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 12px 0; }
.sk-ear { width: clamp(64px, 10vw, 88px); height: clamp(64px, 10vw, 88px); }
.sk-call { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 18px 6px 10px; border-radius: 999px; background: #fff; box-shadow: 0 6px 0 #d64f8a, 0 10px 18px #0003; min-height: clamp(64px, 10vw, 88px); }
.sk-call:active { translate: 0 4px; box-shadow: 0 2px 0 #d64f8a; }
.sk-bell { font-size: clamp(26px, 4vw, 36px); animation: sk-bell 1.2s ease-in-out infinite; }
.sk-pic, .sk-bell { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; line-height: 1; }
.sk-pic { font-size: clamp(44px, 7vw, 66px); }
.sk-call.sk-ring { animation: sk-ring .6s; }

.sk-tower-wrap { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; justify-content: center; padding: 8px 12px 0; }
.sk-tower { position: relative; display: flex; flex-direction: column; width: min(100%, 620px, 92vh); height: 100%; padding: 0 clamp(10px, 2.4vw, 22px);
  background: linear-gradient(90deg, #ff7eb6, #ff9fc8 40%, #ff7eb6 60%, #e85a9c); border-radius: 18px 18px 0 0;
  box-shadow: inset 0 -10px 0 #d24a8a, inset 10px 0 0 #ffffff22, 0 0 0 4px #b8367a; }
.sk-tower::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(#ffffff18 2px, transparent 2px); background-size: 100% 26px; }
.sk-roof { position: relative; height: clamp(26px, 5vh, 46px); margin: 0 calc(clamp(10px, 2.4vw, 22px) * -1 - 10px); flex: none;
  background: linear-gradient(180deg, #8a4dff, #6a32d6); border-radius: 14px 14px 6px 6px; box-shadow: 0 6px 0 #4a1fa0;
  translate: 0 calc(-100% + 10px); }
.sk-roof::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, #ffffff22 0 18px, transparent 18px 36px); }
.sk-flag { position: absolute; left: 50%; bottom: 100%; width: 4px; height: clamp(26px, 5vh, 40px); background: #5a2a6a; }
.sk-flag::after { content: ''; position: absolute; left: 4px; top: 0; width: 34px; height: 22px; background: linear-gradient(90deg, #ffe03a, #ff9f1c); clip-path: polygon(0 0, 100% 50%, 0 100%); animation: sk-wave 1s ease-in-out infinite alternate; transform-origin: 0 50%; }
.sk-windows { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 300px)); align-content: space-evenly; gap: clamp(10px, 2vh, 22px) clamp(12px, 3vw, 30px); padding: 0 0 clamp(8px, 1.6vh, 16px); margin-top: calc(clamp(26px, 5vh, 46px) * -1 + 16px); }
.sk-door { flex: none; align-self: center; width: clamp(54px, 10vw, 90px); height: clamp(30px, 6vh, 56px); border-radius: 40px 40px 0 0; background: linear-gradient(180deg, #8a4dff, #5a28c0); box-shadow: inset 0 0 0 5px #ffd23a; }

.sk-win { position: relative; display: flex; flex-direction: column; align-items: stretch; min-height: 0; min-width: 0; border-radius: 20px; padding: 6px; gap: 6px;
  background: #fff3d6; box-shadow: 0 6px 0 #c9827a, 0 10px 16px #0003; animation: pop-in .45s cubic-bezier(.2, 1.5, .4, 1) calc(var(--i) * .08s) backwards; transition: filter .3s, opacity .3s; }
.sk-win:active { translate: 0 4px; box-shadow: 0 2px 0 #c9827a; }
.sk-pane { position: relative; flex: 1; min-height: 40px; overflow: hidden; border-radius: 14px; background: linear-gradient(180deg, #ffe8a8, #ffc46a); box-shadow: inset 0 0 0 4px #7a3f8a; }
.sk-pane::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; translate: -50% 0; background: #7a3f8a; opacity: .5; }
.sk-curtain { position: absolute; top: 0; bottom: 30%; width: 26%; background: linear-gradient(90deg, #ff4fa3, #ff8ac4); border-radius: 0 0 60% 0; z-index: 1; }
.sk-curtain.l { left: 0; } .sk-curtain.r { right: 0; scale: -1 1; }
.sk-kit { position: absolute; left: 50%; bottom: -6%; width: min(66%, 180px); max-height: 84%; aspect-ratio: 10 / 9; translate: -50% 0; z-index: 2; animation: sk-peek 2.4s ease-in-out calc(var(--i) * -.6s) infinite; }
.sk-kit svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sk-kit .sk-paw { transform-box: fill-box; transform-origin: 30% 100%; animation: sk-wave-paw .5s ease-in-out infinite alternate; }
.sk-help { position: absolute; right: 6%; top: 6%; z-index: 3; padding: 0 8px; border-radius: 10px; background: #fff; color: #d6336c; font: 400 clamp(13px, 1.8vw, 18px) 'Lilita One', sans-serif; box-shadow: 0 2px 0 #0002; animation: sk-help 1.6s ease-in-out calc(var(--i) * -.4s) infinite; }
.sk-sign { flex: none; display: grid; place-items: center; padding: 0 8px; border-radius: 12px; background: #fff; color: #3a1a4a; font-weight: 700; line-height: 1.15;
  font-size: clamp(30px, min(6vw, 5.6vh), 58px); box-shadow: inset 0 0 0 3px #ffd23a; }
.sk-win.hint { animation: pulse 1s ease-in-out infinite; box-shadow: 0 0 0 7px var(--gold), 0 6px 0 #c9827a !important; }
.sk-win.sk-nope { filter: grayscale(.7) brightness(.9); opacity: .65; }
.sk-win.sk-nope .sk-pane { animation: sk-flicker .5s steps(2) 2; }
.sk-win.sk-yes { box-shadow: 0 0 0 7px #2fcf7a, 0 6px 0 #c9827a; }
.sk-win.sk-empty .sk-help { display: none; }

.sk-ground { position: relative; z-index: 3; flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 8px clamp(8px, 2vw, 20px) 10px;
  background: linear-gradient(180deg, #7fd36a, #4aa84a); box-shadow: inset 0 6px 0 #a8ec8a; }
.sk-team { display: flex; align-items: flex-end; gap: clamp(2px, 1vw, 10px); }
.sk-hero { position: relative; width: clamp(56px, 10vw, 104px); aspect-ratio: 1; transition: scale .3s cubic-bezier(.2, 1.6, .4, 1), filter .3s; transform-origin: 50% 100%; filter: saturate(.75) brightness(.95); }
.sk-hero.on { scale: 1.3; filter: drop-shadow(0 0 10px var(--hc)) drop-shadow(0 0 4px #fff); z-index: 1; animation: sk-ready 1s ease-in-out infinite; }
.sk-hero.away { visibility: hidden; }
.sk-hero-art, .sk-hero-art svg { width: 100%; height: 100%; display: block; }
.sk-cape { position: absolute; left: 14%; right: 14%; bottom: 0; height: 30%; z-index: -1; background: var(--hc); border-radius: 0 0 40% 40%; opacity: .8; }
.sk-hero.sk-oops { animation: sk-oops .6s; }
.sk-hero.sk-land { animation: sk-land .5s cubic-bezier(.2, 1.6, .4, 1); }
.sk-saved { display: flex; align-items: flex-end; gap: 2px; padding: 4px 10px; border-radius: 22px; background: linear-gradient(180deg, #ff9fc8, #ff6fa8); box-shadow: 0 5px 0 #c8467e, inset 0 3px 0 #ffffff55; }
.sk-seat { width: clamp(30px, 6vw, 58px); aspect-ratio: 10 / 9; border-radius: 50%; border: 3px dashed #ffffff88; }
.sk-seat.got { border: 0; animation: pop-in .5s cubic-bezier(.2, 1.6, .4, 1); }
.sk-seat svg { width: 100%; height: 100%; display: block; }
.sk-seat.got svg { animation: sk-bounce 1.4s ease-in-out infinite; }

.sk-flyer { position: absolute; z-index: 6; pointer-events: none; filter: drop-shadow(0 0 12px var(--hc)) drop-shadow(0 6px 6px #0004); }
.sk-flyer.flying::after { content: ''; position: absolute; left: 10%; right: 10%; top: 60%; height: 50%; z-index: -1; background: var(--hc); border-radius: 0 0 50% 50%; clip-path: polygon(0 0, 100% 0, 85% 100%, 50% 80%, 15% 100%); animation: sk-cape .2s ease-in-out infinite alternate; transform-origin: 50% 0; }
.sk-flyer.sk-roll.flying .sk-hero-art { border-radius: 50%; background: radial-gradient(circle, #fffaf2 40%, #f29a3c 41% 55%, #fffaf2 56%); box-shadow: 0 0 0 4px #ff8a1f; }
.sk-flyer.sk-roll.flying::after { display: none; }
.sk-flyer.sk-jet.flying::before { content: ''; position: absolute; left: 30%; bottom: -14%; width: 40%; height: 30%; border-radius: 6px; background: linear-gradient(180deg, #b0b8d0, #6a7290); z-index: -1; }
.sk-rider { position: absolute; left: 55%; top: 40%; width: 60%; aspect-ratio: 10 / 9; animation: sk-bounce .6s ease-in-out infinite; }
.sk-rider svg { width: 100%; height: 100%; display: block; }
.sk-puff { position: absolute; z-index: 5; border-radius: 50%; pointer-events: none; box-shadow: 0 0 10px currentColor; }
.sk-streak { position: absolute; z-index: 5; height: 6px; border-radius: 6px; pointer-events: none; background: linear-gradient(90deg, transparent, #9fe3ff, #fff); }
.sk-heart { position: absolute; z-index: 7; pointer-events: none; }
.sk-heart svg { display: block; width: 100%; }
.splash-word.sk-pow { color: #fff; -webkit-text-stroke-color: #e0337a; z-index: 8; }

.sk-finale { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh; background: radial-gradient(circle at 50% 45%, #fff6c8ee, #ff9fc8dd 45%, #8a4dffdd); animation: fade-in .4s; overflow: hidden; }
.sk-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, #ffffff44 0 10deg, transparent 10deg 20deg); animation: lazyspin 14s linear infinite; }
.sk-pose { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(0px, 1vw, 12px); }
.sk-star-hero { width: clamp(80px, 20vw, 210px); aspect-ratio: 1; filter: drop-shadow(0 0 16px var(--hc)) drop-shadow(0 8px 0 #0002);
  animation: jp-zoom .6s cubic-bezier(.2, 1.6, .4, 1) calc(var(--i) * .15s) backwards, sk-jump .8s ease-in-out calc(.8s + var(--i) * .12s) infinite; }
.sk-star-hero svg { width: 100%; height: 100%; display: block; }
.sk-friends { position: relative; display: flex; gap: 6px; }
.sk-friends span { width: clamp(44px, 8vw, 80px); aspect-ratio: 10 / 9; animation: sk-bounce 1s ease-in-out infinite; }
.sk-friends span:nth-child(2n) { animation-delay: -.5s; }
.sk-friends svg { width: 100%; height: 100%; display: block; }

@keyframes sk-sun { 50% { scale: 1.05; box-shadow: 0 0 150px 60px #ffd86aaa; } }
@keyframes sk-bird { from { translate: -40px 0; } to { translate: calc(100vw + 40px) -40px; } }
@keyframes sk-flap { to { scale: 1 .5; } }
@keyframes sk-bell { 0%, 60%, 100% { rotate: 0deg; } 70% { rotate: -18deg; } 80% { rotate: 16deg; } 90% { rotate: -8deg; } }
@keyframes sk-ring { 30% { scale: 1.12; } 60% { scale: .96; } }
@keyframes sk-wave { to { scale: .8 1; skew: 0 8deg; } }
@keyframes sk-peek { 50% { translate: -50% -6%; } }
@keyframes sk-wave-paw { from { rotate: -20deg; } to { rotate: 25deg; } }
@keyframes sk-help { 0%, 100% { scale: 1; rotate: -4deg; } 50% { scale: 1.12; rotate: 4deg; } }
@keyframes sk-flicker { 50% { filter: brightness(.4); } }
@keyframes sk-ready { 50% { translate: 0 -6px; } }
@keyframes sk-oops { 20% { rotate: -14deg; } 40% { rotate: 12deg; translate: 0 4px; } 60% { rotate: -8deg; } 80% { rotate: 4deg; } }
@keyframes sk-land { 0% { scale: 1.4 .7; } 60% { scale: .9 1.15; } }
@keyframes sk-bounce { 50% { translate: 0 -8%; } }
@keyframes sk-cape { to { scale: 1 .7; skew: 6deg 0; } }
@keyframes sk-jump { 0%, 100% { translate: 0 0; rotate: 0deg; } 40% { translate: 0 -14%; rotate: -4deg; } 60% { translate: 0 -14%; rotate: 4deg; } }
@keyframes fade-in { from { opacity: 0; } }

@media (max-width: 600px) {
  .sk-windows { gap: 10px; }
  .sk-help { display: none; }
  .sk-ground { padding-inline: 6px; gap: 4px; }
  .sk-hero { width: 46px; }
  .sk-hero.on { scale: 1.25; }
  .sk-saved { padding: 3px 5px; gap: 1px; }
  .sk-seat { width: 24px; border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-glow, .sk-cloud, .sk-bird, .sk-kit, .sk-kit .sk-paw, .sk-help, .sk-hero.on, .sk-rays, .sk-star-hero, .sk-seat.got svg, .sk-friends span { animation: none; }
}