/* ร้านแมวโฉมใหม่ + ฉากฟักไข่ (catshop.js) · ภาพเจนทั้งหมด CSS แค่วาง/ย่อ/หมุน/จาง
   #csh z 60 · #cath z 62 (เหนือ #catgot 61) · ปุ่มใช้ 9-slice pn-btn-g/o ห้าม background 100% 100% */
#csh { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(20, 12, 4, .55); padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); box-sizing: border-box; animation: cs-fade .22s; font-family: Mitr, sans-serif; color: #4a2f0a; }
#csh button { font-family: inherit; color: inherit; cursor: pointer; }
#csh .s-parts, #cath .h-parts { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: clip; }
.p-fx { position: absolute; pointer-events: none; will-change: transform, opacity; }
#csh .s-win { position: relative; width: min(100%, 1040px); height: min(100%, 680px); display: flex; flex-direction: column; gap: 6px; padding: 8px 18px 12px; box-sizing: border-box; border: solid transparent; border-width: 18px; border-image: url(img/pn-pop.webp) 60 / 18px stretch; background: #f6dfae center / cover no-repeat; background-clip: border-box; border-radius: 26px; overflow: hidden; animation: cs-pop .36s cubic-bezier(.2, 1.4, .4, 1); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); }

/* หัว */
#csh .s-head { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; flex: none; }
#csh h2 { margin: 0; min-width: 300px; height: 62px; display: grid; place-items: center; padding-top: 10px; box-sizing: border-box; background: center / contain no-repeat; color: #fff3cf; font: 700 24px/1 Mitr, sans-serif; text-shadow: 0 2px 0 #5a300c, 0 0 6px #5a300c; transform-origin: 50% 0; animation: cs-swing 4s ease-in-out infinite; }
#csh .s-wallet { display: flex; gap: 6px; flex-wrap: wrap; }
#csh .s-wallet span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border-radius: 16px; background: rgba(50, 26, 8, .78); color: #ffe9a6; font-size: 14px; }
#csh .s-wallet img { width: 22px; height: 22px; object-fit: contain; }
#csh .s-x { justify-self: end; width: 38px; height: 38px; border: 2px solid #fff3cf; border-radius: 50%; background: #c0392b; color: #fff; font-size: 16px; }

