/* Phase D 131: home / discover / kids 共通のレベルフィルタ UI
   shared/_level_filter.html.erb で利用 */

.level-filter-bar {
    padding: 0.75rem 2rem;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.level-filter-wrapper {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.5rem 0;
}

.level-filter-wrapper::-webkit-scrollbar { display: none; }

.level-filter-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem;
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 15%;
    min-width: 60px;
    text-decoration: none;
    color: inherit;
}

.level-filter-btn:hover {
    transform: scale(1.05);
}

/* Phase D 131: 対象なしレベル (該当曲 0 件) は非クリック + 視覚的に無効化 */
.level-filter-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.level-filter-btn.disabled:hover {
    transform: none;
}

.level-filter-btn img {
    width: 100%;
    max-width: 150px;
    height: auto;
    display: block;
}

/* Hide inactive image, show active image when .active or :hover */
.level-filter-btn .level-img-active { display: none; }
.level-filter-btn .level-img-inactive { display: block; }

/* Desktop: show on .active or :hover */
@media (hover: hover) and (pointer: fine) {
  .level-filter-btn.active .level-img-active,
  .level-filter-btn:hover .level-img-active { display: block; }
  .level-filter-btn.active .level-img-inactive,
  .level-filter-btn:hover .level-img-inactive { display: none; }
}

/* Mobile: show on .active only */
@media (max-width: 768px) {
  .level-filter-btn.active .level-img-active { display: block; }
  .level-filter-btn.active .level-img-inactive { display: none; }
}