/* UNO overrides: loaded after games.css so legacy rules cannot win. */

/* ── 牌堆中央 UNO 文字：置中、不歪斜（拿掉整疊 -3deg 傾斜，但抽牌動畫時放行） ── */
#uno-room .uno-pile.is-deck:not(.is-drawing) { transform: none !important; }
#uno-room .uno-pile.is-deck:not(.is-drawing)::before { transform: translate(-4px, 4px) !important; }
#uno-room .uno-pile.is-deck:not(.is-drawing)::after { transform: translate(4px, 3px) !important; }
#uno-room .uno-pile.is-deck > span {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 26px !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 1px;
  text-align: center !important;
  transform: none !important;
}
#uno-room .uno-pile.is-deck > small { z-index: 4; right: 7px; bottom: 6px; }

#uno-room .uno-card > span,
#uno-room .uno-card > small { color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 55%); }
#uno-room .uno-hand { gap: 12px; }
#uno-room .uno-hand > .uno-card { margin-right: 0; }

/* ── 遊戲未開始／未翻牌時，右邊棄牌堆完全隱藏 ── */
#uno-room .uno-pile:not(.is-deck):empty { visibility: hidden; }
#uno-room .uno-pile.can-flip { visibility: visible; border: 0; background: transparent; box-shadow: none; }
#uno-room .uno-pile.can-flip::before,
#uno-room .uno-pile.can-flip::after { display: none; }

/* ── 喊 UNO! 按鈕：hover 無藍色的彩色漸層 + 向上浮起 ── */
#uno-room .uno-call,
#uno-room .uno-call:hover:not(:disabled) {
  background: linear-gradient(135deg, #ef4444, #f97316, #eab308, #22c55e) !important;
  color: #fff !important;
}
#uno-room .uno-call:hover:not(:disabled) {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .22) !important;
}

/* ── 表情反應：完全比照大老二（只顯示 emoji、浮在玩家卡片上方） ── */
#uno-room .uno-player { position: relative; }
#uno-room .uno-player.is-finished { opacity: .72; }
#uno-room .uno-player.is-skipped { animation: uno-player-skipped .68s cubic-bezier(.2, .8, .2, 1) both; }
#uno-room .uno-skip-indicator {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  padding: 6px 12px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 8px 18px rgb(15 23 42 / 28%);
  animation: uno-skip-pop .78s ease-out both;
}
@keyframes uno-player-skipped {
  35% { filter: grayscale(1) brightness(.72); transform: translateX(-5px) rotate(-1deg); }
  65% { transform: translateX(4px) rotate(1deg); }
}
@keyframes uno-skip-pop {
  0% { opacity: 0; transform: translate(-50%, -35%) scale(.55); }
  28% { opacity: 1; transform: translate(-50%, -55%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -95%) scale(.94); }
}
#uno-room .uno-reactions button,
#uno-room .uno-reactions button:hover:not(:disabled) { border-color: transparent; background: transparent; box-shadow: none; }
#uno-room .uno-reactions button:hover:not(:disabled) { transform: translateY(-3px); }
#uno-room .uno-reaction-float {
  position: absolute;
  z-index: 5;
  top: 4px;
  left: 50%;
  right: auto;
  bottom: auto;
  overflow: visible !important;
  color: #fff;
  font-size: 28px !important;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  text-shadow: none;
  filter: drop-shadow(0 3px 5px rgba(15, 23, 42, .28));
  transform: translate(-50%, 8px) scale(.72);
}
#uno-room .uno-player .uno-reaction-float.is-showing {
  animation: big-two-reaction-float 3.2s ease-out both !important;
}

/* ── 發牌／抽牌／出牌動畫，全部比照大老二 ── */
/* 起手發牌：手牌逐張錯開（45ms） */
#uno-room .uno-card.is-dealt {
  animation: big-two-deal .42s cubic-bezier(.2, .8, .2, 1) both !important;
  animation-delay: calc(var(--card-index, 0) * 45ms) !important;
}
/* 抽到單張牌：直接滑入、不要延遲 */
#uno-room .uno-card.is-received {
  animation: big-two-deal .42s cubic-bezier(.2, .8, .2, 1) both !important;
  animation-delay: 0s !important;
}
/* 對手卡背：發牌時依 deal-order 錯開，抽牌時只讓最後一張動 */
#uno-room .uno-player.is-dealing .uno-card-backs i {
  animation: big-two-deal .42s cubic-bezier(.2, .8, .2, 1) both !important;
  animation-delay: calc(var(--deal-order, 0) * 70ms) !important;
}
#uno-room .uno-player.is-receiving .uno-card-backs i { animation: none !important; }
#uno-room .uno-player.is-receiving .uno-card-backs i:last-child {
  animation: big-two-deal .42s cubic-bezier(.2, .8, .2, 1) both !important;
  animation-delay: 0s !important;
}
/* 出牌：手牌向上飛出（同大老二 big-two-card-out） */
#uno-room .uno-hand .uno-card.is-playing-out {
  pointer-events: none;
  animation: big-two-card-out .28s cubic-bezier(.4, 0, 1, 1) both !important;
}
#uno-room .uno-hand .uno-card.is-reordering {
  pointer-events: none;
  will-change: transform;
  filter: brightness(1.06);
  transition: none !important;
}
/* 打到中央棄牌堆的落牌動畫 */
#uno-room .uno-pile .uno-card.is-played {
  animation: uno-play-final .34s cubic-bezier(.2, .8, .2, 1) both !important;
}

@keyframes uno-play-final {
  from {
    opacity: 0;
    transform: translate(calc(var(--uno-discard-x, 0px) - 72px), calc(var(--uno-discard-y, 0px) + 50px)) rotate(calc((var(--uno-discard-rotation, 0) - 14) * 1deg)) scale(.78);
  }
  to {
    opacity: 1;
    transform: translate(var(--uno-discard-x, 0), var(--uno-discard-y, 0)) rotate(calc(var(--uno-discard-rotation, 0) * 1deg));
  }
}