/* ==========================================================================
   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.red { background: var(--uno-赤); }
.uno-card.blue { background: var(--uno-青); }
.uno-card.green { background: var(--uno-緑); }
.uno-card.yellow { background: var(--uno-黄); }
.uno-card.wild { background: var(--uno-黒); }

/* 白い斜め楕円 */
.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.red .main-symbol { color: var(--uno-赤); }
.uno-card.blue .main-symbol { color: var(--uno-青); }
.uno-card.green .main-symbol { color: var(--uno-緑); }
.uno-card.yellow .main-symbol { color: var(--uno-黄); }
.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); }

.icon-svg { width: 30px; height: 30px; fill: currentColor; }
.corner .icon-svg { width: 13px; height: 13px; fill: #fff; }

/* 出せるカード（浮遊＆発光） */
.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 {
  transform: translateY(0);
  opacity: 0.35;
  filter: grayscale(60%) brightness(0.7);
  box-shadow: none;
  cursor: not-allowed;
}

.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;
}