/* ============================================================
   機種LP管理プラグイン スタイルシート
   機種名ネオン光り + フィルターボタン + レスポンシブグリッド
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700;900&display=swap');

/* ---------- CSS変数 ---------- */
:root {
  --mlp-gold:        #FFD700;
  --mlp-gold-light:  #FFF176;
  --mlp-gold-dark:   #B8860B;
  --mlp-shindai:     #FF3B3B;
  --mlp-zoudai:      #FF6A00;
  --mlp-osusume:     #00C2FF;
  --mlp-bg:          #0D0D1A;
  --mlp-card-bg:     #12122A;
  --mlp-card-border: #2A2A5A;
  --mlp-text:        #EEEEEE;
  --mlp-radius:      14px;
  --mlp-shadow:      0 4px 24px rgba(0,0,0,0.6);
}

/* ---------- ラッパー ---------- */
.machine-lp-wrap {
  background: var(--mlp-bg);
  padding: 32px 16px 48px;
  border-radius: 18px;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}

/* ---------- フィルターボタン ---------- */
.machine-lp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 36px;
}

.mlp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 28px;
  border: none;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.25s, opacity 0.25s;
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
}

.mlp-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity 0.2s;
}
.mlp-btn:hover::before { opacity: 1; }
.mlp-btn:hover         { transform: translateY(-2px); }
.mlp-btn:active        { transform: translateY(0); }

.mlp-btn-icon {
  font-size: 18px;
  line-height: 1;
}

