/* ============================================================
   像素貓 v4 — 顯示與泡泡
   幀由 JS 逐幀驅動（幀是跨列攤平的，CSS steps() 處理不了）
   尺寸／欄列數由 JS 從 cat.json 讀進來，不在這裡寫死
   ============================================================ */

.pixel-cat{
  --cat-scale: 0.78;                 /* 128px 格 × 0.78 ≈ 100px */
  --cat-cell: 128px;                 /* 由 JS 依 cat.json 覆寫 */
  --sheet-cols: 8;                   /* 同上 */
  --sheet-rows: 5;                   /* 同上 */
  --cat-frame: calc(var(--cat-cell) * var(--cat-scale));

  position: fixed;
  left: 0;
  bottom: var(--cat-bottom, 8px);
  z-index: 60;

  width: var(--cat-frame);
  height: var(--cat-frame);

  background-repeat: no-repeat;
  background-size: calc(var(--cat-frame) * var(--sheet-cols))
                   calc(var(--cat-frame) * var(--sheet-rows));
  background-position: 0 0;

  image-rendering: pixelated;
  image-rendering: crisp-edges;

  will-change: transform, background-position;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 4px 0 rgba(163, 88, 48, .12));
}

/* 被點擊：彈一下（只動 transform，不干擾幀播放） */
@keyframes cat-boing{
  0%   { translate: 0 0;     scale: 1 1 }
  28%  { translate: 0 -16px; scale: 1.06 1.06 }
  52%  { translate: 0 0;     scale: 1.08 .92 }
  72%  { translate: 0 -5px;  scale: 1 1 }
  100% { translate: 0 0;     scale: 1 1 }
}
.pixel-cat.boing{ animation: cat-boing 640ms cubic-bezier(.22,1,.36,1) 1 both }

/* 對話泡泡 */
.cat-say{
  position: fixed;
  z-index: 61;
  padding: 8px 14px;
  border-radius: 15px;
  background: #fff;
  color: #4A3428;
  font: 600 13.5px/1.5 -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  box-shadow: 0 2px 8px rgba(163,88,48,.14), 0 12px 28px rgba(163,88,48,.12);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: cat-say-in 2.6s cubic-bezier(.22,1,.36,1) both;
}
.cat-say::after{
  content:""; position:absolute; left:18px; bottom:-6px;
  width:13px; height:7px; background:#fff;
  clip-path: polygon(0 0, 100% 0, 28% 100%);
}
@keyframes cat-say-in{
  0%   { opacity:0; transform: translateY(7px) scale(.94) }
  12%  { opacity:1; transform: translateY(0) scale(1) }
  84%  { opacity:1; transform: translateY(0) scale(1) }
  100% { opacity:0; transform: translateY(-5px) scale(.98) }
}

/* 無障礙：關掉動態時只留一隻安靜的貓 */
@media (prefers-reduced-motion: reduce){
  .pixel-cat{ animation: none !important }
  .cat-say{ animation: none !important; opacity: 1 }
}

/* 手機縮小，別擋到內容 */
@media (max-width: 640px){
  .pixel-cat{ --cat-scale: 0.62 }
  .cat-say{ font-size: 12.5px; padding: 7px 12px }
}