/* ==========================================================================
   card.css：UNOカードのデザイン、斜め楕円、山札裏面、アニメーション
   ========================================================================== */

/* カード基本 */
.uno-card {
  width: 82px;
  height: 124px;
  border-radius: 12px;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.25s,
    filter 0.25s,
    box-shadow 0.25s;
}


/* 白い斜め楕円 */
.uno-card .inner-oval {
  width: 90%;
  height: 68%;
  background: #ffffff;
  border-radius: 50%;
  transform: rotate(-25deg);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

.uno-card.wild .inner-oval {
  background: conic-gradient(var(--uno-赤) 0deg 90deg,
      var(--uno-青) 90deg 180deg,
      var(--uno-黄) 180deg 270deg,
      var(--uno-緑) 270deg 360deg);
}

/* メインシンボル */
.uno-card .main-symbol {
  transform: rotate(25deg);
  font-size: 34px;
  font-weight: 900;
  font-style: italic;
  color: inherit;
}

.uno-card.wild .main-symbol {
  color: #fff;
  font-size: 26px;
  text-shadow: 2px 2px 0 #000;
}

.uno-card .corner {
  position: absolute;
  font-size: 13px;
  font-weight: 900;
  font-style: italic;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.uno-card .corner.top-left {
  top: 4px;
  left: 6px;
}

.uno-card .corner.bottom-right {
  bottom: 4px;
  right: 6px;
  transform: rotate(180deg);
}


/* 出せるカード（浮遊＆発光） */
.uno-card.playable {
  cursor: pointer;
  box-shadow: 0 0 16px 3px #ffffff, 0 8px 16px rgba(0, 0, 0, 0.5);
  animation: 浮遊アニメーション 1.6s ease-in-out infinite alternate;
}

@keyframes 浮遊アニメーション {
  0% {
    transform: translateY(-14px);
  }

  100% {
    transform: translateY(-19px);
  }
}

.uno-card.playable:active {
  transform: translateY(-8px) scale(0.96);
}

/* 出せないカードの暗転を緩和（文字や色がはっきり読める明るさに） */
.uno-card.unplayable {
  filter: brightness(0.75) grayscale(20%);
  /* 暗すぎない程度に調整 */
  opacity: 0.85;
  /* 完全に透けないように */
  cursor: not-allowed;
}

/* 色選択モーダルが開いている時は、手札を暗くせず通常表示を維持 */
body.selecting-color .uno-card.unplayable {
  filter: none !important;
  opacity: 1 !important;
}

.uno-card.shake {
  animation: 不可シェイク 0.3s ease-in-out;
}

@keyframes 不可シェイク {

  0%,
  100% {
    transform: translateY(0) translateX(0);
  }

  25% {
    transform: translateY(0) translateX(-6px);
  }

  75% {
    transform: translateY(0) translateX(6px);
  }
}

/* 本物そっくりの山札（カード裏面） */
.deck-stack {
  position: relative;
  cursor: pointer;
}

.deck-stack::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 82px;
  height: 124px;
  border-radius: 12px;
  border: 2px solid #555;
  background: #1a1a1a;
  z-index: 1;
}

.deck-stack::after {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  width: 82px;
  height: 124px;
  border-radius: 12px;
  border: 2px solid #444;
  background: #111;
  z-index: 0;
}

.real-uno-back {
  background: #0d0d0d;
  z-index: 2;
  position: relative;
}

.real-uno-back .back-oval {
  width: 92%;
  height: 68%;
  background: linear-gradient(135deg, #ff1a1a 0%, #bb0000 100%);
  border-radius: 50%;
  transform: rotate(-25deg);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 0, 0, 0.4);
}

.real-uno-back .uno-logo {
  font-size: 32px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -1.5px;
  color: #ffea00;
  transform: rotate(0deg);
  text-shadow:
    -2px -2px 0 #ffffff,
    2px -2px 0 #ffffff,
    -2px 2px 0 #ffffff,
    2px 2px 0 #ffffff,
    3px 4px 0 #000000;
}

/* ドラッグ中の半透明スタイル */
.uno-card.dragging {
  opacity: 0.35 !important;
  transform: scale(0.92) !important;
}

.uno-card.swap-selected {
  transform: translateY(-24px) scale(1.08) !important;
  box-shadow: 0 0 20px 5px #ffea00 !important;
  border-color: #ffeb3b !important;
}




/* 長押しメニュー抑制 ＆ タッチ操作専有 */
.hand-container .uno-card {
  -webkit-touch-callout: none !important;
  user-select: none !important;
  touch-action: pan-x !important;
}