/* すべて */
.mlp-btn-all {
  background: linear-gradient(135deg, #2A2A6A 0%, #4A4AAA 100%);
  color: #fff;
  border: 2px solid #6060CC;
  box-shadow: 0 0 12px rgba(100,100,255,0.4);
}
.mlp-btn-all.active,
.mlp-btn-all:hover {
  box-shadow: 0 0 24px 6px rgba(120,120,255,0.7);
  border-color: #A0A0FF;
}

/* 新台 */
.mlp-btn-shindai {
  background: linear-gradient(135deg, #8B0000 0%, #FF3B3B 100%);
  color: #fff;
  border: 2px solid #FF3B3B;
  box-shadow: 0 0 12px rgba(255,59,59,0.4);
}
.mlp-btn-shindai.active,
.mlp-btn-shindai:hover {
  box-shadow: 0 0 24px 6px rgba(255,59,59,0.8);
  border-color: #FF8080;
}

/* 増大 */
.mlp-btn-zoudai {
  background: linear-gradient(135deg, #8B3A00 0%, #FF6A00 100%);
  color: #fff;
  border: 2px solid #FF6A00;
  box-shadow: 0 0 12px rgba(255,106,0,0.4);
}
.mlp-btn-zoudai.active,
.mlp-btn-zoudai:hover {
  box-shadow: 0 0 24px 6px rgba(255,106,0,0.8);
  border-color: #FFAA60;
}

/* おすすめ */
.mlp-btn-osusume {
  background: linear-gradient(135deg, #004466 0%, #00C2FF 100%);
  color: #fff;
  border: 2px solid #00C2FF;
  box-shadow: 0 0 12px rgba(0,194,255,0.4);
}
.mlp-btn-osusume.active,
.mlp-btn-osusume:hover {
  box-shadow: 0 0 24px 6px rgba(0,194,255,0.8);
  border-color: #80E4FF;
}

/* その他カテゴリ */
.mlp-btn-other {
  background: linear-gradient(135deg, #1A1A2E 0%, #3A3A5E 100%);
  color: #ccc;
  border: 2px solid #4A4A7E;
}
.mlp-btn-other.active,
.mlp-btn-other:hover {
  box-shadow: 0 0 16px rgba(180,180,255,0.5);
  border-color: #8080CC;
  color: #fff;
}

/* ---------- グリッド ---------- */
.machine-lp-grid {
  display: grid;
  grid-template-columns: repeat(var(--mlp-cols, 3), 1fr);
  gap: 24px;
}

/* カラム数はJSで --mlp-cols を書き換える */

/* ---------- カード ---------- */
.machine-card {
  background: var(--mlp-card-bg);
  border: 1px solid var(--mlp-card-border);
  border-radius: var(--mlp-radius);
  overflow: hidden;
  box-shadow: var(--mlp-shadow);
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
}

.machine-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 8px 40px rgba(255,215,0,0.25);
}

/* カードが非表示のとき */
.machine-card.hidden {
  display: none;
}

/* フィルター切り替えアニメーション */
.machine-card.fade-in {
  animation: mlpFadeIn 0.35s ease forwards;
}
@keyframes mlpFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- バッジ ---------- */
.machine-card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 10;
}

.mlp-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.mlp-badge-shindai {
  background: linear-gradient(90deg, #FF3B3B, #FF8080);
  color: #fff;
  box-shadow: 0 0 8px rgba(255,59,59,0.7);
}
.mlp-badge-zoudai {
  background: linear-gradient(90deg, #FF6A00, #FFAA00);
  color: #fff;
  box-shadow: 0 0 8px rgba(255,106,0,0.7);
}
.mlp-badge-osusume {
  background: linear-gradient(90deg, #00C2FF, #80E4FF);
  color: #003344;
  box-shadow: 0 0 8px rgba(0,194,255,0.7);
}

/* ---------- サムネイル ---------- */
.machine-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0A0A18;
  display: flex;
  align-items: center;
  justify-content: center;
}
.machine-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.machine-card:hover .machine-thumb-img {
  transform: scale(1.06);
}
.machine-thumb-placeholder {
  color: #444;
  font-size: 14px;
  letter-spacing: 0.05em;
}

/* ---------- 機種名（光る！） ---------- */
.machine-card-name-wrap {
  padding: 14px 14px 2px;
  text-align: center;
}

.machine-card-name {
  margin: 0;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: var(--mlp-gold);
}

/* ネオンゴールド光り（アニメーション） */
.glow-text {
  animation: neonGold 2.8s ease-in-out infinite alternate;
}

@keyframes neonGold {
  0% {
    color: var(--mlp-gold);
    text-shadow:
      0 0 6px  rgba(255,215,0,0.9),
      0 0 12px rgba(255,215,0,0.7),
      0 0 24px rgba(255,215,0,0.5),
      0 0 48px rgba(255,180,0,0.3);
  }
  50% {
    color: var(--mlp-gold-light);
    text-shadow:
      0 0 8px  rgba(255,241,118,1.0),
      0 0 20px rgba(255,215,0,0.9),
      0 0 40px rgba(255,215,0,0.6),
      0 0 80px rgba(255,180,0,0.4),
      0 0 120px rgba(255,150,0,0.2);
  }
  100% {
    color: #FFC200;
    text-shadow:
      0 0 4px  rgba(255,194,0,0.8),
      0 0 10px rgba(255,194,0,0.6),
      0 0 20px rgba(255,150,0,0.4),
      0 0 40px rgba(255,100,0,0.2);
  }
}

/* カードホバー時はさらに強く光る */
.machine-card:hover .glow-text {
  animation: neonGoldStrong 1.4s ease-in-out infinite alternate;
}

@keyframes neonGoldStrong {
  0% {
    color: var(--mlp-gold-light);
    text-shadow:
      0 0 8px  rgba(255,241,118,1.0),
      0 0 20px rgba(255,215,0,1.0),
      0 0 48px rgba(255,215,0,0.8),
      0 0 100px rgba(255,180,0,0.5);
  }
  100% {
    color: #fff5aa;
    text-shadow:
      0 0 10px rgba(255,255,200,1.0),
      0 0 30px rgba(255,215,0,1.0),
      0 0 60px rgba(255,215,0,0.7),
      0 0 120px rgba(255,180,0,0.4);
  }
}

/* ---------- キャッチコピー ---------- */
.machine-card-catch {
  margin: 6px 14px 14px;
  font-size: 12px;
  color: #AAA;
  text-align: center;
  line-height: 1.4;
}

/* ---------- 空メッセージ ---------- */
.machine-lp-empty {
  color: #888;
  text-align: center;
  padding: 48px 0;
  font-size: 16px;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 1024px) {
  .machine-lp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .machine-lp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
  .mlp-btn {
    padding: 10px 16px;
    font-size: 13px;
  }
  .machine-card-name {
    font-size: 13px;
  }
}
@media (max-width: 360px) {
  .machine-lp-grid {
    grid-template-columns: 1fr !important;
  }
}