/* =========================================
   西野偵探の「瞬殺」事件簿 専用スタイル
========================================= */

/* カードの3D回転の舞台 */
.case-card {
    background-color: transparent;
    height: 320px;
    /* カードの高さ */
    perspective: 1000px;
    /* 3Dの奥行き */
    cursor: pointer;
}

/* 回転する中身 */
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    /* スムーズな回転 */
    transform-style: preserve-3d;
    border-radius: 12px;
}

/* クラス付与で回転 */
.case-card.flipped .card-inner {
    transform: rotateY(180deg);
}

/* 表面・裏面の共通設定 */
.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(0, 255, 157, 0.1);
    /* デジタルな薄い枠線 */
    background: rgba(10, 10, 10, 0.9);
    /* 半透明の黒 */
    backdrop-filter: blur(10px);
    /* すりガラス効果 */
    overflow: hidden;
}

/* 表面（問題編）: スタイリッシュなデジタル風 */
.card-front {
    /* 上部にアクセントバー */
    border-top: 3px solid var(--nishino-green);
}

.card-front::before {
    /* 背景にうっすらグリッドを表示 */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 255, 157, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 157, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: -1;
    pointer-events: none;
}

/* 裏面（解決編）: 赤を基調とした警告/解決画面風 */
.card-back {
    transform: rotateY(180deg);
    /* 枠線を赤く */
    border-color: var(--nishino-red);
    /* 背景もうっすら赤く */
    background: linear-gradient(135deg, rgba(40, 10, 10, 0.9), rgba(10, 10, 10, 0.9));
}

.card-back::after {
    /* スキャンライン効果 */
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(255, 51, 51, 0.05) 3px,
            rgba(255, 51, 51, 0.05) 4px);
    pointer-events: none;
}

/* フィルターボタン（Tailwindで補完できない部分） */
.filter-btn {
    @apply px-4 py-2 text-sm font-mincho text-gray-400 border border-gray-800 rounded-full transition-all duration-300;
    background: rgba(10, 10, 10, 0.5);
}

.filter-btn:hover {
    @apply text-nishino-green border-nishino-green/50 bg-nishino-green/10;
}

.filter-btn.active {
    @apply text-nishino-dark bg-nishino-green border-nishino-green font-bold shadow-[0_0_15px_rgba(0, 255, 157, 0.4)];
}

/* NEWバッジのアニメーション */
@keyframes pulse-green {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 157, 0.7);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(0, 255, 157, 0);
    }
}

.new-badge {
    animation: pulse-green 2s infinite;
}