/* ===========================================================
   mg-ordinal.css — 小遊戲「第幾個」專屬樣式
   =========================================================== */

/* ---------- 方向提示：箭頭 + 「從左邊數」 ---------- */
.ord-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap;
}
.ord-arrow {
  width: clamp(46px, 5.6vw, 68px);
  height: clamp(46px, 5.6vw, 68px);
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .22));
  animation: ordNudge 1.1s ease-in-out infinite;
}
.ord-arrow.is-w { animation-name: ordNudgeW; }
@keyframes ordNudge {
  0%, 100% { transform: translateX(-7px); }
  50% { transform: translateX(9px); }
}
@keyframes ordNudgeW {
  0%, 100% { transform: translateX(7px); }
  50% { transform: translateX(-9px); }
}
.ord-chip { font-size: clamp(18px, 2vw, 25px); }

/* ---------- 從哪裡開始數：起點發光 ---------- */
.obj-cell.is-ord-start {
  box-shadow: 0 0 0 5px rgba(255, 190, 60, .7);
}
/* ---------- 答案就是這一個：揭曉時跳一下 ---------- */
.obj-cell.is-ord-focus {
  background: rgba(255, 214, 120, .6);
  box-shadow: 0 0 0 6px rgba(255, 145, 40, .55);
  animation: ordFun 420ms cubic-bezier(.2, 1.6, .5, 1) 2;
}
@keyframes ordFun {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.1); }
}