/* กลาง */
#csh .s-main { position: relative; z-index: 2; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(150px, 23%) minmax(0, 1fr); gap: 10px; align-items: end; }
#csh .s-keeper { position: relative; align-self: end; border: 0; background: none; padding: 0; height: 100%; max-height: 300px; }
#csh .s-keeper img { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 76%; max-width: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 4px 6px rgba(60, 30, 0, .4)); animation: cs-breathe 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
#csh .s-keeper .k1 { opacity: 0; }
#csh .s-keeper.blink .k0 { animation: cs-breathe 2.6s ease-in-out infinite, cs-hide .18s steps(1); }
#csh .s-keeper.blink .k1 { animation: cs-breathe 2.6s ease-in-out infinite, cs-show .18s steps(1); }
#csh .s-keeper.hop img { animation: cs-hop .45s cubic-bezier(.3, 1.6, .5, 1); }
#csh .s-say { position: absolute; left: 4%; right: -8%; top: 0; padding: 8px 10px; background: #fffaf0; border: 2px solid #c98a12; border-radius: 14px; font: 500 14px/1.3 Mitr, sans-serif; color: #4a2f0a; opacity: 0; scale: .7; transition: opacity .2s, scale .2s cubic-bezier(.2, 1.6, .4, 1); pointer-events: none; }
#csh .s-say.on { opacity: 1; scale: 1; }
#csh .s-eggs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: 100%; min-height: 0; }
#csh .s-egg { position: relative; perspective: 900px; min-height: 0; }
#csh .s-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3, 1.2, .5, 1); }
#csh .s-egg.flipped .s-flip { transform: rotateY(180deg); }
#csh .s-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px 6px; box-sizing: border-box; border: solid transparent; border-width: 22px; border-image: url(img/cs-card-w.webp) 70 fill / 22px stretch; text-align: center; }
#csh .gold .s-face { border-image-source: url(img/cs-card-b.webp); }
#csh .s-back { transform: rotateY(180deg); justify-content: space-between; }
#csh .s-face h3 { margin: 0; font: 700 18px/1.2 Mitr, sans-serif; color: #4a2f0a; flex: none; }
#csh .gold h3 { color: #1c3f8a; }
#csh .s-pod { position: relative; flex: 1; min-height: 60px; width: 100%; cursor: pointer; }
#csh .s-pic { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 100%; max-width: 86%; object-fit: contain; object-position: bottom; transform-origin: 50% 90%; animation: cs-idle 3s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(80, 40, 0, .3)); }
#csh .gold .s-pic { animation-delay: -1.3s; filter: drop-shadow(0 0 12px rgba(255, 210, 80, .9)); }
#csh .s-pic.tickle { animation: cs-tickle .55s ease-in-out, cs-idle 3s ease-in-out .55s infinite; }
#csh .s-top { margin: 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; font: 500 13px/1.2 Mitr, sans-serif; color: #7a5a2a; flex: none; }
#csh .s-top span { white-space: nowrap; }
#csh .s-tag { position: absolute; left: -10px; top: -10px; z-index: 2; padding: 3px 10px; background: #e0342c; color: #fff; border: 2px solid #ffe08a; border-radius: 12px; rotate: -10deg; font: 700 14px Mitr, sans-serif; animation: cs-beat 1.1s ease-in-out infinite; }
#csh .s-info { position: absolute; right: -10px; top: -10px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #c98a12; background: #fffaf0; font: 700 15px Mitr, sans-serif; color: #7a4a10; }
#csh .s-buy, #csh .s-home, #cath .h-btns button, #csh .s-info2 { min-height: 42px; border: solid transparent; border-width: 0 30px; border-image: url(img/pn-btn-g.webp) 0 100 fill / 0 30px stretch; background: none; color: #fff; font: 700 15px/1.1 Mitr, sans-serif; text-shadow: 0 1px 2px rgba(0, 60, 20, .8); flex: none; padding: 0 4px 3px; white-space: nowrap; }
#csh .s-buy { width: 100%; max-width: 250px; } #csh .s-buy:active, #cath .h-btns button:active { scale: .95; }
#csh .gold .s-buy, #csh .s-home, #csh .s-info2, #cath .h-more { border-image-source: url(img/pn-btn-o.webp); text-shadow: 0 1px 2px rgba(110, 50, 0, .8); }
#csh .s-buy.off { filter: grayscale(.85); font-size: 13px; font-weight: 500; }
#csh .s-buy.off b { font-weight: 700; font-variant-numeric: tabular-nums; }
#csh .s-buy.no { animation: cs-no .35s; }
#csh .s-back ul { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 4px; flex: 1; align-content: center; min-height: 0; overflow: auto; }
#csh .s-back li { display: grid; grid-template-columns: 74px 1fr 44px; gap: 4px; align-items: center; font: 500 13px Mitr, sans-serif; }
#csh .s-back li b { color: #e0a000; text-align: left; font-size: 12px; } #csh .s-back li em { font-style: normal; font-weight: 700; text-align: right; }
#csh .s-cats { display: flex; justify-content: center; } #csh .s-cats img { height: 32px; }

/* เท้า */
#csh .s-walk { position: absolute; z-index: 2; left: 0; bottom: 74px; animation: cs-walk 18s linear infinite; cursor: pointer; }
#csh .s-walk img { display: block; height: 52px; animation: cs-turn 18s steps(1) infinite; filter: drop-shadow(0 3px 2px rgba(50, 20, 0, .4)); }
#csh .s-foot { position: relative; z-index: 3; flex: none; display: flex; gap: 10px; align-items: center; padding: 4px 8px; border-radius: 16px; background: rgba(255, 248, 228, .9); border: 2px solid #c98a12; }
#csh .s-dexw { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
#csh .s-dl { flex: none; font: 500 13px/1.1 Mitr, sans-serif; text-align: center; } #csh .s-dl b { display: block; font-size: 17px; color: #c0620a; }
#csh .s-dex { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
#csh .s-mini { flex: none; width: 56px; padding: 0; border: 0; background: none; display: grid; justify-items: center; }
#csh .s-mini img { height: 42px; max-width: 54px; object-fit: contain; filter: brightness(0) opacity(.3); }
#csh .s-mini.has img { filter: none; animation: cs-breathe 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
#csh .s-mini small { font: 500 11px/1 Mitr, sans-serif; color: #7a5a2a; }
#csh .s-mini.r4.has small { color: #8a3fd0; } #csh .s-mini.r5.has small { color: #c98a00; }
#csh .s-home { display: inline-flex; align-items: center; gap: 4px; }
#csh .s-home img { width: 26px; height: 26px; object-fit: contain; }
#csh .s-motes { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#csh .s-motes i { position: absolute; left: var(--x); bottom: -20px; width: 14px; height: 14px; scale: var(--s); background: center / contain no-repeat; opacity: 0; animation: cs-mote 6s linear var(--d) infinite; }

