/* ===================================
   Discord Section - Top Page Override
   トップページ専用のDiscordセクションスタイル
   =================================== */

/* トップページのDiscordセクションのみに適用 */
#discord.discord-section {
    background: linear-gradient(135deg, #ffffff 0%, #fefefe 50%, #f9f9f9 100%);
}

#discord.discord-section::before {
    background: radial-gradient(circle, rgba(230, 0, 18, 0.08) 0%, transparent 70%);
}

/* セクションタイトル - 赤と明るめグレー */
#discord .section-title .title-en {
    color: var(--coen-red); /* JOIN OUR DISCORD - 赤 */
}

#discord .section-title .title-ja {
    color: #999999; /* Discordコミュニティ - 明るめグレー */
}

/* サーバー名 - 白 */
#discord .discord-server-name {
    color: #ffffff;
}

/* サーバー説明 - 明るめグレー */
#discord .discord-server-description {
    color: #999999;
}

/* メンバー数とラベル - すべて白 */
#discord .member-count {
    color: #ffffff;
}

#discord .member-label {
    color: #ffffff;
}

/* ウィジェットカード背景 */
#discord .discord-widget-card {
    background: linear-gradient(135deg, rgba(230, 0, 18, 0.95) 0%, rgba(200, 0, 15, 0.95) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 60px rgba(230, 0, 18, 0.3);
}

#discord .discord-widget-card:hover {
    box-shadow: 0 30px 80px rgba(230, 0, 18, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
}

/* サーバーアイコン - 白ボーダー */
#discord .discord-server-icon {
    border: 4px solid #ffffff;
    box-shadow: 0 8px 24px rgba(230, 0, 18, 0.4);
}

/* メンバー情報背景 */
#discord .discord-members-info {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 参加ボタン - 白背景に赤文字 */
#discord .discord-join-btn {
    background: #ffffff;
    color: var(--coen-red);
}

#discord .discord-join-btn::before {
    background: linear-gradient(to right, var(--coen-red) 0%, var(--accent-red) 100%);
}

#discord .discord-join-btn:hover {
    background: #ffffff;
    color: #ffffff;
}

/* 浮遊アイコン - 赤ボーダー */
#discord .floating-avatar {
    border-color: rgba(230, 0, 18, 0.4);
    box-shadow: 0 4px 15px rgba(230, 0, 18, 0.3);
}

#discord .floating-avatar:hover {
    border-color: var(--coen-red);
    box-shadow: 0 8px 25px rgba(230, 0, 18, 0.6);
}