/* フォント設定 */
body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #313338; /* Discordの背景色に近づける */
    background-image: radial-gradient(circle at 50% 0%, rgba(88, 101, 242, 0.15) 0%, rgba(88, 101, 242, 0) 40%);
    scroll-behavior: smooth;
}

/* カスタムスクロールバー (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #202225;
}
::-webkit-scrollbar-thumb {
    background: #404249;
    border-radius: 5px;
    border: 2px solid #202225;
    transition: background-color 0.2s ease-in-out;
}
::-webkit-scrollbar-thumb:hover {
    background: #5865F2; /* blurple */
}

/* --- アニメーション定義 --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInAndFade {
    from {
        opacity: 0;
        transform: translateX(-25px) skewX(5deg);
    }
    to {
        opacity: 1;
        transform: translateX(0) skewX(0);
    }
}

@keyframes subtlePulse {
    0%, 100% { box-shadow: 0 0 15px rgba(88, 101, 242, 0.4); }
    50% { box-shadow: 0 0 25px rgba(88, 101, 242, 0.7); }
}

/* --- カードの表示アニメーション --- */
#card-grid > div {
    opacity: 0; /* 初期状態は非表示 */
    animation: fadeInUp 0.6s ease-out forwards;
}
/* カードを順番に表示させるための遅延設定 */
#card-grid > div:nth-child(1) { animation-delay: 0.1s; }
#card-grid > div:nth-child(2) { animation-delay: 0.2s; }
#card-grid > div:nth-child(3) { animation-delay: 0.3s; }
#card-grid > div:nth-child(4) { animation-delay: 0.4s; }
#card-grid > div:nth-child(5) { animation-delay: 0.5s; }
#card-grid > div:nth-child(6) { animation-delay: 0.6s; }
#card-grid > div:nth-child(7) { animation-delay: 0.7s; }


/* Discordのブランドカラーをカスタム設定 */
.bg-blurple { background-color: #5865F2; }
.text-blurple { color: #5865F2; }
.border-blurple { border-color: #5865F2; }
.ring-blurple { --tw-ring-color: #5865F2; }
.hover\:bg-blurple-dark:hover { background-color: #4752C4; }

/* コンテンツ用のスタイル */
.content-section h1 {
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    animation: slideInAndFade 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
    opacity: 0;
}
.content-section h2 { 
    font-size: 1.875rem; 
    font-weight: 700; 
    margin-top: 2.5rem; 
    margin-bottom: 1rem; 
    padding-bottom: 0.5rem; 
    border-bottom: 2px solid #404249; 
    color: #f2f3f5; /* 見出しの色を明るく */
}
.content-section h3 { 
    font-size: 1.5rem; 
    font-weight: 600; 
    margin-top: 2rem; 
    margin-bottom: 1rem; 
    color: #f2f3f5;
}
.content-section p { 
    line-height: 1.75; 
    margin-bottom: 1rem; 
}
.content-section code { 
    background-color: #2b2d31; 
    color: #fbbd23; /* 黄色を調整 */
    padding: 0.25rem 0.5rem; 
    border-radius: 0.375rem; 
    font-family: 'Fira Code', monospace, sans-serif; /* おすすめの等幅フォント */
    border: 1px solid #202225;
}

/* トップに戻るボタンのスタイル */
#to-top-btn {
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    opacity: 0; 
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    transform: translateY(20px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
#to-top-btn:hover {
    transform: scale(1.1) translateY(0); /* ホバー時に少し拡大 */
    box-shadow: 0 0 20px rgba(88, 101, 242, 0.7);
}
#to-top-btn.show { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0); 
}

/* ボタンの共通ホバーアニメーション */
.show-content-btn, .back-to-grid-btn, #modal-close-btn, #suggestion-form button {
    transition: all 0.2s ease-in-out !important;
}
.show-content-btn:hover, .back-to-grid-btn:hover, #modal-close-btn:hover, #suggestion-form button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important;
}
.show-content-btn:active, .back-to-grid-btn:active, #modal-close-btn:active, #suggestion-form button:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}


/* UI再現プレースホルダーのインタラクティブ要素 */
.interactive-item { 
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; 
    cursor: pointer; 
}
.interactive-item:hover { 
    background-color: #404249 !important; 
    border-radius: 4px; /* ホバー時に角を丸くする */
}
.interactive-item:active {
    transform: scale(0.98); /* クリック時に少し縮む */
}
.interactive-icon { 
    transition: all 0.2s ease-in-out; 
    cursor: pointer; 
}
.interactive-icon:hover { 
    border-radius: 35%; 
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(88, 101, 242, 0.5); /* ホバー時に光るエフェクト */
}
/* ボイスチャンネル参加ボタンの点滅アニメーション */
[data-action="join-vc"] {
    animation: subtlePulse 2.5s infinite ease-in-out;
}


/* モーダル（ダイアログ）のスタイル */
#modal-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    backdrop-filter: blur(4px); /* 背景をぼかす */
    z-index: 100;
    display: flex; 
    align-items: center; 
    justify-content: center;
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s, visibility 0.3s;
}
#modal-overlay.show { 
    opacity: 1; 
    visibility: visible; 
}
#modal-content {
    background-color: #313338; 
    color: #dbdee1; 
    padding: 2rem;
    border-radius: 0.5rem; 
    width: 90%; 
    max-width: 500px;
    transform: scale(0.95); 
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 少し跳ねるようなアニメーション */
    border: 1px solid #404249;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
#modal-overlay.show #modal-content { 
    transform: scale(1); 
}

/* 検索結果のハイライトスタイル */
.search-result-item mark {
    background-color: #f9a825;
    color: #1e1f22;
    padding: 2px 0;
    border-radius: 3px;
}