@media (max-height: 480px) { /* มือถือแนวนอน */
  #csh .s-win { height: 100%; width: 100%; max-width: none; padding: 2px 8px 4px; border-width: 12px; border-image-width: 12px; gap: 3px; }
  #csh h2 { min-width: 200px; height: 40px; font-size: 18px; padding-top: 6px; }
  #csh .s-x { width: 32px; height: 32px; } #csh .s-wallet span { font-size: 12px; }
  #csh .s-main { grid-template-columns: minmax(110px, 17%) minmax(0, 1fr); }
  #csh .s-say { font-size: 12px; padding: 5px 7px; left: 0; right: -14%; }
  #csh .s-face { display: grid; grid-template-columns: 46% minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; border-width: 14px; border-image-width: 14px; padding: 0 2px 2px; column-gap: 6px; row-gap: 3px; align-items: center; justify-items: center; }
  #csh .s-pod { grid-column: 1; grid-row: 1 / -1; height: 100%; min-height: 0; }
  #csh .s-face h3 { grid-column: 2; grid-row: 2; font-size: 15px; } #csh .s-top { grid-column: 2; grid-row: 3; font-size: 11px; gap: 0 6px; } #csh .s-buy { grid-column: 2; grid-row: 4; min-height: 34px; font-size: 12px; border-width: 0 16px; border-image-width: 0 16px; }
  #csh .s-back { display: flex; flex-direction: column; } #csh .s-back li { font-size: 11px; grid-template-columns: 58px 1fr 34px; } #csh .s-cats img { height: 20px; } #csh .s-info2 { min-height: 28px; font-size: 12px; }
  #csh .s-foot { padding: 1px 6px; } #csh .s-mini { width: 42px; } #csh .s-mini img { height: 26px; } #csh .s-mini small { font-size: 9px; } #csh .s-home { min-height: 32px; font-size: 13px; border-width: 0 20px; border-image-width: 0 20px; } #csh .s-home img { width: 20px; height: 20px; }
  #csh .s-walk { display: none; }
}
@media (max-width: 620px) { /* มือถือแนวตั้ง */
  #csh .s-win { padding: 4px 6px 8px; border-width: 12px; border-image-width: 12px; }
  #csh .s-head { grid-template-columns: 1fr auto; } #csh .s-head h2 { grid-row: 2; grid-column: 1 / -1; justify-self: center; min-width: 220px; height: 46px; font-size: 19px; }
  #csh .s-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: 110px minmax(0, 1fr); }
  #csh .s-keeper img { left: 16%; height: 100%; } #csh .s-say { left: 34%; right: 2%; top: 14px; font-size: 13px; }
  #csh .s-face { border-width: 16px; border-image-width: 16px; padding: 2px; } #csh .s-face h3 { font-size: 15px; } #csh .s-top { font-size: 11px; gap: 4px; } #csh .s-buy { min-height: 38px; font-size: 13px; border-width: 0 18px; border-image-width: 0 18px; }
  #csh .s-back li { grid-template-columns: 1fr 36px; font-size: 11px; } #csh .s-cats { display: none; }
  #csh .s-foot { flex-wrap: wrap; justify-content: center; } #csh .s-dexw { flex: 0 0 100%; } #csh .s-walk { display: none; }
}

