/* ============================================================
   LOSTZONE Manual Tester - Card Styles (Part 1)
   カード系：エクストラ、行動、施設カード
   ============================================================ */

/* ============================================================
   エクストラカード(カルーセル用)
   ============================================================ */
.ex-card {
  border: 3px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: border 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  position: relative;
  padding: 12px;
  background: #0e1724;
  z-index: 1;
  flex: 0 0 225px;
  min-width: 225px;
  max-width: 225px;
}

.ex-card:hover {
  border-color: var(--accent);
  box-shadow: 0 16px 48px rgba(74, 168, 255, 0.5);
}

.ex-card:hover .select-button {
  transform: translate(-50%, -50%) scale(0.87);
}

.ex-card.selected:hover .select-button {
  transform: translate(-50%, -50%) scale(0.87);
}

.ex-card.selected {
  background: rgba(139, 255, 155, 0.08);
  border: 3px solid var(--ok);
  box-shadow: 0 0 24px rgba(139, 255, 155, 0.6),
              0 0 48px rgba(139, 255, 155, 0.3);
  z-index: 5;
}

.ex-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  z-index: 0;
}

.ex-card.disabled:not(.selected):hover {
  transform: none;
  box-shadow: none;
  border-color: transparent !important;
  z-index: 1;
}

.ex-name {
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--ink);
}

/* エクストラカード画像サイズ制限 */
.ex-card img {
  width: 100%;
  height: auto;
  max-height: 330px;
  object-fit: contain;
  border-radius: 6px;
}

/* ============================================================
   カード裏返し機能
   ============================================================ */
.card-image-wrapper {
  position: relative;
  width: 100%;
  height: 330px;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  cursor: pointer;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.card-face-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.card-image-wrapper.flipped .card-face {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.card-image-wrapper.flipped .card-face-back {
  transform: rotateY(360deg);
  -webkit-transform: rotateY(360deg);
}

.card-face .card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

/* ============================================================
   選択ボタン(エクストラカード用)
   ============================================================ */
.select-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 24px;
  background: rgba(14, 23, 36, 0.95);
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 8px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: 'Arial Black', 'Impact', sans-serif;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
}

.ex-card:hover .select-button:not(:disabled) {
  opacity: 1;
  pointer-events: auto;
}

.select-button:hover {
  background: rgba(74, 168, 255, 0.2);
  color: #63b6ff;
  border-color: #63b6ff;
  text-shadow: 0 0 8px rgba(74, 168, 255, 0.8);
  box-shadow: 0 0 16px rgba(74, 168, 255, 0.6);
  transform: translate(-50%, -50%) scale(1.08);
}

.select-button:disabled {
  opacity: 1;
  pointer-events: auto;
  cursor: not-allowed;
  color: var(--ok);
  border-color: var(--ok);
  background: rgba(14, 23, 36, 0.95);
  text-shadow: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   選択バッジ(ドラフト順序表示)
   ============================================================ */
.selection-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--ok), #6bdf7f);
  border: 3px solid var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: #000;
  box-shadow: 0 3px 12px rgba(139, 255, 155, 0.6);
  animation: popIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 10;
}

@keyframes popIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

/* ============================================================
   施設カード
   ============================================================ */
.facility-card {
  border: 3px solid transparent;
  border-radius: 12px;
  background: #0e1724;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  padding: 8px;
  position: relative;
  z-index: 1;
}

.facility-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px) scale(1.5);
  box-shadow: 0 8px 24px rgba(74, 168, 255, 0.3);
  z-index: 10;
}

.facility-card.destroyed {
  opacity: 0.3;
  background: #1a0000;
  z-index: 0;
}

.facility-card.destroyed:hover {
  transform: none;
  box-shadow: none;
  z-index: 0;
}

.facility-name {
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 13px;
}