/* ---------- ฉากฟักไข่ ---------- */
#cath { position: fixed; inset: 0; z-index: 62; overflow: clip; background: #0d0a24; font-family: Mitr, sans-serif; color: #fff; cursor: pointer; user-select: none; -webkit-user-select: none; opacity: 0; transition: opacity .3s; }
#cath.in { opacity: 1; } #cath.out { opacity: 0; pointer-events: none; }
#cath .lm { background: var(--im) center / contain no-repeat; }
#cath .tn { background: var(--tc); -webkit-mask: var(--im) center / contain no-repeat; mask: var(--im) center / contain no-repeat; }
#cath .h-bg { position: absolute; inset: -4%; background: center / cover no-repeat; transition: filter .6s, scale 6s linear; scale: 1.08; }
#cath.in .h-bg { scale: 1; }
#cath.tense .h-bg { filter: brightness(.3) saturate(.5); }
#cath[data-r="5"].tense .h-bg { filter: brightness(.12) saturate(.3); }
#cath.boom .h-bg { filter: brightness(.65); }
#cath .h-rays, #cath .h-glow { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
#cath .h-glow { width: min(90vh, 90vw); opacity: 0; animation: cs-spin 14s linear infinite; transition: opacity .5s; }
#cath.lit .h-glow { opacity: .55; } #cath.tense .h-glow { opacity: .9; animation-duration: 4s; } #cath.shown .h-glow { opacity: .75; }
#cath .h-rays { width: min(150vh, 150vw); opacity: 0; animation: cs-spin 18s linear infinite; transition: opacity .5s; }
#cath.rays .h-rays, #cath[data-r="5"].shown .h-rays { opacity: .9; } #cath[data-r="4"].shown .h-rays { opacity: .35; }
#cath .h-mid { position: absolute; left: 50%; top: 57%; width: 0; height: 0; }
#cath.hcard .h-mid { top: 37%; transition: top .45s cubic-bezier(.2, 1.2, .4, 1); }
#cath .h-mid > * { position: absolute; left: 0; top: 0; }
#cath .h-sig { width: min(66vh, 80vw); aspect-ratio: 1; translate: -50% -50%; top: 17vh; scale: 1 .3; background: center / contain no-repeat; opacity: .35; animation: cs-spinT 9s linear infinite; pointer-events: none; }
#cath.tense .h-sig { animation-duration: 1.6s; opacity: 1; } #cath.hcard .h-sig { opacity: 0; transition: opacity .3s; }
#cath .h-wave { width: 40vh; aspect-ratio: 1; translate: -50% -50%; opacity: 0; pointer-events: none; }
#cath.boom .h-wave.w1 { animation: cs-wave .8s ease-out forwards; } #cath.boom .h-wave.w2 { animation: cs-wave .8s ease-out .15s forwards; } #cath.shown .h-wave.w1 { animation: cs-wave2 .8s ease-out forwards; }
#cath .h-egg { height: 42vh; aspect-ratio: .8; translate: -50% -50%; display: grid; place-items: center; transform-origin: 50% 90%; animation: cs-drop .85s cubic-bezier(.3, 1.3, .5, 1) backwards, cs-eggbob 2.6s ease-in-out .85s infinite; }
#cath .h-egg .e { grid-area: 1 / 1; max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 0 0 transparent); }
#cath .h-egg .e1, #cath .h-egg .e2 { opacity: 0; } #cath.c1 .h-egg .e1 { opacity: 1; } #cath.c2 .h-egg .e2 { opacity: 1; } #cath.c1 .h-egg .e0 { opacity: 0; } #cath.c2 .h-egg .e1 { opacity: 0; }
#cath.lit .h-egg .e { filter: drop-shadow(0 0 22px var(--tc)); }
#cath .h-egg.wob { animation: cs-wob .42s ease-in-out, cs-eggbob 2.6s ease-in-out .42s infinite; }
#cath .h-egg.wob2 { animation: cs-wob .22s ease-in-out 3, cs-eggbob 2.6s ease-in-out .66s infinite; }
#cath .h-egg.lev { animation: cs-lev 1.2s ease-in-out forwards, cs-wob .14s linear infinite; }
#cath.boom .h-egg { display: none; }
#cath .h-top, #cath .h-bot { height: 22vh; translate: -50% -50%; opacity: 0; pointer-events: none; }
#cath.boom .h-top { animation: cs-top .9s cubic-bezier(.2, .7, .5, 1) forwards; } #cath.boom .h-bot { animation: cs-bot .9s cubic-bezier(.3, 0, .7, 1) forwards; }
#cath .h-cat { width: min(46vh, 70vw); aspect-ratio: 1; translate: -50% -55%; border: 0; background: none; padding: 0; cursor: pointer; opacity: 0; pointer-events: none; }
#cath .h-cat img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 26px var(--tc)); }
#cath.sil .h-cat { opacity: 1; animation: cs-popin .42s cubic-bezier(.2, 1.7, .4, 1); } #cath.sil .h-cat img { filter: brightness(0); }
#cath.shown .h-cat { opacity: 1; pointer-events: auto; animation: cs-squash .55s cubic-bezier(.2, 1.4, .4, 1); }
#cath.hcard .h-cat { width: min(38vh, 62vw); }
#cath .h-cat.purr { animation: cs-squash .4s ease-out; }
#cath .h-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 4; }
#cath.boom .h-flash { animation: cs-flash .55s ease-out; } #cath.shown .h-flash { animation: cs-flash2 .5s ease-out; }
#cath.quake { animation: cs-quake .4s; }
#cath .h-hint { position: absolute; left: 0; right: 0; top: 86%; text-align: center; font: 700 22px Mitr, sans-serif; text-shadow: 0 2px 6px #000; opacity: 0; pointer-events: none; }
#cath .h-hint.on { opacity: 1; animation: cs-hint 1.2s ease-in-out infinite; }
#cath .h-card { position: absolute; left: 50%; bottom: max(14px, 3vh); width: min(520px, 92vw); translate: -50% 30px; padding: 10px 16px 12px; box-sizing: border-box; border: solid transparent; border-width: 18px; border-image: url(img/cs-card-w.webp) 70 fill / 18px stretch; text-align: center; color: #4a2f0a; opacity: 0; pointer-events: none; transition: opacity .3s, translate .35s cubic-bezier(.2, 1.3, .4, 1); cursor: default; z-index: 6; }
#cath[data-r="5"] .h-card, #cath[data-r="4"] .h-card { border-image-source: url(img/cs-card-b.webp); }
#cath.hcard .h-card { opacity: 1; translate: -50% 0; pointer-events: auto; }
#cath .h-stars { display: flex; justify-content: center; gap: 2px; min-height: 30px; }
#cath .h-stars img { width: 30px; opacity: 0; } #cath.hcard .h-stars img { animation: cs-stamp .34s cubic-bezier(.2, 1.7, .4, 1) calc(.14s + var(--i) * .17s) forwards; }
#cath .h-card em { display: block; font: 700 13px Mitr, sans-serif; font-style: normal; }
#cath .h-name { display: block; font: 700 24px/1.15 Mitr, sans-serif; }
#cath .h-card p { margin: 2px 0 6px; font: 500 14px/1.35 Mitr, sans-serif; color: #6a4a1a; }
#cath .h-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
#cath .h-btns button { min-width: 120px; cursor: pointer; }
#cath .h-go { border-image-source: url(img/pn-btn-g.webp); }
#cath .h-new { position: absolute; left: calc(50% + min(150px, 24vw)); top: 12%; width: 96px; aspect-ratio: 1; background: center / contain no-repeat; display: grid; place-items: center; font: 700 19px Mitr, sans-serif; color: #fff; text-shadow: 0 1px 2px #6a0a0a; opacity: 0; rotate: 12deg; z-index: 6; pointer-events: none; }
#cath.stamp .h-new { animation: cs-stamp2 .4s cubic-bezier(.2, 1.7, .4, 1) forwards; }
#cath .h-skip { position: absolute; right: max(14px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); z-index: 7; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 16px; background: rgba(0, 0, 0, .35); color: #fff; font: 500 14px Mitr, sans-serif; cursor: pointer; }
#cath .h-skip[hidden] { display: none; }
@media (max-height: 480px) { /* แนวนอนเตี้ย: แมวซ้าย การ์ดขวา */
  #cath.hcard .h-mid { left: 28%; top: 50%; } #cath.hcard .h-cat { width: 62vh; }
  #cath .h-card { left: auto; right: 12px; bottom: 50%; width: 52vw; translate: 0 calc(50% + 20px); padding: 2px 8px 6px; }
  #cath.hcard .h-card { translate: 0 50%; }
  #cath .h-name { font-size: 19px; } #cath .h-card p { font-size: 12px; } #cath .h-btns button { min-width: 96px; min-height: 36px; font-size: 13px; }
  #cath .h-new { left: 34%; top: 8%; width: 66px; font-size: 14px; }
}

@keyframes cs-fade { from { opacity: 0; } }
@keyframes cs-pop { from { scale: .86; opacity: 0; } }
@keyframes cs-swing { 0%, 100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } }
@keyframes cs-breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.02 .975; } }
@keyframes cs-hide { 0% { opacity: 0; } } @keyframes cs-show { 0% { opacity: 1; } }
@keyframes cs-hop { 0% { translate: -50% 0; } 40% { translate: -50% -22px; scale: .96 1.05; } 75% { translate: -50% 0; scale: 1.06 .94; } 100% { translate: -50% 0; } }
@keyframes cs-idle { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }
@keyframes cs-tickle { 0%, 100% { rotate: 0deg; } 20% { rotate: -13deg; } 45% { rotate: 11deg; } 70% { rotate: -7deg; } 88% { rotate: 4deg; } }
@keyframes cs-beat { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }
@keyframes cs-no { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
@keyframes cs-walk { 0% { left: 3%; } 48% { left: 88%; } 50% { left: 88%; } 98% { left: 3%; } 100% { left: 3%; } }
@keyframes cs-turn { 0% { transform: scaleX(-1); } 49% { transform: scaleX(1); } }
@keyframes cs-mote { 0% { opacity: 0; translate: 0 0; rotate: 0deg; } 15% { opacity: .85; } 85% { opacity: .6; } 100% { opacity: 0; translate: 22px -420px; rotate: 200deg; } }
@keyframes cs-spin { to { rotate: 360deg; } }
@keyframes cs-spinT { to { transform: rotate(360deg); } }
@keyframes cs-drop { 0% { translate: -50% -130vh; rotate: -16deg; } 70% { translate: -50% -50%; scale: 1.14 .82; } 85% { translate: -50% -58%; scale: .95 1.06; } 100% { translate: -50% -50%; scale: 1; } }
@keyframes cs-eggbob { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }
@keyframes cs-wob { 0%, 100% { rotate: 0deg; } 20% { rotate: -11deg; } 50% { rotate: 10deg; } 80% { rotate: -6deg; } }
@keyframes cs-lev { to { translate: -50% -62%; scale: 1.14; } }
@keyframes cs-top { 0% { opacity: 1; translate: -50% -80%; } 70% { opacity: 1; } 100% { opacity: 0; translate: calc(-50% - 22vw) -60vh; rotate: -160deg; } }
@keyframes cs-bot { 0% { opacity: 1; translate: -50% -10%; } 70% { opacity: 1; } 100% { opacity: 0; translate: calc(-50% + 22vw) 56vh; rotate: 130deg; } }
@keyframes cs-wave { 0% { opacity: .9; scale: .3; } 100% { opacity: 0; scale: 3.4; } }
@keyframes cs-wave2 { 0% { opacity: .7; scale: .5; } 100% { opacity: 0; scale: 2.4; } }
@keyframes cs-flash { 0% { opacity: .95; } 100% { opacity: 0; } } @keyframes cs-flash2 { 0% { opacity: .7; } 100% { opacity: 0; } }
@keyframes cs-popin { from { scale: .2; opacity: 0; } }
@keyframes cs-squash { 0% { scale: 1.22 .78; } 45% { scale: .9 1.14; } 75% { scale: 1.05 .96; } 100% { scale: 1; } }
@keyframes cs-quake { 20% { translate: -8px 5px; } 40% { translate: 7px -6px; } 60% { translate: -5px -3px; } 80% { translate: 4px 3px; } }
@keyframes cs-hint { 0%, 100% { scale: 1; } 50% { scale: 1.09; } }
@keyframes cs-stamp { 0% { opacity: 0; scale: 2.6; rotate: -22deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes cs-stamp2 { 0% { opacity: 0; scale: 2.8; } 100% { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) { #csh .s-motes, #csh .s-walk { display: none; } }