.facility-cost {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

/* ============================================================
   \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3 - \u5927\u753b\u9762\u30c7\u30b9\u30af\u30c8\u30c3\u30d7 (1600px\u4ee5\u4e0a)
   ============================================================ */
@media (min-width: 1600px) {
  /* \u5927\u753b\u9762\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u3067\u306f\u30ab\u30fc\u30c9\u3092\u5927\u304d\u304f\u8868\u793a */
  .ex-card {
    flex: 0 0 270px;
    min-width: 270px;
    max-width: 270px;
    padding: 14px;
  }

  .ex-card img {
    max-height: 390px;
  }
  
  .card-image-wrapper {
    height: 390px;
  }

  .ex-name {
    font-size: 13px;
  }

  .select-button {
    padding: 13px 26px;
    font-size: 15px;
    letter-spacing: 1.5px;
  }

  .selection-badge {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}

/* ============================================================
   \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3 - iPad Pro\u5c02\u7528 (1024px\uff5e1366px)
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1366px) {
  /* \u30a8\u30af\u30b9\u30c8\u30e9\u30ab\u30fc\u30c9\u3092iPad\u306b\u6700\u9069\u5316\uff08210px\u306b\u8abf\u6574\uff09 */
  .ex-card {
    flex: 0 0 210px;
    min-width: 210px;
    max-width: 210px;
    padding: 9px;
  }

  .ex-card img {
    max-height: 300px;
  }
  
  .card-image-wrapper {
    height: 300px;
  }

  .ex-name {
    font-size: 10px;
  }

  /* \u9078\u629e\u30dc\u30bf\u30f3\u306e\u30bf\u30c3\u30c1\u30a8\u30ea\u30a2\u78ba\u4fdd (44px\u4ee5\u4e0a) */
  .select-button {
    padding: 11px 18px;
    font-size: 11px;
    min-height: 44px;
    min-width: 85px;
    letter-spacing: 0.8px;
  }

  /* \u9078\u629e\u30d0\u30c3\u30b8\u306e\u8abf\u6574 */
  .selection-badge {
    width: 28px;
    height: 28px;
    font-size: 14px;
    top: -7px;
    right: -7px;
  }

  /* \u65bd\u8a2d\u30ab\u30fc\u30c9\u306e\u30db\u30d0\u30fc\u52b9\u679c\u8abf\u6574 */
  .facility-card:hover {
    transform: translateY(-3px) scale(1.3);
  }

  .facility-name {
    font-size: 11px;
  }

  .facility-cost {
    font-size: 9px;
  }
}

/* ============================================================
   \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3 - \u30bf\u30d6\u30ec\u30c3\u30c8\u6a2a\u753b\u9762 (1024px\u4ee5\u4e0b)
   ============================================================ */
@media (max-width: 1024px) {
  /* \u30a8\u30af\u30b9\u30c8\u30e9\u30ab\u30fc\u30c9\u306e\u30b5\u30a4\u30ba\u8abf\u6574\uff08iPad\u7e26\u5411\u304d\u5bfe\u5fdc\uff09 */
  .ex-card {
    flex: 0 0 270px;
    min-width: 270px;
    max-width: 270px;
    padding: 11px;
  }

  .ex-card img {
    max-height: 390px;
  }
  
  .card-image-wrapper {
    height: 390px;
  }

  .ex-name {
    font-size: 12px;
  }

  /* \u9078\u629e\u30dc\u30bf\u30f3\u306e\u30bf\u30c3\u30c1\u30a8\u30ea\u30a2\u78ba\u4fdd (44px\u4ee5\u4e0a) */
  .select-button {
    padding: 11px 22px;
    font-size: 14px;
    min-height: 44px;
    min-width: 100px;
    letter-spacing: 1.5px;
  }

  /* \u9078\u629e\u30d0\u30c3\u30b8\u306e\u5fae\u8abf\u6574 */
  .selection-badge {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  /* \u65bd\u8a2d\u30ab\u30fc\u30c9\u306e\u30db\u30d0\u30fc\u52b9\u679c\u8abf\u6574 */
  .facility-card:hover {
    transform: translateY(-3px) scale(1.3);
  }

  .facility-name {
    font-size: 12px;
  }

  .facility-cost {
    font-size: 10px;
  }
}

/* ============================================================
   \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3 - \u30b9\u30de\u30db\u6a2a\u30fb\u30bf\u30d6\u30ec\u30c3\u30c8\u7e26 (768px\u4ee5\u4e0b)
   ============================================================ */
@media (max-width: 768px) {
  /* \u30a8\u30af\u30b9\u30c8\u30e9\u30ab\u30fc\u30c9\u306e\u30b5\u30a4\u30ba\u8abf\u6574 */
  .ex-card {
    flex: 0 0 285px;
    min-width: 285px;
    max-width: 285px;
    padding: 9px;
  }

  .ex-card img {
    max-height: 420px;
  }
  
  .card-image-wrapper {
    height: 420px;
  }

  .ex-name {
    font-size: 11px;
    margin-bottom: 3px;
  }

  /* \u9078\u629e\u30dc\u30bf\u30f3\u306e\u8abf\u6574 */
  .select-button {
    padding: 10px 20px;
    font-size: 13px;
    min-height: 44px;
    min-width: 90px;
    letter-spacing: 1px;
  }

  .select-button:hover {
    transform: translate(-50%, -50%) scale(1.05);
  }

  /* \u9078\u629e\u30d0\u30c3\u30b8\u306e\u8abf\u6574 */
  .selection-badge {
    width: 32px;
    height: 32px;
    font-size: 16px;
    top: -8px;
    right: -8px;
  }

  /* \u65bd\u8a2d\u30ab\u30fc\u30c9\u306e\u30db\u30d0\u30fc\u52b9\u679c\u8abf\u6574 */
  .facility-card {
    padding: 6px;
  }

  .facility-card:hover {
    transform: translateY(-3px) scale(1.2);
  }

  .facility-name {
    font-size: 11px;
  }

  .facility-cost {
    font-size: 10px;
  }
}

/* ============================================================
   \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3 - \u30b9\u30de\u30db\u6a2a\u753b\u9762\u5c02\u7528 (768px\u4ee5\u4e0b & landscape)
   ============================================================ */
@media (max-width: 768px) and (orientation: landscape) {
  /* \u6a2a\u753b\u9762\u3067\u306f\u9ad8\u3055\u7bc0\u7d04\u306e\u305f\u3081\u3001\u30ab\u30fc\u30c9\u3092\u3055\u3089\u306b\u7e2e\u5c0f */
  .ex-card {
    flex: 0 0 270px;
    min-width: 270px;
    max-width: 270px;
    padding: 8px;
  }

  .ex-card img {
    max-height: 360px;
  }
  
  .card-image-wrapper {
    height: 360px;
  }

  .ex-name {
    font-size: 10px;
    margin-bottom: 2px;
  }

  /* \u9078\u629e\u30dc\u30bf\u30f3\u306e\u8abf\u6574 */
  .select-button {
    padding: 9px 18px;
    font-size: 12px;
    min-height: 40px;
    min-width: 80px;
  }

  /* \u30db\u30d0\u30fc\u62e1\u5927\u3092\u6291\u3048\u308b (\u9ad8\u3055\u65b9\u5411\u306e\u30b9\u30da\u30fc\u30b9\u7bc0\u7d04) */
  .facility-card:hover {
    transform: translateY(-2px) scale(1.15);
  }

  .selection-badge {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
}

/* ============================================================
   \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3 - \u5c0f\u578b\u30b9\u30de\u30db (480px\u4ee5\u4e0b)
   ============================================================ */
@media (max-width: 480px) {
  /* \u30a8\u30af\u30b9\u30c8\u30e9\u30ab\u30fc\u30c9\u306e\u30b5\u30a4\u30ba\u8abf\u6574 */
  .ex-card {
    flex: 0 0 255px;
    min-width: 255px;
    max-width: 255px;
    padding: 9px;
  }

  .ex-card img {
    max-height: 375px;
  }
  
  .card-image-wrapper {
    height: 375px;
  }

  .ex-name {
    font-size: 11px;
  }

  /* \u9078\u629e\u30dc\u30bf\u30f3\u306e\u8abf\u6574 */
  .select-button {
    padding: 10px 18px;
    font-size: 12px;
    min-height: 44px;
    min-width: 85px;
  }

  /* \u9078\u629e\u30d0\u30c3\u30b8\u306e\u8abf\u6574 */
  .selection-badge {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }

  /* \u65bd\u8a2d\u30ab\u30fc\u30c9\u306e\u30db\u30d0\u30fc\u52b9\u679c\u8abf\u6574 */
  .facility-card:hover {
    transform: translateY(-2px) scale(1.15);
  }
}

/* ============================================================
   \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3 - \u8d85\u5c0f\u578b\u30b9\u30de\u30db (360px\u4ee5\u4e0b)
   ============================================================ */
@media (max-width: 360px) {
  /* \u30a8\u30af\u30b9\u30c8\u30e9\u30ab\u30fc\u30c9\u306e\u30b5\u30a4\u30ba\u8abf\u6574 */
  .ex-card {
    flex: 0 0 233px;
    min-width: 233px;
    max-width: 233px;
    padding: 8px;
  }

  .ex-card img {
    max-height: 345px;
  }
  
  .card-image-wrapper {
    height: 345px;
  }

  .ex-name {
    font-size: 10px;
  }

  /* \u9078\u629e\u30dc\u30bf\u30f3\u306e\u8abf\u6574 */
  .select-button {
    padding: 9px 16px;
    font-size: 11px;
    min-height: 44px;
    min-width: 80px;
    letter-spacing: 0.5px;
  }

  .select-button:hover {
    transform: translate(-50%, -50%) scale(1.03);
  }

  /* \u9078\u629e\u30d0\u30c3\u30b8\u306e\u8abf\u6574 */
  .selection-badge {
    width: 28px;
    height: 28px;
    font-size: 14px;
    top: -6px;
    right: -6px;
  }

  /* \u65bd\u8a2d\u30ab\u30fc\u30c9\u306e\u30db\u30d0\u30fc\u52b9\u679c\u8abf\u6574 */
  .facility-card {
    padding: 5px;
  }

  .facility-card:hover {
    transform: translateY(-2px) scale(1.1);
  }

  .facility-name {
    font-size: 10px;
  }

  .facility-cost {
    font-size: 9px;
  }
}